How to Make a Button in React Native

React Native has a Button component built in.

It's great. You get up and running quickly but it's limited in how you can customize it. This button will look like the default platform on iOS or Android.

Let's say you need need a button customize to your needs. You'll need two things (assuming the button is only rendering text):

  1. A Touchable component - this will make it tappable
  2. A Text component

There are three options when it comes to the touchable component

  1. TouchableOpacity
  2. TouchableHighlight
  3. TouchableWithNativeFeedback

Here are my rules on which to choose:

Does the button have a background color?

No: Use TouchableHighlight

Yes:

  • Is it Android? Use TouchableWithNativeFeedback
  • Is it iOS? Use TouchableOpacity

Note: You can use the Platform API to determine which platform you're currently running on.

import React from "react"
import {
  TouchableOpacity,
  TouchableWithNativeFeedback,
  Platform,
  Text,
} from "react-native"

const Button = ({ text, onPress }) => {
  const Touchable =
    Platform.os === "ios" ? TouchableOpacity : TouchableWithNativeFeedback

  return (
    <Touchable
      onPress={onPress}
      style={{
        backgroundColor: "blue",
        paddingHorizontal: 10,
        paddingVertical: 5,
      }}
    >
      <Text style={{ textColor: "white" }}>{text}</Text>
    </Touchable>
  )
}

export default Button
React Native by Example Logo

React Native by Example

Become an expert with React Native by building 10 completely unique apps. Nothing beats learning by doing.