Mastering React Native TouchableOpacity: Changing Color OnPress

React Native is a fantastic tool for developers to build powerful mobile applications. One of the most engaging aspects of mobile apps is their interactivity, and React Native provides the essential components to make this possible. In this blog post, we will dive into the React Native TouchableOpacity component and learn how to change its color when pressed. By the end of this guide, you will have a solid understanding of the onPress event and how to create dynamic, interactive buttons for your React Native app.

Understanding TouchableOpacity

TouchableOpacity is a built-in React Native component that provides touch feedback to the user. It is an essential element when it comes to creating interactive buttons, and it works by decreasing the opacity of a wrapped view when touched. The opacity level is customizable, allowing you to create a more seamless and responsive user experience.

Implementing TouchableOpacity

First, let’s create a simple example of TouchableOpacity. To do this, we will create a new React Native project, import the necessary components, and wrap our view inside TouchableOpacity. Here is an example of how you might create a basic TouchableOpacity button:

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

export default function App() {
  return (
    
       console.log('Button pressed!')}>
        Press me!
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  button: {
    backgroundColor: '#841584',
    padding: 10,
    borderRadius: 5,
  },
  buttonText: {
    fontSize: 20,
    color: '#FFF',
  },
});

This code demonstrates the basics of implementing TouchableOpacity. When the button is pressed, the console will log a message. However, our goal is to change the color of the button onPress. Let’s move on to the next step.

Changing Button Color onPress

To change the button color onPress, we need to maintain the button’s current color state and update it when the button is pressed. We can achieve this by using React’s useState hook.

Import the useState hook from React

Initialize the button color state inside the App component

Update the button’s backgroundColor in the StyleSheet to use the buttonColor state

button: {
  backgroundColor: buttonColor,
  padding: 10,
  borderRadius: 5,
},

Update the onPress event to change the button color

 {
    setButtonColor('#2E8B57');
    console.log('Button pressed!');
  }}
>

Now, when the button is pressed, its color will change from purple to green. However, we still have a problem: the button color doesn’t change back when the onPress event is complete. To achieve this, we can use the onPressIn and onPressOut events.

Using onPressIn and onPressOut Events

The onPressIn event is triggered when the user starts pressing the button, while the onPressOut event is triggered when the user releases the button. By using these events, we can create a more dynamic color change for our button.

Update the TouchableOpacity component to use onPressIn and onPressOut events

 {
    setButtonColor('#2E8B57');
    console.log('Button pressed in!');
  }}
  onPressOut={() => {
    setButtonColor('#841584');
    console.log('Button pressed out!');
  }}
>
  Press me!

Now, when the user presses the button, its color will change to green, and when the user releases it, the color will change back to purple. This creates a more interactive experience for the user.

Creating a Customizable Button Component

To make our button more reusable, we can create a separate Button component that takes the initial color, pressed color, and button text as props. Here’s how you can create a customizable Button component:

Create a new file called CustomButton.js and import the necessary components

import React, { useState } from 'react';
import { StyleSheet, Text, TouchableOpacity } from 'react-native';

Create a new function component called CustomButton

const CustomButton = ({ initialColor, pressedColor, buttonText }) => {
  const [buttonColor, setButtonColor] = useState(initialColor);

  return (
     {
        setButtonColor(pressedColor);
      }}
      onPressOut={() => {
        setButtonColor(initialColor);
      }}
    >
      {buttonText}
    
  );
};

Define the component styles

const styles = StyleSheet.create({
  button: {
    padding: 10,
    borderRadius: 5,
  },
  buttonText: {
    fontSize: 20,
    color: '#FFF',
  },
});

Export the CustomButton component

Now, you can import the CustomButton component into your main App.js file and use it with custom initial and pressed colors:

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

export default function App() {
  return (
    
      
    
  );
}

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

Conclusion

In this blog post, we explored the React Native TouchableOpacity component and learned how to change its color onPress. We covered the basics of implementing TouchableOpacity, using the onPressIn and onPressOut events, and creating a customizable Button component. With this knowledge, you can create more interactive and dynamic buttons for your React Native applications, enhancing the user experience and making your app more engaging.