-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.
– Jhonny Freire
Thanks! There are some other cool ones that you recommend?
– Danilo Arguelho
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
– Jhonny Freire
thank you very much!
– Danilo Arguelho