Timeless

An inside look into how we approach design, development and user experience at timeless.co

Follow publication

Touch Feedback with the new Pressable Component in React Native

Karthik Balasubramanian
Timeless
Published in
4 min readMay 25, 2021

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 …

3D Render by Udhaya Chandran

At the End of this blog, you would be seeing and as well know how to get different Touch Feedbacks as below !!

Final Set of Touch Feedbacks

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.

  1. 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.

This is Karthik representing Timeless.

If you find this blog post helpful, do tell me in the comments would love to read some. Thank you :)

If you find any difficulties please feel free to add your comments.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Timeless
Timeless

Published in Timeless

An inside look into how we approach design, development and user experience at timeless.co

Karthik Balasubramanian
Karthik Balasubramanian

Written by Karthik Balasubramanian

Trying to solve problems with code @timeless.co

No responses yet

Write a response