skip to Main Content

I am trying to acheive a styling as shown in the image attached below
enter image description here

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

enter image description here

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


  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>
    
    Login or Signup to reply.
  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.

    enter image description here

    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%'
    }
    
    
    })
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search