React Native: Techniques for Changing Button Styles on Press

Introduction

In mobile app development with React Native, enhancing user interaction through visual feedback is crucial. One common requirement is to change the style of a button when it is being pressed. This article explores two main methods to achieve this: using the TouchableHighlight component with state management and leveraging the newer Pressable component.

Using TouchableHighlight with State Management

The TouchableHighlight component is a traditional way to handle touch interactions in React Native. To change the style on press, we can use React's state to track the press status and dynamically apply styles.

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

const Button = () => {
  const [isPressed, setIsPressed] = useState(false);

  const handlePressIn = () => setIsPressed(true);
  const handlePressOut = () => setIsPressed(false);

  return (
    <View style={styles.container}>
      <TouchableHighlight
        underlayColor="blue"
        style={isPressed ? styles.btnPressed : styles.btnNormal}
        onPressIn={handlePressIn}
        onPressOut={handlePressOut}
        onPress={() => console.log('Button pressed')}
      >
        <Text>Click here</Text>
      </TouchableHighlight>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  btnNormal: {
    borderColor: 'blue',
    borderWidth: 1,
    borderRadius: 10,
    height: 30,
    width: 100,
  },
  btnPressed: {
    borderColor: 'blue',
    borderWidth: 1,
    height: 30,
    width: 100,
  },
});

export default Button;

In this example, the isPressed state is toggled using onPressIn and onPressOut event handlers, and the style is conditionally applied based on this state, providing a straightforward way to manage visual feedback for button interactions.

Using the Pressable Component

Introduced in recent versions of React Native, the Pressable component offers a more flexible API for handling press interactions. It provides a pressed state directly in the style and children props.

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

const PressableButton = ({ text }) => {
  return (
    <Pressable
      style={({ pressed }) => [
        { backgroundColor: pressed ? 'black' : 'white' },
        styles.btn,
      ]}
    >
      {({ pressed }) => (
        <Text style={[{ color: pressed ? 'white' : 'black' }, styles.btnText]}>
          {text}
        </Text>
      )}
    </Pressable>
  );
};

const styles = StyleSheet.create({
  btn: {
    padding: 10,
    borderRadius: 5,
  },
  btnText: {
    fontSize: 16,
  },
});

export default PressableButton;

The Pressable component allows for dynamic styling based on the pressed parameter, making the code more concise and readable, especially suitable for complex interactions or performance optimizations.

Comparison and Best Practices

While TouchableHighlight is well-established and suitable for simple cases, Pressable is recommended for new projects due to its enhanced flexibility and performance. However, for backward compatibility, TouchableHighlight remains a valid choice. Additionally, the underlayColor prop in TouchableHighlight can be used for quick color changes without state management, as mentioned in other answers.

Conclusion

Implementing button style changes on press in React Native can be achieved efficiently using either TouchableHighlight with state or the newer Pressable component. Developers should choose based on project requirements, with a preference for Pressable in modern applications for its cleaner API and better integration with React's functional components.