Handling Inputs in React Native

A “How-To” on adding user inputs to your mobile-app

In nearly every web or mobile application there are times when you will need to capture a users input via text. An easy example would be when signing up and adding new users. In this blog post I will go over how to create and handle text inputs in React Native.

The Text Input Element

To add a text input in any web applicaiton you would use the input tag like so:

<input>

Of course you would also normally add a value, an event handler, and maybe even a placeholer or a name, which allow a user to actually intereact wtih it. In a React application you would also connect the value of this to a value in your applications state to control any inputs you add.

In react native much the logic remains the same, you will need to add a value attribute, an event handler and callback funciton, and even manipulate state. However, due to the fine developers of React Native it will also be written a bit differently. To add a text input to a React Native component you will need to import and add the TextInput element:

import React from 'react'
import { StyleSheet, Text, View, TextInput } from 'react-native'
const ExampleScreen = () => {
  return (
    <View>
      <Text> Enter Text:</Text>
      <TextInput/>
    </View>
  )
}
const styles = StyleSheet.create({})

Above I am creating a new component and using the View, Text, Stylesheet, and TextInput elements to create an example text input. An important difference between a text Input in React Native and web apps is that the TextInput element is a self closing, whereas a HTML input reads as an opening tag without a close. If we were to boot up a localhost server and open the app in Expo our input would look something like this:

It may be hard to see but if you look closely at the left edge there is a cursor blinking!

Out of the box the TextInput is there but it does not come styled. Which makes it very difficult to interact with. The next secition will coverhow to add some basic syling to a TextInput, and adding some attributes to provide some basic functionality.

Styling the Text Input

The first thing we want to do here is add some style to our TextInput so that we can acatually see it! For now we will simply add aborder and some margin. To do so we first must add a new object within our styles constant, in this case it is easy to just call it input.

const styles = StyleSheet.create({
  input:
    margin: 15,
    borderColor: 'black',
    borderWidth: 1
  }
})

If you are familar with CSS at all you will notice the keys in our input object look very similar to properties we would be using in a CSS file; margin, border-color, and border-width respectively. Now that we have created some styling we just need to add it to our TextInput element.

return (
    <View>
      <Text> Enter Text:</Text>
      <TextInput style={styles.input}/>
    </View>
  )

Now when we take a look at the the app again we would see this:

With some basic styling handled we can now begin to focus on controlling our inputs.

Input State Management

To manage state we first have to add it to our component. If you look at the component structure above currently we are using a fucitonal component. To add state to a functional component we either need to pass state down from a higher component as a prop or use hooks. In this case we will be using a hook in particular the ‘useState’ hook.

To make use of the use state hook we must first import it from React. To do this we will add it to our react import statement in our component.

import React {useState} from 'react'

Next we will initalize a constant that will call on the useState function.

const ExampleScreen = () => {
   const [text, setText] = useState('')
 return (
    <View>
      <Text> Enter Text:</Text>
      <TextInput style={styles.input}/>
    </View>
  )
}

For those unfamilar with this let’s break it down a bit. The useState function takes in one arugement “the intial state value” and it returns a pair of values. In our case our intial stat is an empty string (‘’), our useState fuction is returning the values ‘text’ and ‘setText’.

The first value, ‘text’, will translate to the value in state if we were writing this as a class component in this case it would look like:

state = {
  text: ''
}

The second value, ‘setText’, works similar to the setState function in a class component. In our example it would read:

this.setState({
  text: "someNewText"
})

With that we have set up a state to pari with our input within our component.

If we wanted to display our current state on screen we could simply add a new Text element to our component and pass it the text state using JSX.

const ExampleScreen = () => {
   const [text, setText] = useState('')
 return (
    <View>
      <Text> Enter Text:</Text>
      <TextInput style={styles.input}/>
      <Text> Text: {text}</Text>
    </View>
  )
}

For now it should simply look like this:

Now that we have initalized state we can make use of the value attribute, and the onChangeText event with a callback:

const ExampleScreen = () => {
   const [text, setText] = useState('')
 return (
    <View>
      <Text> Enter Text:</Text>
      <TextInput 
        style={styles.input}
        value={text}
        onChangeText={(newValue)=> setText(newValue)}
      />
      <Text> Text: {text}</Text>
    </View>
  )
}

Note: We could also create a new function serve as our handler but since we are simply updating one input we can pass our setText within our onChangeText event. With this we have created a controlled input and now when we type new values into our input we will see something like:

Hello!

Now that we have controlled our input we can now add a few other quality of life attributes that we are familar with in most mobile apps.

Other Attributes

React Native also provides us with a few other attributes we can use in TextInputs. In this section I will brefily go over a few of them and their defaults. To learn more about them and what other options they have head on over to the React Native docs on TextInput.

autoCapitalize —This attribute allows us to decide whether or not we want to automatically captalize any of the values in our TextInputs. The default setting is ‘sentences’ which automatically captializes the first letter of each sentence. Some other setings are ‘none’, ‘words’, and ‘characters’

autoCorrect — This attribute is a boolean and it will enable or disable the autoCorrect feature for text. The default is set to ‘true’.

autoCompleteType — This attribute offers various options for autofill. A few of the options you can set it to are ‘username’, ‘password’, ‘email’, or ‘off’.

placeholder — this attribute shows a string of your choosing in your input before a user makes any changes.

Conclusion

These are just some of the basics on how you can add inputs to your react native projects! Good Luck, stay safe, and happy coding!