TextInput, Button and Events

Now we have better understanding on Stylesheet and its flex box layout design. Now we will create a react native app with some dynamic content change.

As usual create a new react native app

$ react-native init MyFormProject and open the folder in Visual Studio code (close the metro server instance if it is running already)

Clear the App.js and write

import React, {Component} from 'react';
import {View,TextInput,Button,Text} from 'react-native';

export default class App extends Component{
  constructor(props){
    super(props);
    this.state = {btnValue:'Hello',textValue:''};
  }

  onTextValueChange = (text) => this.setState({textValue:text});

  onBtnPressed = () => this.setState({btnValue:'Button Pressed'})

  render(){
    return <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
      <TextInput placeholder="Enter something here" value={this.state.textValue} 
      style={{width:200,height:40,borderWidth:1,borderColor:'green',borderRadius:4,margin:5}}
      onChangeText={this.onTextValueChange}
      />
      <Text style={{margin:5}}>{this.state.textValue}</Text>
      <Button style={{margin:5}} title="Press it" onPress={this.onBtnPressed}/>
      <Text style={{margin:5}}>{this.state.btnValue}</Text>
    </View>
  }
}

$ react-native run-android

We get below output

If you notice, the ReactNative component Button has rendered native (material design) button in android emulator. Running same in iOS, we can see the native iOS UIButton look a like.

TextInput

In this example, we set the TextInput value from this.state object. this.state has a property called textValue. Right now it is set empty.

onChangeText

TextInput has an attribute onChangeText. its value has been set as this.onTextValueChange

this.onTextValueChange is a JavaScript function reference.

onTextValueChange = (text) => this.setState({textValue:text});

The same could have been written in ES5 spec

onTextValueChange(text){
    this.setState({textValue:text});
}

But i am going to stick ES6 format when declaring functions here after. in both cases, the state property textValue would be changed using this.setState function. Whenever user starts typing a text on TextInput, It will call onTextValueChange function and update the state property textValue. This will force the re-rendering of the view block where this.state.textValue is used.

If we slowly starts typing on the TextInput field, we get

We notice, the Text below TextInput dynamically updates as we start typing on TextInput. this is because the Text displays this.state.textValue property. It is due to this.setState function is being called every time when text value changes on TextInput. (through onChangeText)

To set the value to TextInput, we will value attribute with

value={this.state.textValue}

Button

Similarly we have given the function reference this.onBtnPressed to onPress attribute of Button, Tapping on Button, gives us

We could have also declared the function within onPress in this way as well

....
<Text style={{margin:5}}>{() => this.setState({btnValue:'Button Pressed'})}</Text>
....

this.state

The initial value of this.state has been set in constructor. And it gets modified by this.setState function.

React native’s this.state object keeps track of changes, When this object is displayed in render function, During the execution, if somewhere its value modified by a function or a code block, the render function gets refreshed and display the changes immediately.

Download source code

Leave a Reply

Your email address will not be published. Required fields are marked *