title: Keyboard dismisses while typing TextInput in nested functional component React Native
body: <p>I have this strange issue, keyboard keeps closing while typing when TextInput is placed inside Child Functional Component. This issue does not exist if TextInput is placed directly under Parent Component. Here is my code</p>
  
  <pre><code>const SignInScreenC = props =&gt; {
  
  // define Hook states here    
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [isEmailEmpty,setIsEmailEmpty] = useState(false);
  const [isEmailValid,setIsEmailValid] = useState(true);
  const [isPasswordEmpty,setIsPasswordEmpty] = useState(false);
  
  
  /**
   * Called when Sign in is clicked.
   * checks if the form is valid
   */
   const _OnSignInClicked = () =&gt; {
     if(_isFormValid()) {
      //make api call
     }
   }
  
  /* Checks if the form is valid
  */
  const _isFormValid = () =&gt; {
     //reset values 
     setIsEmailEmpty(false);
     setIsEmailValid(true);
     setIsPasswordEmpty(false);
  
     let isValid = true;
     if(email.trim() === "") {
        setIsEmailEmpty(true);
        isValid = false;
      }
     else if(!AppUtils.isEmailValid(email)) {
        setIsEmailValid(false);
        isValid = false;
     }
     else if(password.trim() === "") {
        setIsPasswordEmpty(true);
        isValid = false;
     }
   return isValid;
  }
  
  
  const SignInForm = () =&gt; {
    return (
  
      &lt;View style={styles.formStyle}&gt;
      &lt;TextInput
         key="email"
         label={Strings.hint_email}
         value={email}
         keyboardType="email-address"                            
         onChangeText={(text)=&gt;  {
             setEmail(text)
             setIsEmailEmpty(false)
             setIsEmailValid(true)
         }}
         style={styles.marginStyle}
         autoCompleteType = "off"
         scrollEnabled = {false}
         autoCorrect={false}
         autoCapitalize={false}/&gt;
  
         &lt;TextInput
          key="pass"
          value={password}
          secureTextEntry ={true}
          label={Strings.hint_password}
          style={[styles.marginStyle,styles.stylePassword]}
          onChangeText={(text)=&gt; {
               setPassword(text)
               setIsPasswordEmpty(false)}
          }
          theme="light"
          autoCompleteType = "off"
          scrollEnabled = {false}
          autoCorrect={false}
          autoCapitalize={false}/&gt;
          &lt;Button 
              style={styles.loginStyle}
              title = {Strings.login}
              onPressButton = {() =&gt; _OnSignInClicked()}/&gt;
  
      &lt;/View&gt;
    );
  }
  
  return ( 
  
      &lt;&gt;
  
          &lt;ImageBackground source={Images.screen_backgound} style={{width: '100%', 
            height: '100%'}}&gt;
              &lt;View style = {styles.viewOverlaystyle} /&gt;
              &lt;ScrollView  contentContainerStyle = {{flexGrow:1}} 
                  keyboardShouldPersistTaps={'handled'}&gt;
                  &lt;View style={styles.containerStyle}&gt;
                      &lt;SignInForm/&gt;
                  &lt;/View&gt;
              &lt;/ScrollView&gt;
          &lt;/ImageBackground&gt;
  
      &lt;/&gt;
   );
  }
  
  const styles = StyleSheet.create({
     ....
  })
  
  const mapStateToProps = state =&gt; ({
     userData : state.userData
  });
  
  const mapDispatchToProps = dispatch =&gt;
      bindActionCreators(UserActions, dispatch);
  
   const SignInScreen = connect(mapStateToProps,mapDispatchToProps) (SignInScreenC)
  
   export {SignInScreen};
  </code></pre>
  
  <p>Everything works fine if I paste everything &lt; SignInForm> directly to render method.</p>