Navigate back to the homepage

How to focus textinput in react native

Infinitbility
React Native
August 11th, 2021 · 1 min read
How to focus textinput in react native

Hello Friends 👋,

Welcome To Infinitbility! ❤️

This tutorial will help you to manage textinput focus programmatically in react native, here you will get an example of how we control text input auto-selection using code, we can auto show selected or focus input or whenever we can change user focus to another textinput.

Let’s start today topic How to focus textinput in react native

React Native textinput provide the option to blur and focus any textinput but for use those function we have to create ref for it.

First understand how can we create ref of any textinput in react native then we will go on the second step for control focus and blur of textinput.

focus textinput in class component example

For creating ref first we have to define those refs on the constructor.

this.firstTextInput = React.createRef();

let’s understand with the example of create ref of textinput in class component.

1import React from 'react';
2import { View, Text, TextInput } from 'react-native';
3
4class ReactNativeComponents extends React.Component {
5 constructor(props){
6 super(props);
7
8 this.secondTextInput = React.createRef();
9 }
10
11 render() {
12 return (
13 <View>
14 <Text>React Components</Text>
15 <TextInput
16 placeholder="FirstTextInput"
17 returnKeyType="next"
18 onSubmitEditing={() => { this.secondTextInput.focus(); }}
19 blurOnSubmit={false}
20 />
21
22 <TextInput
23 ref={(ref) => { this.secondTextInput = ref; }}
24 placeholder="secondTextInput"
25 />
26 </View>
27 );
28 }
29}
30
31export default ReactNativeComponents;

The above example also added auto navigate the second textinput when the first input fired submit an event.

focus textinput in functional component example

In functional component, React provide useRef() functionality, and we can use for creating ref of textinput.

let’s understand the same example in the functional component.

1import React, { useRef } from 'react';
2import { View, Text, TextInput } from 'react-native';
3
4export const ReactNativeComponents = () => {
5 const secondTextInput = useRef();
6
7 return (
8 <View>
9 <Text>React Components</Text>
10 <TextInput
11 placeholder="FirstTextInput"
12 returnKeyType="next"
13 onSubmitEditing={() => { secondTextInput.focus(); }}
14 blurOnSubmit={false}
15 />
16
17 <TextInput
18 ref={secondTextInput}
19 placeholder="secondTextInput"
20 />
21 </View>
22 )
23}

Thanks for reading…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Tutorials

React Native

Categories

More articles from Infinitbility

How to encode a URL in react native

How to encode a URL in react native

React Native encode URL Example

August 10th, 2021 · 1 min read
How to encode and decode base64 in react native

How to encode and decode base64 in react native

React Native base64 Example

August 10th, 2021 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]