Handling errors in Haptic Feedback in React Native

hey there everyone they share back again with another video and welcome to react native series a really Pro great series that will help you to not only just become a react native developer but also to have portfolio apps with the series absolutely free on YouTube if that doesn't deserve a subscribe I don't know what is and a big shout out to harsh note for sponsoring the entire series and in this video we'll walk through with the haptic feedback which is a really interesting concept to give your users some feedback that can be on the touch of a button maybe on notification maybe whatever the concept will remain same and you can implement it wherever you like whatever the activity suits you great so this video I'll walk you through how you can inject haptic feedback and how you can actually learn from the documentation and sometimes when the documentation goes a little bit bizarre how we can actually figure that out let's go ahead and try this out so first and foremost the package that we'll be using is react native haptic feedback pretty popular project supports the typescript and easy just copy install it but there is no docs available you have to go on their home page to actually look through what documentation that they are giving us or supporting so the installation is pretty good uh just basic install then there is a concept of linking now this is a really really interesting concept you can manually link this or you can try this I'll show you how actually you can do this and there are couple of interesting concepts of how this actually works through so let me go ahead and work on with this all right so step one is just close this and we'll open this in a second but first let's go ahead and install this the installation is pretty simple pretty obvious let me go ahead move this up yeah better now and we'll simply install this pretty simple install now the next step is simply to have react native link react native haptic feedback let's go ahead and try this out and see what happens obviously we never installed react native so we have to go with uh npx version of it react native or react package executor if we go ahead it says Hey unknown command link what is this and how does it work I don't know all right so this means that this case has a flopped so we'll go with the manual way this is where something really really interesting happens so it says manual installation for IOS and Android and you can go ahead and just follow these uh processes for xcode as well I'll just follow them for the Android and this is exactly same so first it says that open the main application.java let me Zoom this up much better for the mobile viewers open the main dot application pretty simple I can just go up into Android app build not build my bad Source main Java and Main application yes it's it's buried down right there uh yeah but you have to open this up now once you go up here it says you have to add a new react native haptic feedback package all right but in order to actually have this package uh the line number this line needs to be there so import this package we have already installed that go ahead and install that and then I'll show you there's something really interesting going on but this is a process you need to go through to actually learn and understand this then it says that you can actually go ahead and add a new react native package haptic feedback as a package to the list returned by get packages now those who are not familiar with it it's actually super simple you can come up here there is a sample line written that if you want to have this packages or something like this you can actually use this so go ahead and use this line don't just mindlessly copy and paste the syntax that is not always a good idea paste it up here there we go we have got and returned this package save this this is the step one then you have to Simply go ahead and append this line Android settings.gradle so make sure you go into this and we have to include uh both of this line better to just simply hit and copy all of this because it's a long line you can see this yeah that's that's a big one so we'll go into Android settings dot Gradle so let's go back and we'll close this one so in the Android make sure you close this one there is this uh settings dot Gradle go up here and we have to actually include these two lines there we go so we have included this so there we go include this one and include project this whatever that is okay save this all right we have saved this one as well there is one more step going on that needs to go into notice this very carefully Android app build.gradle because uh if you'll just close this one you'll find this uh build.gradle here we don't want to do this it's saying that need to go into Android app and build.gradle okay Android then app and then inside this will open this bill.gradle if you'll scroll a little bit close this you'll find there's a lot of section but there is a dependencies section somewhere there we go dependencies and here you have to implement this so we'll just uh inject it up here wherever you like and I'll just copy and paste this copy this and there we go paste this yeah there is this much of the process you need to go through with this okay now interestingly you have done all of this you have to go and similarly do for the iOS project as well but it's saying that if the linking is not happening manually then you have to do all of this I'll show you something really interesting and then you can go ahead and use this okay let me go ahead and try to use this or show that how this can be used we'll first import this line all right super easy to go ahead and work on with let's close all of this the usage part is super easy not index the app all right we'll first go up here we'll get this all right super easy the next is these options you have to go ahead and mark them all right so options you can declare them uh wherever you like or wherever you think that that makes sense so you can go ahead and do this I'll I'll put them at the top so just here yeah I don't know where the right place is but I will just keep them at the top now we are actually calling this method on roll on dice roll tabs so we definitely want to trigger this event when somebody actually puts this and hold random and dice are all there all right so this is super super easy there is nothing complex onto this one I'll minimize this and then we'll come here there we go now we are using the impact light but there are other options you can study about them there is impact light medium heavy present soft notification success there's a lot there's a lot make sure you also read about what is being supported now once I go ahead and save this sometimes you need to actually restart the app but there will be something interesting that you are going to see right now if I go ahead and click on this there is no haptic feedback that is coming up when you install these kinds of packages it is important that you restart your app and this is where the magic actually happens it says hey not available yes I'll make it available close this let's see some of the errors I don't know this and we need run Android and yes a on Android and it will just reload this and your haptic feedback is not going to come immediately like this and bundling the app there we go we see the error this is exactly what I was waiting for it okay I guess the error will come notice here look at the error very closely what just happened and how we can actually resolve this if you don't read letters you're not a programmer the error says the native module are our native feedback is override yes we are overriding it we are using another package to actually make our life easier but the problem that is happening is this get package method uh the module is being created twice so what is happening now in the back end is uh that this linking thing although when we run the command this is not happening but this actually happened behind the scene for you so you have to go ahead and make sure this list the package get package doesn't get it twice so you have to go back and this is not something that is kind of a kind of a to-do list that hey you always do this you resolve the error but you have to read this and this is exactly why I have chosen and shown you this errors and stuff now I have to go back into Android this because this is where I'm importing this in the app Source Main and Java and Main application.java and we actually don't have to import this package although the documentation says it but we don't have to because the linking is happening automatically now once you comment this out save this up if you try to reload obviously this is not going to work because you obviously have to restart the package up here sometimes even you have to do the cleanup so let's see what is going to happen and what is going to work for us we'll see it together all right let's run this yes I want to run it on Android and it's going to take couple of seconds to debug and install this and building the app there we go now I can simply go ahead and roll the device and I can actually see this uh roll the device yeah it sometimes does the refresh like this I can feel the haptic feedback uh there is no way of how can I transfer it to you to show that hey the haptic feedbacks are coming in but yeah the app is running I can feel it you can trust my words if you want to otherwise you can just run your app on your own but this is a really really interesting use case about how sometimes uh the documentation could be a little bit off because the things have updated and how you can figure them out read the docs and configure out I hope this uh particular video have added some values to your life and have taught you a little bit about the mobile app development in case you want to write an article about this one this will be super super helpful for a ton of developers that will be your contribution go ahead and write an article using hash node contribute that into our series into our GitHub repository share it with me on LinkedIn and Instagram using the hashtag or the at the rate hash node they will be super happy that hey you are contributing you are learning something I will be super happy and that's the goal so we have done this let's officially close our fifth app there is an assignment included as well let me show you that as well so what we want to do is in this assignment is we don't want to have just one role that dies we want to have to roll the dice both should actually generate different kind of images not only that we also want to have a background pattern this time we want some really classy and amazing background pattern in which the thing should be generated on the go some circles uh some triangles some rectangles and if you want you can have you can add colors to them that will definitely add something more to what you have learned in this series and that will be super helpful really happy really excited that we have finished halfway long there is a lot more to cover up subscribe this and let's catch up in the next one

Channel: Hitesh Choudhary

Views: 8,789

Keywords: Programming, javascript, React-native, react, hashnode, android, mobile apps

Id: bIJASPiSKS4

Length: 10min 50sec (650 seconds)

Published: Mon Mar 20 2023