🔴 Onboarding UI with Lottie Animations | React Native Tutorial
Vložit
- čas přidán 2. 06. 2024
- Hello everyone 👋, today we are going to make a beautiful onboarding UI in react native expo and Lottie Animations. You will learn to integrate stunning animations and add userflow in your apps, that will enhance the look of your app.
make sure you like this video and subscribe the channel for more react native videos.
🚀 Source Code: links.codewithnomi.com/onboar...
Lottie Animations: lottiefiles.com
Add TailwindCSS in React Native : • Add Tailwind CSS In Yo...
Add Navigation in React Native : • Food Delivery App with...
If you appreciate my work and you would like to support my channel: www.buymeacoffee.com/codewith...
🚨 more videos on react native:
Food Recipe App with Reanimated : • 🔴 Build Food Recipe Ap...
AI Voice Assistant with ChatGPT & DALL-E : • 🔴 Build a React Native...
Movie App : • 🔴 Build Movie App Usin...
Weather App : • 🔴 Build Weather App Us...
Coffee App UI : • 🔴 Coffee App UI - Reac...
Travel App UI : • 🔴 Travel App UI | Reac...
Food Delivery App : • 🔴 Build Food Delivery ...
CZcams Clone App: • 🔴 CZcams Clone - Reac...
Login | SignUp UI : • 🔴 Login | SignUp UI - ...
Fast Food App : • 🔴 Fast Food App UI - R...
App Store UI : • 🔴 App Store UI - React...
Fruit Shop UI : • 🔴 Fruit Shop UI - Reac...
Firebase Authentication React Native: • React Native Firebase ...
Food Delivery App : • Food Delivery App with...
Learn React Native: • Build Expensify App Wi...
Learn Reactjs: • Modern React For Begin...
#expo #reactnative #tailwindcss #javascript #programming #typescript #speedcode #coding #design #appdevelopment #reactjs #ui #uiux #reactnavigation #reactnativetutorial #react #animation #reactjs #navigation #navigationbar #uidesign #mobiledevelopment #iosdeveloper #buildinpublic #opensource #reactnativeapp #reactjstutorial #typescript
react native animations
animations in react native
react native tutorial
react native app
react native tutorial for beginners
react native project
react native course
movie app in react native
onboarding ui in react native
onboarding screen
react native onboarding tutorial
splash screen
onboarding tutorial in react native
▬▬▬▬ Contents of this video ▬▬▬▬▬▬▬▬▬▬
00:00 - Intro
01:21 - Onboarding UI
12:15 - Home Screen UI
15:32 - Async Storage
This is the best tutorial among those I have taken for onboarding screen development. Thank you! Keep up the pace.
Your work is completely amazing mate! Thanks for sharing your knowledge with us!
So nice and structured. Amazing work. Thank you.
Nomi, excellents tutorials, thank you for sharing! Cheers!
I had been considering between React Native and Flutter for a while.
I decided to learning React and React Native 1 year ago, now I can switch between web and mobile app development with ease and performance.
Especially, I love Nextjs and Expo framework.
I'll create tutorials on nextjs in future
same bro I'm in love with these frameworks too
Amazing tutorial! Thank you!
Thanks man! that helped me a lot
Your content is unique in CZcams and unforgettable ❤
Thx so much, it's great work
Thank you very much for sharing your knowledge and experience.
Please share how do you plan a react native project(client/personal project) before starting it.
Nice work brother learn lot from your video Thank you.
I saw the clean ui u make ,,, gooood
great video brother
Dhanyawad bhaiya.
Thank you boss
Actually i so love android development and I'll learn native soon❤
I like your videos
Any reason you did not use tailwind in this build? Can you make it responsive with tailwind as well?
Hey! My Animation is not loading. It is there as my Title and subtitle are getDown to bottom but i can't see the animation or i can say the animation is not rendered. can you please help me in this
I have done the same as you , but still i am getting this error, "undefined is not a function" why?
My app crashes when recording an audio. If a press the record button and start saying something, it crashes without any error in console. Can you help me?
Wow, your React content is an absolute gem in the vast sea of CZcams!, I can't thank you enough for sharing your knowledge with the world. Keep up the fantastic work, and know that you're positively impacting so many people's lives, including mine.
Looking forward to more enlightening content from your channel! 🚀💻
+ I wanted to ask if it's possible to give us your user snippets code for "rnf" and thanks in advance.
thanks 🙏
you can find the git repo link for the source code in all of my videos 😉
Hai bro i am watching your chat gbt video. i found the error bro `new NativeEventEmitter()` was called with a non-null argument without the required `addListener` method how to solve the error bro please replay
Why you don't use expo router?
hello bro kindly solve this issue the app crash when i enter done button
FIrst of all your content are great.Love from Nepal.I have been going throught your video of lottiee animation but i find issue in my application in animation only in android device ios devices is working fine can you help me solved my issue
Best 🤙
Thank you ❤
@@codewithnomi🙌🙂
awesome tutorial sir! may I ask how can i remove the color transition delay? and is this react native swiper works well with product card images? thank you so much! 😊
Yes you can use product card images, but you will have to check their documentation for color transition delay.
@@codewithnomi awesome thank you sir!
Hi, your video are really interesting. Meanwhile, what will you advice a developer trying to make app responsive. 1. Using the inbuilt Dimension you used in this video, or 2. The flex and the responsive library used in some of your other video. ?
the responsive library also uses device dimensions, use flex + responsive screen library
U re doing a great work ! Can we able to use your frontend and make it better like a full stack application
and publish it to git or any app store
I don't see why not 😃
app crash when we enter done button
plz solve this
This code works perfectly but crashes immediately after loading on android. I've been on it for a day now. Does anybody have pointers?
if the user needs to sign in to use the application, would you recommend to have sign in page before the onboarding pages or after?
It depends on the nature of the app and the user experience you aim to create.
Sir you have great tutorial videos, but which of your tutorials should i begin with first, as i a total beginner 😅
Build Expensify App With React Native: czcams.com/play/PLKWMD009Q4qTGuqXxRq51f8OoDaIoJ1yo.html
@@codewithnomi Thank You
Brother I need your opinion am a flutter developer but after watching your viddos i just fall in love with react native is it possible i learn react? I love the amoothness of react apps + on end scroll stretch effect on screens.
And please let me know how you learn react native!
Lot of love
Danish awan 🇵🇰♥
I practiced reactjs for 5 years and recently started react native. If you know reactjs then learning react native will be a piece of cake 😁
My app keeps crashing..I don't know u I did everything correctly
brother when i use this with CLI app crashes again and again its work not properly its work in some cases so plz make video on CLI as well thanks
The process is the same for cli approach, if you are facing any issue I'm sure you'll find the solutions for that online 😉
I followed your instructions but by 7:30 my animation was not showing like your video and the program is still running normally.
you mean lottie animations are not working?
@@codewithnomi Yes, I used "npx expo install --fix" and got the animation displayed. But then Expo Go stopped working and I don't know what's wrong. when I remove this line "" the program runs normally again
Brother !
Why am i unable to connect tailwind css in my react-native project?
Watch this: czcams.com/video/_Z33DTn0ZFo/video.html
Can u Make a text detection from image app!
Noted.
Hi, I am getting this error in my react native project when I install lottie-react-native package.
Task :lottie-react-native:compileDebugKotlin FAILED Please help me to solve this.
there maybe some cache issue on android side, try cleaning the cache
try these commands:
- react-native clean
- ./gradlew clean
- ./gradlew cleanBuildCache
@@codewithnomi I have solved the issue. It was because of latest version of Lottie. I have install 5.0 something and it is working fine. Thanks for the reply.
What extensions are you using in this project?
you mean packages or vs code extensions?
@@codewithnomi code extensions bro!
the Onboarding UI can use with expo ?
you can
Bro how to solve the Use process(css).then(cb) to work with async plugins in react native bro. please replay
try using this version of tailwind tailwindcss@3.3.2
@@codewithnomi Thank you bro the error is solved.
how to do this in expo routing
watch this:
czcams.com/video/jJl-DZ3d8k8/video.html
How do you make thumbnail a tutorial on it also
I use canva
@@codewithnomi tutorial please
@@shiekhpalace2401 you don't need a tutorial for that just use any template in canva
@@codewithnomi these mobiles standing in a pattern one after other how is this template
@@shiekhpalace2401 these are iphone 14 frames, found them online
Why u don't use tailwindcss instead of stylesheet?
It doesn't matter. Use what works for you
i am still confuse, some of developers use React Native without Expo platform and another use it, please make another video comparing between develop React Native in Expo and not Expo..
tks..