Update from: Keyboardavoidingview not working properly with TextInput Password Field

This bug it’s related with #23818. I’ve opened again because I strongly thing this is a bug and @hussainahmad doesn’t actually found why it was happening.

Description

The bug is as @hussainahmad explained. When you use several TextInput inside of a KeyboardAvoidingView component, if you change the focus between a secureTextEntry to another TextInput that doesn’t have this attribute, the KeyboardAvoidingView component doesn’t adapt to the space and act like a normal View component. I think this happen when keyboard size change. This is happening to me with Google Keyboard, that has a “toolbar” that doesn’t appear with the private inputs. When you change the input, the keyboard becomes bigger and make KeyboardAvoidingView doesn’t work. On the other hand, when you use other keyboards that have fixed size (like Flesky for example) we have a correct behavior.

React Native version:

System:
    OS: Linux 5.4 Manjaro Linux
    CPU: (4) x64 Intel(R) Core(TM) i5-5200U CPU @ 2.20GHz
    Memory: 1.20 GB / 7.69 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.3.0 - ~/.nvm/versions/node/v14.3.0/bin/node
    Yarn: 1.22.10 - /usr/bin/yarn
    npm: 7.6.3 - ~/.nvm/versions/node/v14.3.0/bin/npm
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
  Languages:
    Java: 1.8.0_282 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: ~0.63.4 => 0.63.4 
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

If you take the code that I provide, you could reproduce the bug with the following steps (Use the last version of google keyboard):

1. Open your app with your actual device. You can’t reproduce the bug with the emulator just because the keyboard size is fixed
2. Touch in the InputField that has the secureTextEntry attribute set to true.
3. Once it’s focused, touch on the other InputField that has the secureTextEntry attribute set to `false
4. The results will be as you see in this video.

All of this doesn’t happen if you change the focus from non secureTextEntry to a secure one

Expected Results

The ideal result happens when the keyboard doesn’t modify their size. You can see an example in this video.

Snack, code example, screenshot, or link to a repository:

I’m going to provide part of the code (of a personal project) that I use to make the videos. I’ve added the parts that I think could be useful. It’s the App.js and a component. It think it’s not necessary more code, but if you need it let me know.

App.js

import React, { useEffect, useRef } from "react";
import { StyleSheet, ScrollView, Text, Image, KeyboardAvoidingView, Keyboard } from "react-native";
import TextButton from './src/components/buttons/textButton/textButton';
import SimpleInput from './src/components/inputs/simple/simple';
import { useFonts, OpenSans, OpenSans_600SemiBold, OpenSans_400Regular } from '@expo-google-fonts/open-sans';
import Constants from 'expo-constants'

export default function App() {

  const scrollComponent = useRef(null);

  // const [ styleKeyboard, setStyleKeyboard ] = useState(true)
  useEffect(() => {

    Keyboard.addListener("keyboardDidShow", () => {
      scrollComponent.current.scrollToEnd();
    })

  })

  let [fontsLoaded] = useFonts({
    OpenSans,
    OpenSans_600SemiBold,
    OpenSans_400Regular
  });

  return (
    <KeyboardAvoidingView 
      behavior={Platform.OS == "ios" ? "padding" : "height"}
      style={styles.screenContainer}
      >
      <ScrollView 
        showsVerticalScrollIndicator={false}
        ref={scrollComponent}
        style={styles.content}>
        <Image
          style={{
            width: 203,
            height: 250,
            alignSelf: "center"
          }}
          source={require('./assets/icon-5359553__340.webp')}
        />
        <Text
          style={{
            textAlign: "center",
            marginVertical: 10,
            fontSize: 32,
            fontFamily: 'OpenSans_600SemiBold',
            color: '#03242B'
          }}>
          Example test for title
        </Text>
        <SimpleInput
          type='username'
          style={{ marginVertical: 10 }}
          placeholder="Usuario"
        />
        <SimpleInput 
          type="password"
          style={{ marginVertical: 10 }}
          placeholder="Contraseña"        
        />
        <TextButton 
          style={{ marginVertical: 10 }}
          text = 'Entrar'
        />
      </ScrollView>
    </KeyboardAvoidingView>
  );

}

const styles = StyleSheet.create({
  
  screenContainer: {
    flex: 1,
    // justifyContent: "center",
    padding: '5%',
    marginTop: Constants.statusBarHeight,
    backgroundColor: '#F8F8F8'
  },

  content: {
    overflow: 'scroll'
  }

})

simple.js

import React, { useState } from 'react'
import { TextInput } from 'react-native'
import { styles } from './style'

const SimpleInput = (props) => {

    const [ stateStyle, setStateStyle ] = useState(true);

    let dynamicAttr = {}

    if(props.type == 'password'){
        dynamicAttr.secureTextEntry=true

        if(props.newPassword)
            dynamicAttr.textContentType='newPassword'
    }

    const focusStyle = () => {
        setStateStyle({
            borderWidth: 1,
            borderColor: '#054956'
        })
    }

    const blurStyle = () => {
        setStateStyle({})
    }

    return (
        <TextInput 
            style={[styles.main, props.style, stateStyle]} 
            placeholder={props.placeholder}
            placeholderTextColor="#898989"

            autoCompleteType='off'
            textContentType='password'
            {...dynamicAttr}

            onFocus={focusStyle}
            onBlur={blurStyle}
        ></TextInput>
    );

}

export default SimpleInput;

[corderop]

@hussainahmad Thanks! will check out. Nevertheless, I think the should check out the bug in order to fix it.

[hussainahmad]

@corderop You can use react-native-keyboard-aware-scroll-view for handling keyboard and scrolling issue. Thanks