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