Quiero cambiar el color de los botones en caso de onPress. Aquí, le doy al código lo que puedo cambiar para alternar el color. Por ejemplo, al hacer clic primero se vuelve rojo y otro blanco y viceversa.

 const Button = (props) => { let bgcolor = false; alert(props.id,'Hello'); return ( <> <TouchableOpacity onPress={() => { navigate(props.action); }} style={[styles.topleftcolor,{ flex: 1, backgroundColor: (props.id==1)?'red':'transparent', borderRadius: 0 }, (props.x === "left")?((props.y === "top")?styles.bordertopleft:styles.borderbottomleft):((props.y === "top")?styles.bordertopright:styles.borderbottomright)]}> <Icon name='hands' style={{ alignSelf: 'center', fontSize: 30, top: '50%' }} /> </TouchableOpacity> </> ); }

Hoja de estilo

 const styles = StyleSheet.create({ topleftcolor: { backgroundImage: 'linear-gradient(red, white)', }, bordertopright: { borderTopRightRadius: 200, }, bordertopleft: { borderTopLeftRadius: 200, }, borderbottomright: { paddingBottom: 30, paddingRight: 15, borderBottomRightRadius: 200, }, borderbottomleft: { paddingBottom: 30, paddingLeft: 15, borderBottomLeftRadius: 200, }, })

Composición de botones

 const HomePage = () => { <View style={{ flex: 1, flexDirection: 'row' }}> {/* { state.map( btn => <Button key={btn.id} btn={btn} x={btn.x} y={btn.y} color={btn.color} action={btn.action} /> ) } */} <Button id={1} x={'left'} y={'top'} color={'red'} action='Friends' ></Button> <Button id={2} x={'right'} y={'top'} color={'green'} action='Coins' ></Button> </View> <View style={{ flex: 1, flexDirection: 'row' }}> <Button id={3} x={'left'} y={'bottom'} color={'lightblue'} action='Photos' /> <Button id={4} x={'right'} y={'bottom'} color={'blue'} action='Badges' /> </View> };