React Native RequestFocus TextInput Programmatically Example

Procedure of selecting TextInput component is called as RequestFocus. When Android and iOS application user selects the TextInput for entering some value then it will automatically became high light this is because of RequestFocus. By default when react native app starts then there is no TextInput component will be focus but we can manually-dynamically focus any TextInput present in react native app using autoFocus = {true} prop. This prop would allow us to automatically focus/selects any TextInput on application starts time. So in this tutorial we would going to create a react native android iOS app and RequestFocus TextInput Programmatically Example Tutorial.

Topics cover in this example :

  • Enabling Auto Focus using autoFocus = {true} prop in TextInput.
  • Showing Next button on Keypad ( Both Android & iOS devices ).
  • Auto Select next TextInput on Next button Press.

Contents in this project RequestFocus TextInput Programmatically Example in React Native App :

1. Import StyleSheet, View and TextInput component in your project.

2. Create a Root View in render’s return block. This view is used as Parent View.

3. Create 1st TextInput component in Root View. Now we would use the autoFocus = {true} prop in this TextInput. Using this prop it will by default automatically selects-focus the TextInput on app starts time. We would use another prop returnKeyType = {“next”} in TextInput. This prop will show the Next Button on Keypad screen. Now we would use the onSubmitEditing={} prop this would help us to automatically navigate to next TextInput. We would use the ref=’ ‘ prop in next TextInput and pass some unique Text.

4. Create another TextInput for User Last Name and use the ref = ‘ ‘ prop. This prop is used as reference ID .

5. Create another TextInput for Address.

6. Create Style for Root View and TextInput component.

7. Complete source code for App.js File :

Screenshot in Android device :

RequestFocus TextInputScreenshot in iOS device :

5 Comments

  1. Monster! This was the easiest way to do it! Classical one!

    Thanks so much.
    André

  2. error: this2.refs.LastName.focus() is not a function

    My code:

    this.setState({FirstName})}

    iconContent={

    }
    returnKeyType = {“next”}

    autoFocus = {true}

    onSubmitEditing={(event) => {
    this.refs.LastName.focus();
    }}
    />

    this.setState({LastName})}
    iconContent={

    }
    />

  3. this.setState({FirstName})}

    iconContent={

    }
    returnKeyType = {“next”}

    autoFocus = {true}

    onSubmitEditing={(event) => {
    this.refs.LastName.focus();
    }}
    />

    this.setState({LastName})}
    iconContent={

    }
    />

Leave a Reply

Your email address will not be published. Required fields are marked *