I want to change the border colour of TouchableOpacity when onPress

Question

I create a touchable opacity and give it a border style. So i want that when i touch a particular Touchable border it changes its border colour. How can i do that. Thanks

this is the deafult border style

and this is what i want after pressing

Answer 1

You can create a component that takes in a prop, let's say isSelected and based on this you can show the color of the border.

So, your conditional styles would look something like this -

const containerStyles = {
  borderWidth: 1,
  borderColor: isSelected ? 'dodgerblue' : 'grey',
};

Now, the usage is simple, you just pass a boolean value while calling is component as shown below

<VehicleButton />
<VehicleButton isSelected={true} />
<VehicleButton />

Here's a Snack that has the implementation.