IMG-LOGO

How to create a custom button using TouchableOpacity in React Native?

andy - 10 Nov, 2017 29545 Views 4 Comment

In this tutorial, you will learn how to create a custom button using TouchableOpacity in React Native. I will also show you how to create the custom property types and style the button.

To get started with this tutorial, let's create a new simple project called CustomButtonProject. I assume you have already installed Node.JS on your computer or laptop. The sample below is done in Windows environment.

Step 1 - Create a project named CustomButtonProject using Node.JS

Open your Node.JS command Prompt in Windows. It will open a command prompt like below. Note: I will create a folder called ReactNativeTutorial for better organising our tutorial lesson. You can run the following command to create the following folder.

mkdir ReactNativeTutorial

Once the folder has already been created, navigate to this folder by running the following command.

cd ReactNativeTutorial

Once you are in the ReactNativeTutorial folder, you can run the following npm command to install the react native app.

npm install -g create-react-native-app

After the above process is completed, you will then run the following command to create your react native project.

create-react-native-app CustomButtonProject

Your project will have the following project structure.

The next step is to start the React Native development server. What you need to do is to navigate to CustomButtonProject folder and run the following command.

npm start

Once it is run, your development server will be ready and you will need to install a client app called Expo.

Step 2 - Setup client app named Expo

To see the project run directly on your phone, you will need to install a client app called Expo. You can search this app in IOS store and Android Play store. Once the app has already been installed, scan the QR code from the Node.JS terminal to view your project. The good thing about using this app is every time a change has been made in your project, this app will automatically reload the changes you have saved. Your project scanned will appear in your project list on the client app.

Step 3 - Create a custombutton.js file

Before we create the js file, it would be good if we can create a folder named Components. Note: you can name it anything, we just try to be more organized in configuring our project folder structure. Once this folder has been created. Then you can create a custombutton.js file.

The custombutton.js file wiil have the following code.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

class customButton extends Component {
	render() {
		const { text, onPress} = this.props;
		return (
		  <TouchableOpacity style={styles.buttonStyle}
			onPress={() => onPress()}
		  >
			 <Text style={styles.textStyle}>{text}</Text>
		  </TouchableOpacity>
		);
	}
}

customButton.propTypes = {
  text: PropTypes.string.isRequired,
  onPress: PropTypes.func.isRequired
};

const styles = StyleSheet.create({
  textStyle: {
    fontSize:20,
	color: '#ffffff',
	textAlign: 'center'
  },
  
  buttonStyle: {
	padding:10,
	backgroundColor: '#202646',
	borderRadius:5
  }
});

export default customButton;

Let me explain part of the code. Let's start with the import section.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

If you see in the import namespace, I have included a PropTypes namespace. This library will be used to declare what types of properties the CustomButton will have. If you see the following code, you will notice that in order to use the CustomButton object, you will need to have text and onPress method click function to be included otherwise you will get a warning on your app. I have set both of those properties to be required.

customButton.propTypes = {
  text: PropTypes.string.isRequired,
  onPress: PropTypes.func.isRequired
};

How about if I do not want to set both of them required? How could I do that? Well it is quite easy, You just simply remove the extra word isRequired like below.

customButton.propTypes = {
  text: PropTypes.string,
  onPress: PropTypes.func
};

Here is the full code of App.js file.

import React from 'react';
import { View, StyleSheet} from 'react-native';
import CustomButton from './components/custombutton';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
       <CustomButton 
		text="Click Me"
		onPress={() => {
			alert("Hi there!!!");
		}}
		/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

What you need to do is to import the reusable component of CustomButton by specifying the folder path of your component.

import CustomButton from './components/custombutton';

This is how you will use it. You will notice that I pass two properties which are the text property and the onPress function.

<CustomButton 
	text="Click Me"
	onPress={() => {
		alert("Hi there!!!");
	}}
/>

This is how your app would look like and it will alert a popup box when you click the button.

If you forget to pass the one of the property, as they are required, you will get a warning message like below. For example, if I only include the following code, I will get the warning that I forgot to include the onPress function.

<CustomButton 
	text="Click Me"
/>

If you have any question regarding with this simple tutorial, feel free to post your comment below.

Comments

flipdiving
13 Nov, 2017
The information you share is very useful. It is closely related to my work and has helped me grow. Thank you!
Manuel
20 Apr, 2018
Thanks!! it was very useful for me
Lincoln
15 Jan, 2019
thank you very much for this!
aparna
24 May, 2019
to change the color of that button on clicking
Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.

Related Articles

Expo could not connect to development server

If you get the following error message strong Could not load exp ipaddress strong on your Expo App in Android and IOS phone when you try to scan the QR Code you can try the following solution This problem occurs ...