Using Buttons in React Native

The difference between a Button and Touchable Opacity

There are two types of button elements commonly used in React Native, the Touchable Opacity wrapper and the Button element. In this article I will brefly go over these two types of buttons and how to add them to a react native applicaiton.

The Button Element

According to the React Native docs the button element is:

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

Because of its simplicity the button element is best used when you need a standard button with text. It comes out of the box with some styling so you do not need to do too much to it. You can change the size of it or color, but beyond that it is ready to go once you add it to your app.

The TouchableOpacity Wrapper

The React Native docs define the Touchable Opacity wrapper as:

A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it.

The TouchableOpacity wrapper provides a touch effect on any element wrapped within it. For example this could be a Text or an Image. Out of the box it does not come with styling wich allows for a lot more customization in how you may want this button to look.

Prior to the creation of the button element for react Native the only option was to use the TouchableOpacity wrapper. Due to TouchableOpacity’s lack of styling the Button element was created as a way to add a text button with out a lot of styling invovled.

Using a Button Element

To use the Button element the first thing to do is add it to your react native import:

 import {View, Text, Stylesheet, Button} from 'react-native

After importing the Button element you can then add it to your component. Unlike a button in HTML this is a self closing tag. To render the Button in your app you also need to add a title prop other wise your app will error out.

import React from 'react'
import { View, Text, StyleSheet, Button } from 'react-native'
const TestScreen = () => {
  return (
    <View>
      <Button 
        title="Button Test"
      />
    </View>
  )
}
const styles = StyleSheet.create({
})
export default TestScreen

The value of the title prop must be a string. You can also use JSX as well so long as the value of that JSX points to a string.

Once you render the button you should see something like this on an IOS device:

Or this if you are using an Andorid device:

Now that we have a button displaying we can add an event and a handler too it. In this case we are simply going to console log “button pressed” rather than trigger some other event.

const TestScreen= () => {
  return (
    <View>
      <Button 
        onPress={() => console.log("button pressed")} 
        title="Button Test"
      />
    </View>
  )
}

Now when we test our button we will see this in our terminal (if you have never used a console log in React Native it shows up in the terminal window, this is because a react native appliation does not have a console like a browser does):

Using the Tocuhable Opacity Wrapper

The TouchableOpacity wrapper will funciton similarly to the Button element, but it is written differently. As with all React Native elements it must first be imported:

import {View, Text, StyleSheet, TouchableOpacity} from 'react-native'

Now unlike the Button element we need to add an opening and closing tag. Also rather than a title prop to display text within our new “button” we can use the Text element:

import React from 'react'
import { View, Text, StyleSheet,  TouchableOpacity } from 'react-native'
const TestScreen = () => {
  return (
    <View>
      <TouchableOpacity>
        <Text>TouchableOpacityTest</Text>
      </TouchableOpacity>
    </View>
  )
}
const styles = StyleSheet.create({
})
export default TestScreen

TouchableOpacity also allows us to use an image within its wrapper to use as a button.

Now when our “button” renders it will look something like this on both Android and IOS:

As can be shown our “button” right now looks like standard string of text. However if we click on it:

Touchable Opacity comes built in with the ability to press on a “button” and see the opacity change on the “button”. However, this is not the same as the onPress event and a handler to preform some action on that event. To add that we will add an on press to our TouchableOpacity opening tag:

const TestScreen = () => {
  return (
    <View>
      <TouchableOpacity
        onPress={() => console.log("touchable opacity pressed")}
      >
        <Text>TouchableOpacityTest</Text>
      </TouchableOpacity>
    </View>
  )
}

Now when we press the text we can see that we get a console log:

However right now this does not look like much of a “button”. To fix this we can add some basic styling. To do that we will create a button, and text style within the styles constant:

const styles = StyleSheet.create({
  button: {
    alignItems: "center",
    backgroundColor: "blue",
    padding: 10
  },
  text: {
    color: "white"
  }
})

Now that we have created some basic styling objects we can add them to our “button”:

const TestScreen = () => {
  return (
    <View>
      <TouchableOpacity 
        style={styles.button}
        onPress={() => console.log("touchable opacity pressed")}
      >
        <Text style={styles.text}>TouchableOpacityTest</Text>
     </TouchableOpacity>
    </View>
  )
}

Once that is saved the “button” should now look like this:

While not exact it now looks closer to the “button” we saw on an Android device.

Conclsion

With that we have covered the two different types of buttons that can be used in React Native. If your goal is to simply render a string of text then a Button element is an easy choice to go with, however, if you plan on creating a heavily stylized button it may be a good idea to think about using the TouchableOpacity wrapper. Happy Coding!