Onboarding UI in React Native

Поделиться
HTML-код
  • Опубликовано: 13 янв 2025

Комментарии • 181

  • @JohannesFilter
    @JohannesFilter 3 года назад +90

    Hey, I'm the author of the `react-native-onboarding-swiper `. Thanks for your great tutorial. :)

  • @deleonjuliojr
    @deleonjuliojr 4 года назад +7

    I recently discover your channel and immediately subscribe! keep it up!

  • @ziyashaheen8065
    @ziyashaheen8065 2 года назад

    main do din se pareshan ho rhi thi screen ko dynamically swipe krne k liye aapki vedio se clear ho gya thanks a lot.plz make a vedio about registration form, login ,forgot password sing ap with phone number and facebook and store data also.

  • @zahidshaikh3122
    @zahidshaikh3122 2 года назад +2

    This is one Hell of a Tutorial, Major concepts are covered very nicely, Thanks!.

  • @crisdolister
    @crisdolister Год назад

    Hello Pradip. I just wa'na to say Thanks for this video. I could learn so much about that!Great Video!Congratulations!

  • @darryl_young
    @darryl_young 4 года назад +1

    Thanks for sharing, Pradip. That was really useful!

  • @MBkingsoft
    @MBkingsoft 8 месяцев назад

    Well done. Clear and to the point. Kudos 🎉 You just got a new subscriber

  • @rohan_webdev
    @rohan_webdev 4 года назад +2

    That was really easy to understand. Great Job!

  • @regiskla7523
    @regiskla7523 7 дней назад

    Hi Pradip, very good job and very good explanations. Thank you 😊

  • @codeblood87
    @codeblood87 4 года назад

    Today i have Finally Done It.. Thanks a lot broo.. I'm the big fan of your channel.

  • @surajmohanty528
    @surajmohanty528 3 года назад

    Great bro , you are the awesome tutor in react native i ever seen

  • @estilowolff
    @estilowolff 4 года назад +2

    Thank you so much! This is a perfect example

  • @db5443-j8l
    @db5443-j8l 4 года назад

    Nice. Clean. Straight to the point.

  • @jotaxd_
    @jotaxd_ 4 года назад +1

    Good kid, you've improved your videos, keep going and more RN

  • @devorer77
    @devorer77 2 года назад

    really useful react-native tutorial. Thank you!

  • @unknownman1
    @unknownman1 4 года назад +2

    Thank u so so so much. I needed this for my personal app.❤️❤️❤️❤️❤️

  • @ravikumar-wy3fj
    @ravikumar-wy3fj 4 года назад

    Watched it before liking♥️ because it's obvious content from your channel is always awesome 👌😊

    • @itzpradip
      @itzpradip  4 года назад

      Thanks for your love & support 🙂

  • @phsan8272
    @phsan8272 3 года назад

    You are amazing!! Thank you for your tutorial!!

  • @digvijaysinghthakur2903
    @digvijaysinghthakur2903 3 года назад

    Very helpful tutorial...Thanks man

  • @MrAnu005
    @MrAnu005 4 года назад

    Awesome content as usual, keep up the good work

  • @anggaawijaya
    @anggaawijaya 4 года назад

    Nice tutorial! Thank you so much!

  • @nattapatsiripin4975
    @nattapatsiripin4975 3 года назад

    Thank you so much, you made my day

  • @chandrasekharmalla
    @chandrasekharmalla 4 года назад +10

    Hey debnath brother this time you have directly started from app preview but when you shift from Expo workflow to bare workflow it would be better if you start from scratch because people like me will get confused please make a video as creating project in bare react native thanks if you did already please drop link in reply

  • @gauthamvijayan
    @gauthamvijayan 4 года назад

    Terrific tutorial!! Thanks!

  • @prasathwebby1789
    @prasathwebby1789 4 года назад

    Nice one brother, Keep going...😊😊

  • @JavaScriptCentric
    @JavaScriptCentric 3 года назад

    Good Job Pradip..

  • @arthursiloka7437
    @arthursiloka7437 Год назад +1

    Hi, thanks for the tutorial. I have a bug though, the image, title and subtitle are not showing. What can be wrong? any fix?

  • @elhadjioumar8530
    @elhadjioumar8530 4 года назад +1

    First , nice video
    Can't wait for the next
    You are the best ♥️♥️

    • @itzpradip
      @itzpradip  4 года назад

      Thanks for your love & support.🙂

  • @aidenlee6745
    @aidenlee6745 4 года назад

    Thank you for good lecture. It is very helpful. ^^

  • @guribeirodev
    @guribeirodev 3 года назад

    thanks, it just helps me a lot.

  • @syedmahadbukhari7916
    @syedmahadbukhari7916 3 года назад

    Great job man i respect your efforts :) love from pakistan.

  • @alkesh.jethava
    @alkesh.jethava 4 года назад

    Awesome and very very very useful video, 😍😍

  • @videowithoutediting4097
    @videowithoutediting4097 2 года назад

    great explanation

  • @youngfather320
    @youngfather320 3 года назад

    Clearly nice work bro

  • @samanthamonteiro1910
    @samanthamonteiro1910 3 года назад +3

    Hi Pradip, Thank you for the great tutorial . Could you please tell me if the onboarding screen would be shown when the app is updated from the app store for instance ? Or would we need a separate flag to check that ?

  • @TheEngineeredArt
    @TheEngineeredArt 4 года назад +1

    Just curios what are you using for the animation at the start of the video?

  • @rakeshpk4991
    @rakeshpk4991 2 года назад

    Thanks for the video!

  • @saqlainabid4479
    @saqlainabid4479 3 года назад

    Sir please continue making this project Social App with firebase...It is very helpfull tutorial please continue it...

  • @alishahanshah5774
    @alishahanshah5774 2 года назад +1

    There is a bug I guess. At the time of first launch if you not finish it and close the app, then also the onboard-swipeer does not come up. Kindly check and provide the solution.

  • @rn-mania
    @rn-mania 4 года назад +3

    really cool content, thank u !!!
    Please answer me, where you get this images, it is very beautiful?))

  • @mayureshs80
    @mayureshs80 4 года назад +3

    Thank you for this good tutorial. Is the boilerplate created with expo or react native ?

  • @siddhartha1096
    @siddhartha1096 3 года назад

    Sir, please make a video for how to add "splash screen" in this app... It would be very useful for us..
    And it is great to learn from your videos

  • @alpishjain1317
    @alpishjain1317 3 года назад +1

    Thank you for this great tutorial! I just have one doubt that when will null be returned ? like you have set isFirstLaunch to null so when will that case happen?

  • @yusuft.3587
    @yusuft.3587 4 года назад

    Thank you :)) you have a good heart

  • @Phenom161000
    @Phenom161000 4 года назад

    Great tutorial !!

  • @beatsburst4848
    @beatsburst4848 4 года назад +1

    Can you make one video on how can we stop our hardware backpress in stacknavigator because i dont want my stack to go back when i press hardware back button
    i am unable to find any good tutorial on internet

  • @shantanu277
    @shantanu277 4 года назад +2

    Attempted import error: 'ViewPropTypes' is not exported from 'react-native-web/dist/index'.
    'ViewPropTypes' is not supported in 'react-native-web' v12.0 onwards

    • @gangstacat_t
      @gangstacat_t 4 года назад

      same thing

    • @shantanu277
      @shantanu277 4 года назад

      @@gangstacat_t we can only view the app in emulator or In our mobile. As the View PropTypes in Onboarding screen is not supported in web. You can only view it in your phone or emulator.

  • @ZaimisAngelos
    @ZaimisAngelos Год назад

    How can I change the background color of bottom navbar? I mean, the grey bar? Thanks in advance.

  • @natarajanraju4198
    @natarajanraju4198 3 года назад

    Hi.. while setting up, am getting the following error...Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager. Can someone please help

  • @lyazidkabbaj1194
    @lyazidkabbaj1194 4 года назад +2

    Thank you so much! Quick question, how come everytime you launch your app your logo appears before the first screen is loaded?

    • @deanrivers
      @deanrivers 4 года назад +1

      I believe that’s the splash screen

  • @user-rk6dr9eh6i
    @user-rk6dr9eh6i 4 года назад

    we share same state . we r with u

  • @sam-u-el
    @sam-u-el 4 года назад

    DUDE !! thank you man ...

  • @shubhamguptachannel3853
    @shubhamguptachannel3853 2 года назад

    Hi Pradip thanks 🙏

  • @krishnasoni8979
    @krishnasoni8979 2 года назад

    Thank you very much sir...

  • @andayismayilzade1897
    @andayismayilzade1897 4 года назад +5

    Great job! Your vs code fonts are pretty awesome, can I get the name of those?

    • @itzpradip
      @itzpradip  4 года назад +1

      I'm using Fira Code

    • @andayismayilzade1897
      @andayismayilzade1897 4 года назад +1

      @@itzpradip Thank you a lot. You're doing incredibly useful content, just keep going!

  • @jotikumari9533
    @jotikumari9533 3 года назад

    hi sir, can you plz tell how to customize bottom bar background.

  • @capcodes
    @capcodes 3 года назад

    is there a way that i can edit the size of the image i am using image styles container properties but its now not showing my text

  • @alboniadennisjosem.2364
    @alboniadennisjosem.2364 3 года назад

    what key cmd did you use to insert the elongated equal operator and 3 line equal sign?

  • @ASNxNISHANT
    @ASNxNISHANT 3 года назад

    Hello..after writing the asyn storage codes and opening the emulator. I am getting this error
    Error: App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
    Can you please guide me what am I doing wrong

  • @nkhiter9048
    @nkhiter9048 4 года назад

    i am using lottie json file instead of using image ,when i am going to next page animation was paused.what can i do there ,my code is below
    const done=({...props})=>{
    return(

    Go To Home


    )
    }
    export default function Lottie({navigation}) {

    return (
    navigation.replace('Main')}
    onDone={()=>navigation.navigate('Main')}
    bottomBarColor="white"
    transitionAnimationDuration={500}
    pages={[
    {
    backgroundColor: '#fff',
    image: ,
    title: 'You Are a Star',
    subtitle: 'Share your talent with the world it\'s simpler than ever before just Record upload and post your video ',
    },
    {
    backgroundColor: '#fff',
    image: ,
    title: 'Challenge others',
    subtitle: 'You are no lesser than any other ,Prove it by responding to the challenges,just a quick Tab on \'challenge Me button .Let the World decide',
    },
    {
    backgroundColor: '#fff',
    image: ,
    title: 'Challenge me',
    subtitle: 'Share your talent with the world it\'s simpler than ever before just Record upload and post your video',
    },
    {
    backgroundColor: '#fff',
    image: ,
    title: 'Group Show off',
    subtitle: 'Share your talent with the world it\'s simpler than ever before just Record upload and post your video',
    },



    ]}
    />
    )
    }

  • @kunchalasai
    @kunchalasai 4 года назад +1

    Hi Pradip always been a great fan of your videos. Please keep up the good work . Can u pls do a video on Appstate, for example if a user force quits his applications how can we handle ??

    • @itzpradip
      @itzpradip  4 года назад

      Thanks for your suggestion

  • @ehteshamulhaq604
    @ehteshamulhaq604 3 года назад

    Sir, You have set async.getitem(). where you declare setItem()?

  • @hansderly
    @hansderly 4 года назад

    Nice tuto dude. Amazing!👍
    What's the name of the song in the intro?

  • @jakehuang4697
    @jakehuang4697 4 года назад

    Hi, Pradip. I am wondering if you could share the starting files for this video. I type everything in my file, it doesn't work. It says : TypeError: Object(...) is not a function

  • @jamars434
    @jamars434 3 года назад

    Hi, can u tell me what version of node js are you using in this project?

  • @DineshKumar-mc6od
    @DineshKumar-mc6od 4 года назад +1

    Hope help more for everyone!

  • @vijaysaini83
    @vijaysaini83 3 года назад

    When i am using SkipButtonComponent its creating button there but in your tutorial its looking like link... why ?

  • @socialmedia5587
    @socialmedia5587 4 года назад

    i am facing error
    Failed to compile.
    C:/Users/saifu/OneDrive/Desktop/react_work/demo3/screens/LoginScreen.js
    Module not found: Can't resolve '../components/FormButton' in 'C:\Users\saifu\OneDrive\Desktop
    eact_work\demo3\screens'
    but i have added these file in specific folder.
    please solve this....

  • @ezhilarasansubbarayan7231
    @ezhilarasansubbarayan7231 3 года назад

    What is already launched item inside asyncstorage.getitem pls explain

  • @TheGutsygames
    @TheGutsygames 3 года назад

    react-native-community/async-storage npm was depreciated, can u please suggest me with different npm

  • @rifad4u
    @rifad4u 4 года назад

    can u pls tell me , how to skip the onboard screen when we implementing navigation in react native v4

  • @aswinkumar3431
    @aswinkumar3431 4 года назад

    Thank you so much!

  • @arihanthirawat6574
    @arihanthirawat6574 4 года назад

    for me the images are not loading and also the swiper is not working properly . I am using expo cli. Can you help me please.

  • @joaquinre5677
    @joaquinre5677 4 года назад

    Hey!! Amazing video series! I have a doubt, the onboarding-swiper package doesn't work on web but only on android or iPhone?

  • @diegovictor3984
    @diegovictor3984 3 года назад

    Asyncstorage is deprecated. What would be the alternative?

  • @rizwanam4624
    @rizwanam4624 4 года назад +1

    Nice one sir..Can you do OTP verification login video.

  • @leonelkahameni
    @leonelkahameni 4 года назад

    Thanks for this video! It's well explained. What's the name of your vs code font please ?

  • @talhaazeem3250
    @talhaazeem3250 4 года назад

    kindly tell me which Theme of Visual Studio your are using.
    I liked it

  • @sumitsingh1093
    @sumitsingh1093 3 года назад

    kindly share the source Code specailly images..... i want to these images ..but couldn't find...meanwhile you are doing amazing

  • @pradeeppant7706
    @pradeeppant7706 3 года назад

    want to add previous button instead of skip button. so How can I?

  • @swapnilshewale6503
    @swapnilshewale6503 4 года назад +2

    Create vidio for How to desigin responsive UI.

  • @ogulcankarayel5625
    @ogulcankarayel5625 4 года назад

    Please,could you make a video about responsive ui in react native with orientation changes dynamically

  • @StarBattle08
    @StarBattle08 4 года назад

    why not set the initial isFirstLaunch state to True / false? why null? so you'd only need 2 if statement and not 3

  • @snatjz
    @snatjz 3 года назад

    u are awesome bro

  • @saikrishnapachala
    @saikrishnapachala 4 года назад

    Hi, pradeep mostly u use dependencies is that fine for production quality, does it also increase app size? Is it OK

    • @arwysyah2400
      @arwysyah2400 4 года назад

      I think he didnt use for production , just to share for us, I thought him have high level of algorithm, cause honestly in this video i think quite easy to create with scrollView and animation move, and just playing with index of image

    • @itzpradip
      @itzpradip  4 года назад

      Dependencies will increase the size but also you should note that when a library doesn't have a basic feature like navigation in-built, you have to learn to use and know more dependencies. Also with v0.60+ rn making its core library more leaner as a result now you've to install asyncstorage as another dependency. So there is both advantage & disadvantages involved. If you want to create an app with more feature and functionality you've to install more & more dependencies, also in the other hand if your app is a simple one with a leaner core library the app size will be less. As Kenzo said it is easy to implement to achieve this ui with scrollview and animation, I have already created a video with these to implement slider in my recent react native maps tutorial. So you/others can check that tutorial as well. But in this tutorial there are 2 parts, ui & user flow.

  • @safiyanaazshaikh2546
    @safiyanaazshaikh2546 4 года назад

    TypeError: Cannot read property 'style' of undefined
    Module.F:\DoneWithIT
    ode_modules
    eact-native-onboarding-swiper\src\Page.js
    F:/DoneWithIT/node_modules/react-native-onboarding-swiper/src/Page.js:58
    sir , I am stuck on this error ...Please help

    • @u_zet
      @u_zet 3 года назад

      @java script same here are you using expo cli ?

    • @yosramh1283
      @yosramh1283 3 года назад

      @@u_zet I'm using expo and I got this:TypeError: react_native_web_dist_index__WEBPACK_IMPORTED_MODULE_3__.ViewPropTypes is undefined

  • @KiranKumar-sb3ti
    @KiranKumar-sb3ti 4 года назад

    Amazing bro.

  • @sebitti8107
    @sebitti8107 4 года назад

    Hi. What vscode theme u use?

  • @vuongqtvn
    @vuongqtvn 3 года назад

    Nice tutorial

  • @khayTheking
    @khayTheking 3 года назад

    How do i style those buttons next and skip

  • @rugschat9586
    @rugschat9586 2 года назад

    Great work

  • @abhisekray9622
    @abhisekray9622 3 года назад

    Is this tutorial only for Mac users. because I am window user, so, I faced many errors

  • @sivasham
    @sivasham 4 года назад

    i am new for learning react native. can i know which editor your using

  • @adityakaveri9810
    @adityakaveri9810 4 года назад

    Sir, can we export json file in cloud firestore??

  • @Ayurgoodness
    @Ayurgoodness 2 года назад

    Hey , Thanks for such awesome tutorial, I am using it for android emulator, but installing it makes a small portion of top screen cut throughout the app . What do I need to fix?

  • @vignesh-l3i
    @vignesh-l3i 2 месяца назад

    bro where did u found onbarding images ??

  • @pardeepkhli2532
    @pardeepkhli2532 2 года назад

    hello guys please solve my issue, can we use image on background?

  • @TrialsFromTly
    @TrialsFromTly 3 года назад

    How do we do this by the retrive token

  • @linuxstudy1
    @linuxstudy1 4 года назад

    amazing thank you

  • @expl0itix
    @expl0itix 4 года назад

    Hi Pradip. What about search bar?)