I want to change the color of buttons on event of onPress. Here, I give the code what I can change in it to toggle the color. Such as, I click on first it turns red and other white and vice versa.

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>
    </>
  );
}

Style Sheet

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,
  },
})

Button comp

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>
};