Creating a Customisable Button in React Native

React Native / Typescript

Photo by Lautaro Andreani on Unsplash

This article is to fill a gap — the other articles I have found on this subject all seemed to have something missing.

The standard button in React Native offers little in the way of customisation. The are many articles about customising using a TouchableOpacity component or Pressable component around a Text component and applying styles accordingly. However, I wanted to be able to define a preset style and override it in individual situations. This article seeks to address that problem.

This assumes you have an existing React Native project, and you have some knowledge of React and React Native.

Firstly, I am going to create a file for the new component. How you structure your project will be down to personal preference and it will no doubt change as the project grows. I have created a file called Styled.tsx

At the top of the file, I am going to import some components

import React from "react"
import { Text, Pressable, StyleSheet } from "react-native"

Next, I am going to create an interface for the props. In this case we want to be able to send in the text for the button, a function for when the button is clicked and some style references to override the defaults.