I want to add the icon in the input field-CodePudding

enter image description hereI want to add an icon on the right side input text field

View style={styles.InputContainer}>
            <TextInput
              style={styles.input}
              placeholder="EMAIL"
              placeholderTextColor="#0F286A"
              autoCapitalize="none"
            />
            <Icon
              name="ios-person"
              size={25}
              color="#4F8EF7"
              style={styles.inputIcon}
            />
          </View>

CodePudding user response：

You will need to adapt this to your use case but this is the idea, please note that the container view is the container for the input, not the main container. To add it to the right you just need to switch them around.

<View style={styles.container}>
            <FontAwesome
                style={styles.icon}
                name="user"
                size={30}
                color="rgb(0, 200, 160)"
            />
            <TextInput
                style={styles.input}
                placeholder={props.placeholder}
                placeholderTextColor="rgb(150,150,150)"
                onChangeText={(e) => changeHandler(e)}
            />
        </View>

Styles:

container: {
        backgroundColor: 'rgba(40, 40, 40, 0.6)',
        flexDirection: 'row',
        width: '100%',
        padding: 14,
        borderBottomWidth: 2,
        borderRadius: 3,
        marginTop: 15,
    },
    input: {
        color: 'rgb(220, 220, 220)',
        fontSize: 14,
        width: '73%',
        alignSelf: 'center',
    },
    icon: {
        marginRight: 12,
        width: '10%',
        alignSelf: 'flex-start',
    },

CodePudding user response：