Sign in Go Pro

Build a React Native Application

Reacting to Input Events with React Native Controlled Components

This lesson is for PRO members.

Upgrade today to get access to all the PRO lessons.

Unlock this lesson

Up next



Once a user enters data (in a text box for example), we have to be able to read what they just wrote in order to use that input to do something.

To do this in our application, we'll use a concept called Controlled Components.

"Controlling" a component just means listening to every input change, and recording that in state. Then, directly setting the value of that component to the value in state. This is the most flexible way to control and manage user input.

Summary of Content:

  • Adding a TextInput to let users type in new todo items
  • "Controlling" that input using onChangeText and value
  • Using that input later; when the user presses a button
  • Various ways controlled components can make input processing flexible and powerful




Hi, for those who face any issue(like insertion of '-' and '()' character when pressing back button and text count comes again to 8 and 3 respectively) example format is (111)111-111.
I made a solution for this case, please suggest the better way if there is any.


Change the state to this:

state = {
text: '',
validateCount: -1

Some modification in setText() function:

if (text.length==0) {
this.setState({validateCount: -1})

if(this.state.validateCount < 1 && text.length === 3){
this.setState({validateCount: (this.state.validateCount+1)})
text = (${text})

if (this.state.validateCount < 1 && text.length === 8) {
this.setState({validateCount: (this.state.validateCount+1)})
text = ${text}-
this.setState({ text })

You need to go PRO to post comments.

Lessons in Build a React Native Application