How to Use TextInput Component to Change State in React Native?

Creating input field to change the state.

In this article, we are going to talk about how to add a text input field so the user can type in something into that input field. We can take that value and update our state with that value.

Complete React Native articles:

1. How to build a React Native app with Expo
2. How to Run the Expo React Native app on the emulator
3. Expo folder and file structure
4. Expo React Native View, Text and Style
5. Expo React Native — using React Hook useState()
6. How to Use TextInput Component to Change State in React Native?
7. How to Use Expo React Native List and ScrollView
8. How and why we use Flatlist in Expo React Native
9. What is TouchableOpacity in Expo React Native?

First, we need to use a component called “TextInput” , we need to import that at the top.

The input field is just a blank space. If we click into it we can see the cursor and the keyboard pop-up. So we need to add a style prop to this and set it equal to “styles.textinput”.

<TextInput style={styles.textinput}/>

Next we add the style at the bottom, this will be an object with different properties.

textinput:{

borderWidth:1,

borderColor:'black',

width:300,

height:50,

padding:10,

margin:10

},

Now we should see something that looks a bit more like a text input over here awesome, we type stuff in there now. We can also add a placeholder into this text input.

<TextInput

style={styles.textinput}

placeholder=”Enter the username”

/>

We can also detect whenever the value changes whenever a user types a new character inside this field, we then take the current value that is inside the field and update our state.

We add the “setUser” function to onChange, so it pass the current value to the function and update the state.

<TextInput

style={styles.textinput}

placeholder="Enter the username"

onChange={e=>setUser(e.target.value)}

/>

It should update in real time when we are typing inside the input field. We can do for the second piece of state which is fruit. We need to duplicate the input field twice and change the placeholder for name and price.

<TextInput

style={styles.textinput}

placeholder="Enter the username"

onChange={e=>setUser(e.target.value)}

/>

<TextInput

style={styles.textinput}

placeholder="Enter the fruit"

onChange = {e=>setFruit({...fruit,name:e.target.value})}

/>

<TextInput

style={styles.textinput}

placeholder="Enter the price"

onChange={e=>setFruit({...fruit,price:e.target.value})}

/>

Since the fruit is the object, so we need to use the spread operator to make a copy of that object, then update the value of that field.

We can type in the user, fruit name and fruit price to update the state. Now we can see the sentence is “Peter is eating apple, which cost $9”. Lastly, we can add the multi-line prop which allows us to add multiple different lines inside the text input.

The next prop is the keyboard type and we can set this equal to numeric. If we click on this, the keyboard that pops up should be numeric okay

<TextInput

style={styles.textinput}

multiline

placeholder="Enter the fruit"

onChange = {e=>setFruit({...fruit,name:e.target.value})}

/>

<TextInput

style={styles.textinput}

keyboardType="numeric"

placeholder="Enter the price"

onChange={e=>setFruit({...fruit,price:e.target.value})}

/>

Related course:

Get Free tutorials on Youtube:

Follow us:

https://twitter.com/ckmobilejavasc1