Handling Inputs in React Native

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

Kenny Marks
Apr 26 · 6 min read
Image for post
Image for post

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

<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:

Image for post
Image for post
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

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:

Image for post
Image for post

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

Input State Management

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:

Image for post
Image for post

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:

Image for post
Image for post
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

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

The Startup

Medium's largest active publication, followed by +734K people. Follow to join our community.

Kenny Marks

Written by

A full stack developer with an interest in Cybersecurity, International Relations, and Gaming.

The Startup

Medium's largest active publication, followed by +734K people. Follow to join our community.

Kenny Marks

Written by

A full stack developer with an interest in Cybersecurity, International Relations, and Gaming.

The Startup

Medium's largest active publication, followed by +734K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store