0

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>
  );
};

0 Answers0