I am trying to acheive a styling as shown in the image attached below
See how here the fingerprint icon happens to be inside the border of the Textinput field but instead I am getting the output as shown below
PS:- ignore the left and right side black color borders it happens to be the simulator body just focus on the UI.
Here’s my code :-
import { View, Text, TextInput, StyleSheet } from 'react-native'
import React from 'react'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
const TestAtom = () => {
return (
<View style={styles.searchSection}>
<TextInput style={styles.input} placeholder='User' onChangeText={(searchString) => {this.setState({searchString})}}
underlineColorAndroid="transparent"/>
<Icon style={styles.searchIcon} name='fingerprint' size={20} color= '#000' />
</View>
)
}
const styles = StyleSheet.create({
searchSection: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
searchIcon: {
// padding: 10
paddingRight: 10
},
input: {
flex: 1,
paddingTop: 10,
paddingRight: 10,
paddingBottom: 10,
paddingLeft: 0,
backgroundColor: '#fff',
color: '#424242',
borderBottomColor: '#000',
borderBottomWidth: 1
}
});
export default TestAtom
Can anyone help me with it.
2
Answers
You should make a View and place the Text Input and Fingerprint icon inside.
A small example of how it will look like.
Have the Textinput and the fingerprint icon as two components in the same view styled as flex-direction:row. Have the bottom ruler part as a separate item which draws under the View of Textinput and the Icon.