I am trying to use react-native secureTextEntry to hide my password field during registration. When I click on the show or hide icon to show or hide text then on IOS side secureTextEntry field is working fine but on Android side its don't show or hide text.
I am call the Component from screen see below:
<RNInput
title="YOUR PASSWORD"
svg={
isSecure ? (
<Show alignSelf="center" />
) : (
<Hide alignSelf="center" />
)
}
onPress={() => setIsSecure(!isSecure)}
isSecure={!isSecure}
editable={!isLoading}
value={password}
input={{
placeholder: 'password',
onChangeText: handleChange('password'),
onBlur: handleBlur('password'),
value: password,
}}
/>
The Components is:
const RNInput = ({
title,
svg,
onPress,
isSecure,
marginVertical,
editable,
input,
marginBottom = hp(1),
}) => {
const { fontChange } = useSelector((state) => state.appReducer);
const font = fonts(fontChange);
const { color } = useTheme();
return (
<View style={{ marginVertical: marginVertical }}>
<Text
style={{
fontFamily: font.bold,
fontSize: hp(1.2),
color: color.g2,
marginBottom: marginBottom,
}}
numberOfLines={1}
>
{title}
</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
}}
>
<TextInput
{...input}
autoComplete="off"
placeholderTextColor={color.g17}
style={{
color: color.white,
fontFamily: font.regular,
fontSize: hp(2),
width: wp(73),
minHeight: hp(5),
}}
secureTextEntry={isSecure}
editable={editable}
autoCapitalize="words"
/>
<TouchableOpacity
onPress={onPress}
style={{ justifyContent: 'center', width: wp(10) }}
disabled={!editable}
>
{svg}
</TouchableOpacity>
</View>
<RNDrive borderClr={color.g10 } borderWidth={0.7} />
</View>
);
};