import React from 'react'; import { Text, View, StyleSheet, TouchableHighlight, Dimensions, } from 'react-native'; const { width: WIDTH } = Dimensions.get('window'); export default function Button(props) { return ( <View> <TouchableHighlight underlayColor={props.orange ? '#ffc56b' : '#c9c9c9'} activeOpacity={1} onPress={props.function} style={[ props.special ? styles.specialButton : styles.button, { backgroundColor: props.backgroundColor, justifyContent: 'center', }, ]} > <View> {props.children ? ( props.children ) : ( <Text style={[ props.special ? styles.specialText : styles.text, { color: props.color }, ]} > {props.text} </Text> )} </View> </TouchableHighlight> </View> ); } const styles = StyleSheet.create({ button: { width: 76, height: 76, borderRadius: 38, }, specialButton: { width: (WIDTH - 4 * 76) / 5 + 2 * 76, height: 76, borderRadius: 38, }, specialText: { paddingLeft: 27, fontSize: 32, }, text: { textAlign: 'center', fontSize: 32, }, });