Change button style on press in React Native

When you need to modify the button's appearance when pressed in React Native, several common methods are available. Below, I will explain two common approaches with an example to demonstrate how to achieve this effect.

Method 1: Using the TouchableHighlight Component

TouchableHighlight is a component in React Native that dynamically adjusts the visual appearance of its child elements upon user interaction. You can specify the background color when pressed using the underlayColor property.

Example Code:

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

const App = () => {
  return (
    <TouchableHighlight
      style={styles.button}
      underlayColor="#DDDDDD" // Pressed background color
      onPress={() => console.log('Button pressed')}
    >
      <Text style={styles.text}>Click me</Text>
    </TouchableHighlight>
  );
};

const styles = StyleSheet.create({
  button: {
    padding: 10,
    backgroundColor: '#007AFF',
    alignItems: 'center',
  },
  text: {
    color: 'white',
  },
});

export default App;

Method 2: Using the TouchableOpacity Component

TouchableOpacity enables you to adjust the button's transparency when pressed, providing immediate visual feedback to users. By setting the activeOpacity property, you can define the transparency level during the press state.

Example Code:

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

const App = () => {
  return (
    <TouchableOpacity
      style={styles.button}
      activeOpacity={0.5} // Pressed transparency
      onPress={() => console.log('Button pressed')}
    >
      <Text style={styles.text}>Click me</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    padding: 10,
    backgroundColor: '#007AFF',
    alignItems: 'center',
  },
  text: {
    color: 'white',
  },
});

export default App;

Conclusion

Both methods are effective for altering the button's appearance when pressed in React Native. The choice depends on the desired visual effect (color change or transparency adjustment). Select the most suitable option based on your specific requirements and design goals.