🔴 Onboarding UI with Lottie Animations

🔴 Onboarding UI with Lottie Animations | React Native Tutorial

Рет қаралды 31,573

Күн бұрын

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 ...
KZfaq Clone App: • 🔴 KZfaq 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

Пікірлер: 84

@berndeveloper 6 ай бұрын

Your work is completely amazing mate! Thanks for sharing your knowledge with us!

@aroobamasoodabbasi6475 8 ай бұрын

This is the best tutorial among those I have taken for onboarding screen development. Thank you! Keep up the pace.

@Mossad84 11 ай бұрын

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.

@codewithnomi 11 ай бұрын

I'll create tutorials on nextjs in future

@imankush10 3 ай бұрын

same bro I'm in love with these frameworks too

@sinethembagomba1720 10 ай бұрын

So nice and structured. Amazing work. Thank you.

@voloxon 6 ай бұрын

Nomi, excellents tutorials, thank you for sharing! Cheers!

@alexeykorobov8822 8 ай бұрын

Amazing tutorial! Thank you!

@yasserhy 4 ай бұрын

Thanks man! that helped me a lot

@heidar_dev 3 ай бұрын

Your content is unique in KZfaq and unforgettable ❤

@udaym4204 7 ай бұрын

Nice work brother learn lot from your video Thank you.

@Gman_Reta 8 ай бұрын

Thx so much, it's great work

@ramodsasanga6169 10 ай бұрын

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.

@sahilverma_dev 11 ай бұрын

great video brother

@ShawkiFitouri 11 ай бұрын

I saw the clean ui u make ,,, gooood

@prashlovessamosa 11 ай бұрын

Dhanyawad bhaiya.

@blaqhakym 5 ай бұрын

Thank you boss

@ramdhannp8796 7 ай бұрын

I like your videos

@abdalrahmanBashir 11 ай бұрын

Wow, your React content is an absolute gem in the vast sea of KZfaq!, 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.

@codewithnomi 11 ай бұрын

thanks 🙏 you can find the git repo link for the source code in all of my videos 😉

@heidar_dev 3 ай бұрын

Actually i so love android development and I'll learn native soon❤

@PauloIcaro-pg2xk 8 ай бұрын

Best 🤙

@codewithnomi 8 ай бұрын

Thank you ❤

@PauloIcaro-pg2xk 8 ай бұрын

@@codewithnomi🙌🙂

@subtoamit 11 ай бұрын

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

@codewithnomi 11 ай бұрын

I don't see why not 😃

@penguinxed 11 ай бұрын

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! 😊

@codewithnomi 11 ай бұрын

Yes you can use product card images, but you will have to check their documentation for color transition delay.

@penguinxed 11 ай бұрын

@@codewithnomi awesome thank you sir!

@doma3199 4 ай бұрын

Any reason you did not use tailwind in this build? Can you make it responsive with tailwind as well?

@herbeysoft 8 ай бұрын

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. ?

@codewithnomi 8 ай бұрын

the responsive library also uses device dimensions, use flex + responsive screen library

@manooj8502 6 ай бұрын

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

@geoffreybluejack3022 11 ай бұрын

Sir you have great tutorial videos, but which of your tutorials should i begin with first, as i a total beginner 😅

@codewithnomi 11 ай бұрын

Build Expensify App With React Native: kzfaq.info/sun/PLKWMD009Q4qTGuqXxRq51f8OoDaIoJ1yo

@geoffreybluejack3022 11 ай бұрын

@@codewithnomi Thank You

@CarryMinati-nm8dn 9 ай бұрын

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

@AFLEXGAMING 11 ай бұрын

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 🇵🇰♥

@codewithnomi 11 ай бұрын

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 😁

@kpopcat_official 6 ай бұрын

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?

@codewithnomi 5 ай бұрын

It depends on the nature of the app and the user experience you aim to create.

@user-sh7xs4si2w 10 ай бұрын

I have done the same as you , but still i am getting this error, "undefined is not a function" why?

@Luis-tt2br 21 күн бұрын

hey Hi. one question i have a warning cause default props will be removed how can i fix it ?

@cubeunicorn4055 6 ай бұрын

Why you don't use expo router?

@JorgeSantamariaRamos 7 ай бұрын

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?

@hubesh716 11 ай бұрын

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

@codewithnomi 11 ай бұрын

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 😉

@narinderkumar9028 9 ай бұрын

hello bro kindly solve this issue the app crash when i enter done button

@lokis5409 11 ай бұрын

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

@dzungtran612 10 ай бұрын

I followed your instructions but by 7:30 my animation was not showing like your video and the program is still running normally.

@codewithnomi 10 ай бұрын

you mean lottie animations are not working?

@dzungtran612 10 ай бұрын

@@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

@narinderkumar9028 9 ай бұрын

app crash when we enter done button plz solve this

@Olatee 7 ай бұрын

This code works perfectly but crashes immediately after loading on android. I've been on it for a day now. Does anybody have pointers?

@technishan7222 11 ай бұрын

Brother ! Why am i unable to connect tailwind css in my react-native project?

@codewithnomi 11 ай бұрын

Watch this: kzfaq.info/get/bejne/lcBjZqeF05a-dqM.html

@reptv3089 10 ай бұрын

What extensions are you using in this project?

@codewithnomi 10 ай бұрын

you mean packages or vs code extensions?

@reptv3089 10 ай бұрын

@@codewithnomi code extensions bro!

@AjaySingh-xy9zq 11 ай бұрын

Can u Make a text detection from image app!

@codewithnomi 11 ай бұрын

Noted.

@vannyaofficial7958 10 ай бұрын

the Onboarding UI can use with expo ?

@codewithnomi 10 ай бұрын

you can

@shahhussain56 11 ай бұрын

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.

@codewithnomi 11 ай бұрын

there maybe some cache issue on android side, try cleaning the cache try these commands: - react-native clean - ./gradlew clean - ./gradlew cleanBuildCache

@shahhussain56 11 ай бұрын

@@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.

@lokis5409 11 ай бұрын

Bro how to solve the Use process(css).then(cb) to work with async plugins in react native bro. please replay

@codewithnomi 11 ай бұрын

try using this version of tailwind tailwindcss@3.3.2

@lokis5409 11 ай бұрын

@@codewithnomi Thank you bro the error is solved.

@johnaudu2383 8 ай бұрын

My app keeps crashing..I don't know u I did everything correctly

@muminbhat3566 7 ай бұрын

how to do this in expo routing

@codewithnomi 7 ай бұрын

watch this: kzfaq.info/get/bejne/oLCcYKeLmMqcm2w.html

@sallbro4134 9 ай бұрын

Why u don't use tailwindcss instead of stylesheet?

@blaqhakym 5 ай бұрын

It doesn't matter. Use what works for you

@shiekhpalace2401 11 ай бұрын

How do you make thumbnail a tutorial on it also

@codewithnomi 11 ай бұрын

I use canva

@shiekhpalace2401 11 ай бұрын

@@codewithnomi tutorial please

@codewithnomi 11 ай бұрын

@@shiekhpalace2401 you don't need a tutorial for that just use any template in canva

@shiekhpalace2401 11 ай бұрын

@@codewithnomi these mobiles standing in a pattern one after other how is this template

@codewithnomi 11 ай бұрын

@@shiekhpalace2401 these are iphone 14 frames, found them online

@danimusbar 10 ай бұрын

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..