Pressable and useState

[00:00:00]
>> Let's move on to pressable. So pressable is a relatively new component. It was introduced in React Native 63. And it's a more versatile alternative to the touchable opacity such as a highlight. So, usually, people tend to use touchable opacity because it gives you some quick interaction feedback for free.

[00:00:20]
The problem with that is it's very distinctive. So you can almost tell which apps are built with React Native by the touchable opacity, because people use the default values. So you can either use touchable opacity but reduce the active opacity. Or actually what is recommended is that we all switch to using pressable.

[00:00:40]
So, in the future, I think the touchable components are going to be deprecated. So in my applications, I only use pressable. So pressable is very similar to touchable opacity. It has all the same events, but you can explicitly style the pressed and not pressed state. So the pressable component knows whether it's pressed or not so you can apply styles.

[00:01:03]
And I've added an example here. If you want it to have the same effect as touchable opacity but using pressable you can use this component. So I've called it presser area and basically what this does is you can use it this it applies the pressed state so when you are pressed, it applies the opacity 9.9.

[00:01:24]
Otherwise, it doesn't do anything. And the effect is very similar to what the touchable opacity does, but it's actually the same as what the touchable opacity does. And this file here is just to make sure that we also apply styles. Cool, and you stayed, if you remember is one of the React hooks and we used a short and we use it to store the selected value.

[00:01:47]
All right, let's start by creating a typescript type for the emoji option. So usually in TypeScript projects, I create a types file. So in source let's create types.ts. I'm just going to copy this. And in here we're going to export a type mood option type, and we basically typed the emoji and the description.

[00:02:11]
So this is so that if we use the same type in say various files, we have one source of truth for the type definition. Now, next up let's import this type in our mood picker. So, in mood picker, we will import mood, option type from types, and we can actually explicitly type these mood options if you wanted to.

[00:02:38]
So mood, option type. Okay, so now we want to use state variable for the selected mood. So inside of component let's do a const, selected mood, set selected mood and this is a React use state. And no initial value. Now the question becomes how do we tell TypeScript that we want this to be of type mood option type?

[00:03:11]
And actually the way we do this is just after you state and before the parentheses we will add some angle brackets and we place the typing here. So now when you hover over selected mood, it actually tells you that here it's either mood option type, or undefined. So next up let's import pressable from React Native, and let's wrap each of these texts inside a pressable.

[00:03:42]
And on press. Let's set selection need to be the current option.