Touch Feedback with the new Pressable Component in React Native
React Native added a new component called “Pressable” which basically is an alternative for the TouchableOpacity/TouchableHighlight.
Just a heads up the example codes use tailwind-like styles.
Because Styling with Tailwind is Great 🎉!
You can check out the package I use for react-native here.
Okay then…. Let’s have a cup of milk and dive into the know-how …
At the End of this blog, you would be seeing and as well know how to get different Touch Feedbacks as below !!
For starters, let's go through some basic understanding !!
So what exactly is a Pressable Component?
Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children.
That means you can tweak the style of your underlying component or the Wrapping component based on the variable Pressable Component provides.
<Pressable>
{({ pressed }) => (
<Text>
{pressed ? 'Pressed!' : 'Press Me'}
</Text>
)}
</Pressable>or
<Pressable
style={({ pressed }) => [
{
backgroundColor: pressed
? 'rgb(210, 230, 255)'
: 'white'
},
styles.otherStyles
]}>
</Pressable>The first way of using Pressable can be used when you need to change the underlying component. If you just need to work on tweaking the style values of the wrapper component the latter will be helpful.
Now, I will take you into a series of steps where you would know the different ways of giving Touch Feedback using the above component.
Let's start with a simple one.
Pressable with a simple opacity feedback
The code for this is pretty much simple.
And visually it will look something like this :
Pressable with Background Color
And the above code will work something like this.
- Lighter Background Color feedback
2. Darker Background Color feedback
Basically, the feedback depends on your background and you can choose how do you want to change it when the component is pressed.
So now the last and the interesting one, my favorite one !!
“The Cool Rounded Border Feedback.”
So to get this we need to play mainly with the wrapper style.
In general, the container would have a horizontal margin of 16 and vertical padding of 16.
Now, this style will change when the component is pressed.
I would change the horizontal margin of 16 to 8 and give horizontal padding of 8. Add a background color and a border-radius value.
And bam !! 💥
You got it !!
So let's put it all together and see how the Touch Feedbacks work,
Well, that’s it for the Touch Feedbacks.
If you want to give an even better feedback like animating the component, check out another blog where I have added a simple Scale Animation on Tapping a Component.
