My icon inside TextInput does not work on Android devices but works on iOS

Question

I have this weird problem where my icon functionality does not work on Android but works on iOS and I'm puzzled.

Basically what I would like to achieve is to press on the icon with eye and show or hide password when user is signing in.

 <Controller
        name="password1"
        control={control}
        render={({ field: { onChange, value, name } }) => (
          <>
            <TextInput
              label="Password"
              secureTextEntry={!showPassword}
              returnKeyType="next"
              textContentType="password"
              onChangeText={onChange}
              value={value}
              onBlur={() => trigger(name)}
              keyboardType="email-address"
              testID="password-input"
              error={errors?.password1?.message}
              right={
                <RNPTextInput.Icon
                  icon={showPassword ? EyeOff : EyeOn}
                  onPress={() => {
                    setShowPassword(!showPassword);
                  }}
                />
              }
            />
          </>
        )}
      />

What I did try is to play around and replace the RNTextInput.Icon to TouchableOpacity but ain't workin.

SEND HALP RN IS SO WEIRD SOMETIMES I LOVE IT

If RNPTextInput is a custom implementation, the problem must be there. TextInput.Icon works just fine. — user18309290, Aug 04 '23 at 15:14

score 0 · Answer 1 · answered Aug 04 '23 at 11:40

You can achieve this using this code

<View style={{flexDirection:'row'}}>
            <TextInput
              label="Password"
              secureTextEntry={!showPassword}
              returnKeyType="next"
              textContentType="password"
              onChangeText={onChange}
              value={value}
              onBlur={() => trigger(name)}
              keyboardType="email-address"
              testID="password-input"
              error={errors?.password1?.message}
        
            />
               <Icon
                  icon={showPassword ? EyeOff : EyeOn}
                  onPress={() => {
                    setShowPassword(!showPassword);
                  }}
                />
                
 </View>

you can adjust the styling accordingly

you can use Icon package https://www.npmjs.com/package/react-native-vector-icons or use a pressable image — Adnan Ashraf, Aug 07 '23 at 07:00

My icon inside TextInput does not work on Android devices but works on iOS

1 Answers1