Next Input Focus on React Native

Revzan Kamarullah — Thu, 19 Sep 2019 08:46:51 +0000

You must be familiar of using Tab key to focus to next element when browsing the web. It's a simple trick to make your browsing experience easier. Recently, I am making an app with React Native that has a one-time password (OTP) form. I am planning to give the same experience when user inserts a number the app will focus to the next TextInput.

This can be done by using ref attribute. Ref allows us to access the React component or DOM node that is going to be modified. Basically, what we are going to do are

Create an array consist of React.createRef
Add the ref attribute to the inputs
Create a function to handle onChange from the inputs
Focus the next input found

class OtpForm extends React.Component {
    constructor(props){
        super(props)
        this.inputRefs = [
            React.createRef(),
            React.createRef(),
            React.createRef(),
            React.createRef()
        ]
        // or 
        // this.inputRefs = Array(4).fill(React.createRef())
    }
}

Now above we already have an array of React.createRef. We only need 4 digits of OTP and one digit for each inputs. So we gonna add these elements to our render method.

...
   render(){
     return (
       <View>
         <Text>Enter OTP</Text>
         <View style={{ flexDirection: 'row' }}>
           <TextInput maxLength="1" />
           <TextInput maxLength="1" />
           <TextInput maxLength="1" />
           <TextInput maxLength="1" />
         </View>
       </View>
     )
   }
...

Notice that we have not add the ref attr to any TextInput. To make it easier we will rewrite those code to render TextInput based on our this.inputRefs length, then we add the ref attr.

...
   render(){
     return (
       <View>
         <Text>Enter OTP</Text>
         <View style={{ flexDirection: 'row' }}>
          {
            this.inputRefs.map((k, idx) => (
              <TextInput ref={r => this.inputRefs[idx] =  r} maxLength="1" />
            ))
          }
         </View>
       </View>
     )
   }
...

So basically, we iterate through our this.inputRefs using .map operator then we define the ref attr for each TextInput according to its index.

Now we already have our this.inputRefs array elements connected to each of the TextInput. The next thing is handling changes made by user. Since our TextInput only going to contain 1 digit number so we only need to handle onChange event. We are going to make a function _goNextAfterEdit that will set focus on the next input element.

class OtpForm extends React.Component {
    constructor(props){
        super(props)
        this.inputRefs = [
            React.createRef(),
            React.createRef(),
            React.createRef(),
            React.createRef()
        ]
    }

    // Pass the index of the current TextInput
    // then plus that with +1 
    _goNextAfterEdit(index){
        this.inputRefs[index+1].focus()
    }

    render(){
     return (
       <View>
         <Text>Enter OTP</Text>
         <View style={{ flexDirection: 'row' }}>
          {
            this.inputRefs.map((k, idx) => (
              <TextInput onChange={() => this._goNextAfterEdit(idx)} ref={r => this.inputRefs[idx] =  r} maxLength="1" />
            ))
          }
         </View>
       </View>
     )
   }
}

That's it!

Basically those code satisfy our purpose. But there are additional code you can add to avoid bugs or improve functionality, such as:

Validate the last `TextInput`

Since we render our TextInput based on the length of this.inputRefs, there will be a bug when user is editing the last TextInput provided inside the form.

...
   _goNextAfterEdit(index){
     if(index < this.inputRefs.length) {
       this.inputRefs[index+1].focus()
     }
   }
...

Handling > 1 digit text input

You might not want to use onChange event when having TextInput that receive word or > 1 digit character. I suggest using onSubmitEditing which fires when the user submit button from his/her keyboard.

Specify the input type

In React Native, you specify the keyboard displayed whenever the user is editing the TextInput. You can specify it by adding the keyboardType attr. For the complete list of keyboard type, https://facebook.github.io/react-native/docs/textinput.html#keyboardtype

Investment in your Engineering team

Revzan Kamarullah — Tue, 27 Aug 2019 16:35:10 +0000

Investment In Your Engineering Team

As a software engineer or an employee in general, it always feel good when your company care about your needs, both personal and career developments. It is a sign of trust, an investment that you value or even a reason to join the team in the first place.

Recently, my close friend was reaching out to me about a problem in his workplace that put him in a difficult position which most probably will led him leaving the company. It was an unfortunate matter to say the least.

To heard this kind of thing, as a fellow engineer, that's really upsetting. I believe we could do better to keep valuable team member and encouraging their improvement that needed by the team itself. So, here's the investment I believe will keep people happy and comfortable while also boost their performance.

Provide an arsenal

Let's say your engineer are soldiers. They need weapons. Providing the right tool is crucial to make their job efficient and effective. When you can afford them a decent unit of laptop, it already an investment that you willing to make which also a saying that the company is willing to help with challenges they meet or will meet when delivering products or features.

While this is common practice, I am aware some companies or startups have difficulty to provide stuff. Here's the thing, the key is to communicate or have an understanding between you and your engineer, whether you can afford their needs now, later or maybe you never. I believe they are happier for an answer rather than saying nothing.

It also does not have to be a product, a computer or monitor screens it could also be a course, workshops, etc. which bring us to the next investment strategy.

Help them with their journey

The thing I acknowledge about being a software engineer, is that learning is essential to stay in the game. With software engineering tools and frameworks improving really fast, there are demands and desires to keep up with it. This could decide how we as an engineer choose our path.

Providing access to course, workshops or meet-ups are often underrated. While the benefits are not seen immediately, this could bring value both for the engineer and the company. It will send a message that the company cares about their knowledge, skill and career growth in a good way. Please don't forget that after those events they will come back to the office and works there for God knows how long. I believe giving them access to those means adding value to your team too, it could help them solve your business problems, it could them provide broad choice of solutions when facing those problems.

There's a saying that I embrace hoping if I ever manage a team that's

The problem is not when you developed your employee and they go away, but it's when they are under develop and they stay

Hopefully this could give you insights when you are building or maintaining teams. I believe to nurture good relationship with your employee or your employer is key to achieving the mutual goals which can be happen by giving each other your best.

DEV Community: Revzan Kamarullah