How to put the icon to see the password inside Inputoutline

Asked

Viewed 23 times

-2

I wonder how I can put this icon inside my Password Inputoutline:

Here is the code of Inputoutline:

[..]

    return (
       <SafeAreaView style={styles.formContext}>
            <View style={styles.txtEmail}>
                <OutlineInput
                    value={user}
                    onChangeText={(e: string) => setUser(e)}
                    label="Email"
                    activeValueColor="#8D31E1"
                    activeBorderColor="#8D31E1"
                    activeLabelColor="#8D31E1"
                    passiveBorderColor="#C99DF0"
                    passiveLabelColor="#C99DF0"
                    passiveValueColor="#C99DF0"
                />
            </View>
            <View style={styles.txtPwrdArea}>
                <View style={styles.txtPwrd}>
                    <OutlineInput
                        value={pwrd}
                        onChangeText={(e: string) => setPwrd(e)}
                        label="Password"
                        secureTextEntry={hidePwrd}
                        activeValueColor="#8D31E1"
                        activeBorderColor="#8D31E1"
                        activeLabelColor="#8D31E1"
                        passiveBorderColor="#C99DF0"
                        passiveLabelColor="#C99DF0"
                        passiveValueColor="#C99DF0"
                    />
                </View>

                <TouchableOpacity style={styles.txtPwrdIcon}>
                    <Ionicons 
                        name={hidePwrd ? 'eye' : 'eye-off'} 
                        color="#8D31E1"
                        size={30} 
                        onPress={ () => setHidePwrd(!hidePwrd)}
                    />
                </TouchableOpacity>
                
            </View>

[...]

Input and Icon style.tsx:

    txtPwrdArea: {
        flexDirection: 'row',
        width: '90%',
        marginTop: 5,
        paddingTop: 10,
        position: 'relative',
    },

    txtPwrd: {
        paddingTop: 20,
        paddingLeft: 20,
        width: '90%',
    },
    txtPwrdIcon: {
        marginTop: 32,
        marginLeft: 10,
    },

If you need more information, please comment.

Thank you.

  • If you are using the lib I imagine it to be (https://www.npmjs.com/package/react-native-outline-input), it does not allow you to do this because this Outline is not a container. You will need to create your own container/wrapper or use some other lib that allows this. Also, this lib I mentioned has 1 year without new releases, see if it is really worth using it.

  • Thanks! There are some other cool ones that you recommend?

  • Take a look at the React-Native-paper, I think what you need is a Textinput like this https://callstack.github.io/react-native-paper/text-input-icon.html

  • thank you very much!

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.