Enhancing your React Native App with Haptics, Sounds and Micro-Animations

hello and let's talk about haptic sounds and micro animations in react native so i have built this little app where you could purchase matcha lattes so you can add it to your favorites or removed it from your favorites you can choose between one and three match lattes to purchase and you can add them to your cart now in this demo we're going to go through this little ui that i've already built and we're going to use haptic sounds and micro animation animations to basically enhance it and make it a little bit nicer to use now some of these things haptic feedback in particular are kind of difficult to convey in a video so all this code is available on expo snack so if you go on snack snack.expert.dev add calicraman and haptics and microanimations and then in the preview panel choose my device you can scan the barcode and basically view this demo on your own phone all right let's start with haptic feedback happy feedback is basically any kind of tactile feedback meaning that you can feel it that's produced by an electronic device in the world of mobile development haptic feedback is primarily just vibration now my example is built using expo and this is because i wanted to make this available in expo snack but you can do this on both expo and plain react natives so i've linked to libraries in both in expo there is a library called expert haptic so install it using expo install expo haptics and in plain react native there is a library called react native haptic feedback which you can install with yarn or npm i've actually used both of these libraries so they both work equally as well now in the interest of speed i've already installed these libraries to my demo project and i've commented out the code that we're going to add so i'm just going to talk through how it works first thing we do is obviously import the haptics from expo haptics now let's have a look at where we would like to add it well just starting at the top of the page we could do haptic feedback so a little vibration if you have added something to your favorites so we scroll down to where we add things to our favorites so we've got a icon here for the favorites when we press on it we handle toggle favorites and here it is okay so we've got use callback that says the favorite and if it's not already your favorite let's do this so we call haptics impact async and here you can choose the strength or the vibrations you can have a light medium or a heavy vibration now another place we could use it is obviously the add to cart button especially because this is an asynchronous request so when you add to cart we have a little bit of a delay until the cart is ready so let's find where that button is all right so we have our cta button here it's going on press calls handle add to cart and this is a used callback obviously i'm emulating the loading here but in your real application this might be do an api request so we could do haptics impact async and let's do impact feedback style heavy just to make it really obvious that something's changed and the last thing we can really interact with with here is the quantity picker now this is actually quite cool because there are three types of haptic feedback like medium and heavy you could actually use the haptic feedback to indicate how many letters you've chosen so let's find the quantity picker all right so on press we do handle select quantity okay so here what we can actually do is based on the new quantity if the quantity is one we'll do a hamtex impact async and do the light feedback if the quantity is two we could do a medium feedback and otherwise or in our case if the quantity is three we could do a heavy feedback so now if you press on these this will give you the lightest feedback and this will give you the heaviest feedback and that's just one example of how you could use the haptic feedback to communicate differences in scale haptic feedback is always also super handy if you have a slider component just to indicate that a new option has been reached now obviously visually on the screen you won't be able to tell the difference but if you try this out on your phone on expo snack you'll be able to see what it feels like i've also added a little button to enable or disable enhancements which will basically disable all the animations and haptic feedback and sound that we're going to add and you'll be able to experience what it's like to use this little app with and without the enhancements now next up sounds now sounds in mobile applications is quite interesting because when it comes to for example mobile games or video games we expect everything to make sound but a lot of the apps that we use day-to-day don't really make sound and we can't really rely on sound too much because a lot of people don't have sound enabled i mean iphone always have my fat phone on silent mode however this can be a fun little enhancement that you could you could add for people who do have sound on so again there is an expo and a plane react native library for it that i've linked to so in plain react native we got react native sound which you can use and in expo we have got expo av so this is a catch or library for both sound and video which you can install using expo install expo av so again i've added just a little code example just to give you an idea of how it works effectively you choose a sound file which can be within your application or it can be downloaded from a remote url then you create a sound object and you play it now let's go to our example where can we add a sound well i was thinking it would be fun to have a little happy sound if you have added something to your favorites so let's start by importing audio from expo av and let's go down to where we have our handle toggle favorite callback and underneath it we have this play sound callback so commenting this out let's see what this does it creates a sound using the expo audio library and we also need to pass it in the source of the sound so i have a notification sound that i've already packaged into this code base then we set the sound so we have this react use state here to set the current sound and finally we call play async so let's just uncomment this out so now if it's not currently your favorite we do the haptic feedback and we also play a sound so let's add this to our dependencies array as well and now if you are using expov you'll also need to unload the sound once the component dismounts to prevent any memory leaks so i've got a react use effect here that says if we have a current sound in our use state then unload it otherwise do nothing so this gets run when the component dismounts and now when i add this to my favorites you hear a little sound and finally we have microanimations now microanimations are any ui animation that isn't strictly necessary for example sliding a menu open or fading in an image or scale a button on press when done right a lot of users don't even notice that microanimations are there but they do add to the joy of using your application there are loads of animation libraries available in this demo i'm going to use reanimator 2 which is definitely my favorite reanimated1 was originally built to to mitigate some deficiencies in react native's built-in animation library but reanimated two kind of went further and effectively they made a huge based animation library for react native which is the easiest and most straightforward in my opinion to use if you're using functional components this is available on both expo and in plain reaction native and the installation instructions are available here now let's use reanimator to animate some things in the screen well firstly let's animate this heart when you add something to your favorites so what i want to do is if i'm tapping on this heart it's already playing the sound it's already giving me haptic feedback but if i'm adding to my favorites i'd also like this heart to kind of expand a little so like a little pulse so first thing that we want to do is let's import reanimated from react native reanimated and let's import you shared value and use animated style a shared value is basically the value that you are going to be using as a central point for your animation and use animated style is basically a hook that returns a style object that will will contain the animated style so you can use the shared values within this animated style object so for the heart i've created a hard scale shared value now let's go to the toggle favorite so what we want to do is we want to expand the heart and make it go back to normal so let me just show you what happens if i don't use this so let's do a hard scale dot value and let's do 1.3 so if i add something to my favorites it will increase the heart style to 1.3 now let's go to the use animator style so this is the style i'm going to apply to the heart so i'm going to apply a transform with a scale and this is pretty simple it's just using the value of the shared value and lastly what we want to do is we want to use this heart style on our heart and you know to do that let's find where the heart is okay here it is so it's wrapped in oppressible so i want to apply the animated style to the pressable in order to apply the animated style to anything it needs to be an animated component so what we can do is we can use reanimator so this is the default export create animated component and then pass in any component that we want so in our case we'll pass impressible and this is a reanimated pressable component now if we scroll down and replace this with reanimated pressable and save and now if i add it to my favorites you'll see that the heart kind of went really big but obviously it doesn't go back and also it jumped to really big it didn't really animate so in react nation reanimated we have a bunch of these with exports which basically you can use to set the value to a new value but gradually so one of the most popular ones is with timing so this basically creates a smooth transition so if i go to this hard scale value and rather than assigning it to 1.2 i do with timing and 1.3 and now when i click on this you'll see that the heart kind of increases gradually rather than rather than really quickly now what we actually want is we wanted to expand but also then go back to normal and then for that we can use a with sequence export and as the name suggests it basically allows you to do multiple transitions one after the other so now when i comment this out we'll see that we're basically we do a sequence and we animate from our initial value to 1.3 and we can pass in an object to specify what like how quickly we want to do it and then after that's done we animate back to one and now when i add something to our favorites you'll see that it does a little pulse next up let's animate the add to cart button so at the moment when we add something to our cart we get a little loading spinner and that's pretty much it so what we'd like to do is we want to make it more obvious that this button is disabled so what i would like to do is make this button slightly smaller while it's loading but also make the opacity lighter so make it a little bit lighter so it makes it really obvious that it's disabled so let's go to where the button is so we have our cta here notice that this is also a pressable component so as before with the heart we have to convert this into a reanimated component so let's do reanimated pressable instead and so i've got a shared value here already which is called button scale so we're going to start this with 1 as with the hard scale and for the button style so we've got a use animated style here and let's start with the just a transform so this does exactly the same as the heart so it uses the transform and scales based on the button scale so let's apply this style to our button to convert this into an array and add the button style and now we also need to actually set the value as the like add to card action is ongoing so if we go to this callback and we'll do okay so button scale.value with timing so we'll go from 1 to 0.9 and this animation should take 200 milliseconds and then after we waited for a second and we've done the haptic feedback and we've implemented the card count we will put the button scale value back to one so we'll go back to 100 at this the original size let's update the dependency array one thing i've noticed when working with your animator 2 is that hot reloading doesn't always work as expected so it whenever editing the styles it's a good practice to just reload the app completely just to make sure that you have the latest latest version all right now when i press the add to cart button you can see that it scales down and once the add to cart action is finished it will scale back up now one cool thing about these values is that you can use the same value for multiple things i would like this button to also be dimmed when it's smaller so to do that we can update the opacity now here's a keyword that we haven't used before interplayed so this is another export from react native reanimated and basically what this does is we pass in the value that we are using to do the animation and then we pass in two arrays so this is basically a mapping from this array to this so the first array is basically the expected scale so we know that we only set the button scale between 0.9 and 1. and what we're saying is that if it's 0.9 make this opacity 0.5 so 50 opacity if this value is 1 make the opacity 1 but also handle all of these values in between so it will automatically know for example if you have you know 0.95 it will do 0.75 so 75 opacity and it will it will automatically handle the values in between so let's save that and refresh the app now when i add to cart you'll see that i'll have both animations at the same time and the last animation we had was the amount picker so at the moment there's no animation here but i thought it would be nice if this would fade in rather than just snapping in now a way to do that is again using a shared value so i've got a quantity item here so this component is for each of these buttons so it has it knows whether it's selected what to do when you press it that children is just a number the children is just the label now we're going to start with creating a shared value so we'll do if the item is selected we'll start with one other word we'll start with zero so these will be the two values that we're going to be toggling in between now at the moment we do okay if it's selected display this otherwise display this one easy way to do fade animations is basically to render both of the items on top of each other and then animate the opacity the opposite way so what i'm going to do is remove this inline if and also i'm going to convert these views into reanimated views now some of the core components like view and text are actually built in to react reanimated so instead of creating an animated component you can do reanimated dot view and this will make it into a reanimated view now this means that we can pass in animated styles now we will need to have two styles so we need to have a selected style and a not selected style and both of them will handle opacity of the item so the selected style the opacity will just be the current value so if it's selected the opacity is one if it's not selected the opacity is zero for the not selected style we want to do the opposite so we can use the interpolate function so we pass in our value and we basically create this mapping function so we go from zero to one but we want to map that to one to zero so this creates the opposite effect and also animates all the values in between now let's pass these styles into the views so the selected and not selected now all this left to do is actually update this value when the selected state changes so to do that we can use a use effect and because we have is selected in the dependencies array we'll know that this effect gets run whenever is selected changes now if a selector changes we will go to this use effect and we will assign the new value for this myvalue that's why we should name them something other than value and we will use the timing function and basically we're doing if it's selected is true let's change it to one otherwise to change it to zero and let's take 400 milliseconds to do that which will make which will create the animation now this effectively will update these two styles so the selected version of this view will get opacity one and the not selected one will get opacity zero now let's refresh and you'll see that when i change this you'll see a little fade animation that's it for me i hope you enjoyed it and here is the qr code if you want to try it out on your phone thanks very much

Channel: Kadi Kraman

Views: 1,482

Keywords:

Id: hDGASxkKEXE

Length: 19min 7sec (1147 seconds)

Published: Fri Sep 03 2021