Creating Custom Buttons

[00:00:00]
>> Kadi Kraman: When we're creating pressable elements in React Native, we often reach for a touchable opacity. I think this is a guilty pleasure of many a React Native developer, where we use touchable opacity, but when we know that actually we should be using this new pressable component instead, the touchable opacity is so convenience.

[00:00:19]
So why would you use pressable? And then define it ourselves. So we're going to actually create a beautiful custom button using some of the functionalities of the Pressable component, which is an example of what you can do, with pressable that you couldn't, with touchable capacity. So let's start by creating a components folder at our rooted project.

[00:00:46]
>> Kadi Kraman: And let's create a file called plantly button.
>> Kadi Kraman: And this is actually a convention again that I personally like to do. So when I have a new project and oftentimes we have a button component that's specific to that project, so might have different states. And I tend to call it like project name button or client name button or something like that.

[00:01:15]
And the reason for that is I find the importing easier because if we just call it button, then you have lots of competition in five competitions. So this is just a convention. To start with, let's copy this plantly button here. This will just create a pressable with some styles.

[00:01:41]
And let's actually also use it straight away in our okay yeah. So I'll just tell the props so we have a title prop and a non-press prop, and we're just rendering a pressable with a text inside. And I have this onboarding page open. So let's also use it in on boarding.

[00:02:03]
So instead of button, let's call it plantly button. So we use the same props here, which is handy, and same for our profile route. Let's rename this plantly button.
>> Kadi Kraman: Okay so styling wise, I've used the green color that we had before, added some padding horizontally, vertically, and used my favorite border radius, 6.

[00:02:38]
And because we have a dark brown frack I used there a white text. Now the first thing we want to do is have some haptic feedback. So whenever you press the button, we want the phone to vibrate a little bit. So for that, let's install expo haptics so we'll need.

[00:03:02]
>> Kadi Kraman: NPX, expo-install, expo-haptics.
>> Speaker 2: Does your computer vibrate in the emulator?
>> Kadi Kraman: Unfortunately, it does not so, haptics only work on phones. They actually don't work on the web as well. So because we have added web support we'll need to add a condition not to call the haptics on the web because that will cause an error.

[00:03:29]
So let's import import star as haptics from expo-haptics.
>> Kadi Kraman: And then this onPress, let's pull this out to a constant function. So we'll do const handlePress.
>> Kadi Kraman: And we're we want this to call on press of course so keep the existing functionality. But let's also do haptics impact async and let's just do a light haptic feedback.

[00:04:12]
So haptics impact feedback style. And there's a couple that you can choose for, but if we're putting it on our main button, we probably don't want it to be pretty intense so just do a light one. And like I said, this doesn't work on the web. So we should add, because we have added web support, we should also add handling for like to emit this on the web.

[00:04:37]
So we can use the platform form React Native and we'll do if the platform OS is web, is not web, so it's around. And if we're not on the web, then we're going to do the haptic feedback otherwise, we just carry on.
>> Speaker 3: Their performance hits with using haptics within mobile phones, it says async, so I'm assuming it pulls it out of like the rendering, it's not blocking.

[00:05:10]
But is there a time when you wouldn't use it because it might.
>> Kadi Kraman: I think I'm pretty sure on some phones the haptic feedback automatically gets stopped. I think on Android, it gets stopped if you're low on battery.
>> Speaker 2: Okay.
>> Kadi Kraman: So I think there's handling of it in your operating system level.

[00:05:30]
But for you as a developer, you probably want to just not go crazy cuz if every single thing you do creates app-to-feedback in your app, users are gonna be annoyed.
>> Speaker 2: Yeah
>> Kadi Kraman: And the last thing you wanna do is so with touchable opacity, when we press the button, then we'll get some opacity change.

[00:05:47]
So opacity will change from like 1 to 0.8. I think by default it's probably 0.6 or 0.5 anyway. So something that you can't do is go darker. So let's do that so I've chosen another beautiful green color, which is here in the theme file. So this is leafy green so let's open our theme file and then add the screen color.

[00:06:20]
>> Kadi Kraman: And let's add a style here for buttonPressed.
>> Kadi Kraman: And this will have a background color of theme.colorleafygreen. Right, so for pressable, for the styles, cool that we can pass in a style object or a style array, but in case of a pressable, we can also pass in a function.

[00:06:47]
So here you can do a function and return my default styles.
>> Kadi Kraman: So why would you do a function? In this function, you get access to the current state of the button. So in particular, you can know if the button is pressed. So for this reason what we can do is if the button is currently being pressed,
>> Kadi Kraman: Then we can return an array of styles.

[00:07:24]
So return our button style, but then it will also return the button pressed style.
>> Speaker 4: Does the order matter in the array?
>> Kadi Kraman: Yes, it does, yeah so the letter style will override the former one. So in button, we do have a background color. And then because we are adding button pressed next, then this will overwrite.

[00:07:54]
So now if I press this button, you can see that While it's being pressed, it actually goes darker. So you can do a bunch of things here. A really common thing to do is you can use reanimated to animate this button. So you can do that when you're pressing it, it like scales down, for example.

[00:08:14]
So you can do that with like on press in and on press alt and using very high to be animated. I do have an example of that, if you look at the source code of the React Conf app. So, I think the icon buttons and also the bookmark items are using pressable and are using this method to animate the buttons.