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.like}
            >
                <Text>Like</Text>
 </TouchableOpacity>
        </View>
    );
}

Some example styles follow. We will dig further into styles in Chapter 3, Styling Patterns:

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        paddingTop: 20,
        paddingLeft: 20
    },
    button: {
        alignItems: 'center', // horizontally centered
 justifyContent: 'center', // vertically centered
 backgroundColor: '#DDDDDD',
 padding: 20
 },
    text: {
        fontSize: 45
    }
});

The button's contents are centered vertically and horizontally. We have a custom gray background color and padding inside of the button. Padding is the space from the children to the border of the component.

Now that we know about these simple components, we are ready to proceed further and explore how forms are built and how to handle more complicated use cases.