如何在 OnPress 上更改此圆形按钮的边框颜色？

Question

If I press on any of these Button it's border color should change and rest of should have no color. Every time i press diffrent button only its border color should change and all other buttons should have no color. Here is a Image of what I want:-

<View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-evenly',
          }}>
          <TouchableOpacity style={styles.Circlebtn}>
            <Icon.MaterialCommunityIcons name="calendar-today" size={24} />
            <Text>Day to day</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.Circlebtn}>
            <Icon.MaterialCommunityIcons name="alarm-light" size={24} />
            <Text>Emergency</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.mainview}>
          <TouchableOpacity style={styles.Circlebtn}>
            <Icon.MaterialCommunityIcons name="hammer-wrench" size={24} />
            <Text>Planned Works</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.Circlebtn}>
            <Icon.Foundation name="clipboard-pencil" size={24} />
            <Text>Survey</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.mainview}>
          <TouchableOpacity style={styles.Circlebtn}>
            <Icon.FontAwesome name="users" size={24} />
            <Text>Meeting</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.Circlebtn}>
            <Icon.Entypo name="dots-three-horizontal" size={24} />
            <Text>Others</Text>
          </TouchableOpacity>
        </View>

Answer 1

You can add a variable to your state which holds your pressed button. Let's say

index = 0

After that, each button click, you can update the state. Let's say

const [index, setIndex] = useState(0);

<Button onClick={() => setIndex(1)} />
<AnotherButton onClick={() => setIndex(2)} />

If you check the style of each button according to this index variable, you can add your border to your button.

<Button style={{ borderColor: index === 1 ? 'green' : 'black' }} />
<AnotherButton style={{ borderColor: index === 2 ? 'green' : 'black' }} />

You can try these steps to put a border to your buttons. I hope it works well