Hands-On Design Patterns with React Native

Touchable opacity

When a button needs a custom look, it quickly seems like you need a better alternative. This is where TouchableOpacity comes into play. It serves every purpose when inner content needs to become touchable. Hence, we will make our own button and style it as we like:

class LikeCounter extends React.Component {    state = {        likeCount: 0    }    like = () => this.setState({likeCount: this.state.likeCount + 1})    unlike = () => this.setState({likeCount: this.state.likeCount - 1})    render = () => (        <View style={styles.container}>            <TouchableOpacity                style={styles.button}                onPress={this.unlike}            >                <Text>Unlike</Text>            </TouchableOpacity>            <Text style={styles.text}>{this.state.likeCount}</Text>            <TouchableOpacity                style={styles.button}                onPress={this ...