Ввод теряет фокус при начале ввода в ТЕМЕ

Question

Я пытаюсь разработать собственное приложение, для которого я создаю пользовательский компонент темы и включаю свой экран в тему, используя this.props.child. Проблема заключается в том, что поле ввода на экране теряет фокус, и клавиатура отключается после каждого вводимого мной символа, как в onChange Я обновляю переменные состояния, которые могут повторно отображать всю тему.

Я пробовал многие решения, данные на Github, например, передачу уникального ключа в поле ввода, но они не работают.

Вот так выглядит мой компонент темы:

import Header from './header'
import footer from './footer'

export default class Theme extends Component {

    render() {
        //------this is my header component----
        <Header/>
        <View>
        //------this is my Body  in which i include my sceen content----
        {this.props.children}
        </View>

         //------this is my footer component----
        <footer/>
    }
}

Вот мой экран с полем ввода:

import Theme from "../../components/Theme";
import { Input, Button } from "react-native-elements";

export default  class ChangePassword extends Component {

    constructor(props) {

    super(props);
    this.state = {

        inputs:{
            old_password : {value:null, errorMesssage:""}

        }
    }
}


 setValues = async (key, value) => {

    let { inputs } = this.state;

      inputs[key]["value"] = value;
      inputs[key]["errorMessage"] = "";


      await this.setState({ inputs });


  }

    render(){

    let {inputs}=this.state;
    return(
            <Theme>

            <Input
                    key="Current_password"
                    ref="Current_password"
                    containerStyle={styles.containerStyle}
                    inputContainerStyle={styles.inputContainer}
                    label="Current password"
                    value={inputs.old_password.value}
                    errorMessage={inputs.old_password.errorMessage}
                    errorStyle={styles.inputErrorStyle}
                    secureTextEntry={true}
                    autoFocus={true}
                    onChangeText={(val) => {
                    this.setValues("old_password", val);
                    }}

                />


            </Theme>
    )

    }

}

Пожалуйста, помогите мне решить проблему, я хочу, чтобы onChangeText обновил мою переменную состояния, не отключая клавиатуру.

Answer 1

Отключить автофокус

 autoFocus={false}

Answer 2

Как насчет ловушки жизненного цикла - shouldComponentUpdate, где вы можете решить, когда компонент должен перерисовать?