React Native Tutorial 51 - React Native - vibration example

so last video we saw how you can use the vibration api to vibrate the user's device in this video we will be using that vibration api to create an app we will be pro we will provide user our text input and which user can enter their name so when you click on a button then the device will vibrate for one second and alert will appear to welcome the user on the app and we also provide a long press event so when user long press on the button yeah it will provide a warning with a long vibration that are you sure you want to clear or delete text or not so first of all create a react native project and open it on visual studio code and we will test this app on a physical device so first of all you need to import this much component text button vibration alert and touchable native feedback so let me just create a state first for storing user's name let me just write down the initial value as empty string now let us create a function let's say on press so whenever user press on the button device will simply vibrate for one second then we provide alert title will be welcome users name welcome to our app so this is our on present the next one is for on long press so when user long press on the button device will vibrate for let's say two seconds it means two thousand milliseconds then we provide alert warning i'll use so you want to clear the text and we provide couple of buttons the first one will be yes so if you suppress this we simply say set set name state to the empty string the second button will be cancel and on press cement it will do nothing okay now let us create a text input let's provide style to it let me create that styling let's say background color is yellow heading 20 margin is also 20 and width is 90 let me just save this one save this one also now on change text whatever text user inputs we set that name to the name state and value of the x input will be name now touchable native feedback there will be a view and there will be a text called submit provide styling to view let's see button let me create the button style background color will be let's say blue padding will be 20 width will be let's say 40 percent let me just save this one save this one also now on touchable native feedback on on press event we provide the function press and on long press event provide the function on long press let me just save this so what i have done here is i have created a state it's called name and user whatever is the enters on the text input it will be saved here then i have created a function on press when user clicks on the button then the action will fire device will vibrate and alert will appear so welcome to user and when you use a long press on the button again the device is vibrate for but this time for two seconds to indicate a warning if user press on yes then the name will be cleared and if a user play some cancels then alert will simply disappear so that's it for the programming now let's just head over to the physical device you need to run these uh project by npm start and you need to scan this qr code on your physical device you also need to download the expo app from the play store now uh let's locate the physical device now okay so i have my x4 app open on the android device so as you can see ap app is working fine let me just write my name vijay and if i press on submit it should vibrate for one second as you can see hello bridge and welcome to our app let me press ok let me try another name as you can see now if i long press on this it should vibrate for two seconds as you can see now we have two options are you sorry you want to clear the things if i press on cancel nothing will happen let me just again [Laughter] as you can see vibrate for two seconds now if i press on yes the text will be cleared so this is how you can use the vibration api to provide haptic feedback to the users these are very small example you can use this type of vibrations in submission or deletion activities it provides a much more rich user experience to the users so that's it for this video thanks for watching it

Channel: ProgrammingKnowledge

Views: 839

Keywords: React Native Online Course, Become a React Developer, Online React Native Course: Fundamentals, Top React Native Courses Online, Best Courses to learn React Native and React, Learn React Native Online Courses and Classes, React Native School, React, Node, React Tutorials and Training Courses, ReactJS Online Training, React Tutorial: Learn React JS, Learn React, How to install React Native on Mac, Setup React Native Environment For IOS, React Native First App Hello World

Id: W0orX0uLmZU

Length: 10min 57sec (657 seconds)

Published: Wed Dec 15 2021