How to achieve the desired UI in react native - react-native

Question

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.

Answer 1

You should make a View and place the Text Input and Fingerprint icon inside.
A small example of how it will look like.
<View style={{
borderWidth:1,
flex:1,
flexDirection:'row',
alignItems:'center'
}}>
<TextInput/>
<FingerIcon/>
</View>

Answer 2

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.
import { View, StyleSheet,SafeAreaView,TextInput } from 'react-native'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
function UIComponent(){
<View style={styles.container}>
<View style={styles.componentWrapper}>
<View style={styles.passwordFieldWrapper}>
<TextInput style={styles.textInput} placeholder='umana Password'>
</TextInput>
<MaterialCommunityIcons name="fingerprint" color='green' size={24} />
</View>
<View style={styles.bottomPart}>
</View>
</View>
</View>
}
export default UIComponent
const styles = StyleSheet.create({
container:{
backgroundColor:'#ffffff',
flex:1
},
componentWrapper:{
alignItems:'center',
justifyContent:'center'
},
passwordFieldWrapper:{
flexDirection:'row'
},
textInput:{
width:'50%'
},
bottomPart:{
marginTop:3,
borderBottomColor:'gray',
borderBottomWidth:1,
width:'60%'
}
})