Change button style on press in React Native

Question

I'd like the style of a button in my app to change when it is being pressed. What is the best way to do this?

Answer 1

Use TouchableHighlight.

Here an example:

import React from 'react'; import { TouchableHighlight, View, Text, StyleSheet } from 'react-native';  export default function Button() {    var [ isPress, setIsPress ] = React.useState(false);    var touchProps = {     activeOpacity: 1,     underlayColor: 'blue',                               // <-- "backgroundColor" will be always overwritten by "underlayColor"     style: isPress ? styles.btnPress : styles.btnNormal, // <-- but you can still apply other style changes     onHideUnderlay: () => setIsPress(false),     onShowUnderlay: () => setIsPress(true),     onPress: () => console.log('HELLO'),                 // <-- "onPress" is apparently required   };    return (     <View style={styles.container}>       <TouchableHighlight {...touchProps}>         <Text>Click here</Text>       </TouchableHighlight>     </View>   ); }  var styles = StyleSheet.create({   container: {     flex: 1,     justifyContent: 'center',     alignItems: 'center',   },   btnNormal: {     borderColor: 'blue',     borderWidth: 1,     borderRadius: 10,     height: 30,     width: 100,   },   btnPress: {     borderColor: 'blue',     borderWidth: 1,     height: 30,     width: 100,   } });