React Native:Tutorial #4 – React Native UI Components

Pavan

5 years ago

In this blog post, we will learn few commonly used React Native UI Components. We can use different types of UI elements in a react-native project. But remember that it may look different in an android and iPhone. We will learn how text inputs, touchables and picker with different examples.

If you have not read previous articles in this series, we request you to do so-

Tutorial Index

Text Inputs:

TextInput component is used to get user text inputs. Following are the props that can be used with text inputs : placeholder : This is the placeholder text i.e.Â the text that will be shown in an empty TextInput. value : Value to put in the TextInput onChangeText : It takes one function and that will be called on each text change . onSubmitEditing : It takes one function and that will be called once text is submitted.

Letâs take a look at the below example :

import React, { Component } from 'react';
import { Text, View, Button,TextInput } from 'react-native';
export default class MainComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }
  render() {
    return (
       xView style={{paddingTop: 100, paddingLeft : 100}}x
        xTextInput
          style={{height: 40}}
          placeholder="Enter a text"
          onChangeText={(text) =x this.setState({text})}
          value={this.state.text}
        /x
        xText style={{padding: 10, fontSize: 42}}x
          {this.state.text}
        x/Textx
      x/Viewx
    );
  }
}

If you type any text in the TextInput, it will show the same text below in a Text. âplaceholderâ props is used to put the placeholder. This is removed once user starts to type. The onChangeText props takes one function and it change the value of âtextâ in the current âstateâ. âvalueâ props is used to put the text in the TextInput. We are not directly changing the âvalueâ of the âTextInputâ. It changes the value of âtextâ in the âstateâ and that âtextâ is assigned as the value. The bottom âTextâ is used to put the same text that the user is typing.

TextInput has a lot of other props for customization. You can check this official guide to learn more about it.

Touch Handling:

All mobile applications are handled mainly using finger touch. These touch gestures can be of different types like tap, swipe, pinch etc. React native provides one gesture responder system to handle different gestures. Almost all react native component can detect user finger tap, but one component that is only for deal with touch event is called âTouchablesâ. Using this component, we can create our own custom buttons with different design. It also provides two different props to detect single press and long press events. Following are the types of feedbacks it can provide :

TouchableHighlight :

This can be used with a button or web-link. The view will be darkened when the user presses down the element.

TouchableNativeFeedback :

This will show ripple effect on Android. TouchableNativeFeedback is not supported on iOS.

TouchableOpacity :

This will reduce the opacity of the button when user presses down.

TouchableWithoutFeedback :

Use it if you donât want to show any feedback to the user on tap.

Apart from these types, we can use âonPressâ and âonLongPressâ props to detect single press and long press. Both of these props takes one âfunctionâ.

import React, { Component } from 'react';
import { Text, View, Button,TextInput,TouchableHighlight, StyleSheet } from 'react-native';
export default class MainComponent extends Component {
  onButtonPressed() {
    alert('Button pressed!')
  }
  onButtonLongPressed() {
    alert('Button Long pressed!')
  }
  render() {
    return (
       xView style={{paddingTop: 100, alignItems: 'center'}}x
        xTouchableHighlight onPress={this.onButtonPressed} onLongPress={this.onButtonLongPressed}x
          xView style={styles.button}x
            xText style={styles.buttonText}xTouch itx/Textx
          x/Viewx
        x/TouchableHighlightx
      x/Viewx
    );
  }

}
const styles = StyleSheet.create({
  button: {
    width: 260,
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'blue',
    borderRadius: 5
  },
  buttonText: {
    color : "white"
  }
});

As you can see here, we are using âonPressâ and âonLongPressâ props to detect single press and long press in the TouchableHighlight component.

Picker:

Picker is used to ask user to pick from a list of values. Picker component is available in both Android and iOS. The functionality is same in both Android and iOS but the look is different. Actually it uses the native Android and iOS pickers and both looks different. It shows the selected value and once we click on it, it shows a list of available values in a popup in android. In iOS, it shows one scrollable wheel with all the options available. We can import the Picker component from âreact-nativeâ as like other components. For example :

import React, { Component } from 'react';
import { View, Text, Picker, StyleSheet } from 'react-native'
class MainComponent extends Component {
   state = {day: ''}
   changePickerValue = (d) =x {
      this.setState({ day: d })
      alert(`selected ${d}`)
   }
   render() {
      return (
         xView style={{paddingTop: 100}}x
            xPicker selectedValue = {this.state.day} onValueChange={(value, index) =x
    this.changePickerValue(value)
  }x
               xPicker.Item label = "Sun" value = "Sun" /x
               xPicker.Item label = "Mon" value = "Mon" /x
               xPicker.Item label = "Tues" value = "Tues" /x
               xPicker.Item label = "Wed" value = "Wed" /x
               xPicker.Item label = "Thurs" value = "Thurs" /x
               xPicker.Item label = "Fri" value = "Fri" /x
               xPicker.Item label = "Sat" value = "Sat" /x
            x/Pickerx
         x/Viewx
      )
   }
}
export default MainComponent

If you run this code, it will look like as below on an Android phone :

We need to add a list of items as âPicker.Itemâ inside the âPickerâ component that will be shown in the picker list. Picker has a lot of different props. Few of them are as below :

1. onValueChange :

It gives one callback when one item is selected from the picker. It gives the value of the selected item and the index of that item. Index is important, we can pick from a different mapping list using the index if required.

2. selectedValue :

Selected value that should be matched with one of the list of picker item values.

3. enabled :

It will disable the picker if we set the value to âfalseâ.

4. mode :

This option is available only for Android. It can be either âdialogâ or âdropdownâ. âdialogâ shows a modal dialog, this is the default option. âdropdownâ shows a dropdown view.

5. style and itemstyle :

style should be of type âpickerStyleTypeâ. It is used to add one âstyleâ to the âpickerâ. âitemStyleâ is used to apply style to each of the item labels.

Conclusion

So far we have seen most commonly used React Native UI Components that are required by most apps. Please let us know your views, questions about the same.