如何在 React Native 中实现想要的 UI

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%'
}


})