Build an Animated Onboarding Flow in React Native | DEVember Day 2

[@JohnWickXD]

Sir how to make Onboarding screen only once😢

[@АртёмГаджиев-к3э]

I suffered for two days with a problem after adding reanimated - when I swiped, the application crashed (the buttons worked) Maybe someone will encounter this problem, here is the solution: add: runOnJS(true) const swipe = Gesture.Simultaneous( Gesture.Fling().runOnJS(true).direction(Directions.RIGHT).onStart(onBack), Gesture.Fling().runOnJS(true).direction(Directions.LEFT).onStart(onContinue) )

[@notjustdev]

Thanks for sharing!

[@Shasa.t]

Thank you for this, solved the issue for me!!

[@ajalasegun1]

Thanks for DEVember!

[@Wavywahid]

My app crashes when I have Reanimated and try to swipe to left or right. Anybody else have this issue?

[@priyamshah7117]

same error , how did you solve ? and could you figure out what actually is causing the error ?

[@Wavywahid]

@@priyamshah7117 you need to use `runOnJS` when calling an external function in gesture

[@noormuhammad888]

@@priyamshah7117 @Wavywahid . After 3 hours of debugging. I've debugged the issue. It is because the reanimated and gesture handler callbacks works on the UI thread and the onContinue and onBack function we have created are by default run on the JS thread, so we can not use it directly for some reason (idk why). Here is the solution: import Animated, { FadeIn, FadeOut, runOnJS } from "react-native-reanimated"; //swipeForward .onEnd(() => runOnJS(onHandleContinue)()); //swipeBackward .onEnd(() => runOnJS(exitOnboarding)());

[@ot7976]

Had the same, i copied the day2 tsx files from the git repository (day 2 end branch) and all was ok. I couldbt see an obvious difference!

[@АртёмГаджиев-к3э]

I suffered for two days with a problem after adding reanimated - when I swiped, the application crashed (the buttons worked) Maybe someone will encounter this problem, here is the solution: add: runOnJS(true) const swipe = Gesture.Simultaneous( Gesture.Fling().runOnJS(true).direction(Directions.RIGHT).onStart(onBack), Gesture.Fling().runOnJS(true).direction(Directions.LEFT).onStart(onContinue) )

[@usmaniCodes]

hello Sir, whenever I change anything in day2 it goes back to home screen (re-renders) .. even though I change just fonts related setting .. meaning fontSize 5 to 10 .

[@emporteme]

Well Guess I better use 3 different pages

[@maurotwister475]

Amazing tutorial, it´s cool

[@notjustdev]

Thank you! Cheers!🙌

[@_marcobaez]

Amazing tutorial!! Thank you Vadim!!

[@notjustdev]

Appreciate it, thanks! 🙌

[@gabrielemazzola9652]

Great content! Thanks, this was very helpful.

[@notjustdev]

Glad it was helpful 🙌

[@AnmolThakur-vv9lf]

Thanks for the lecture learned too much from it.

[@notjustdev]

You are welcome!

[@usmaniCodes]

Awesome Sir, Done with Day 2. ❤❤

[@notjustdev]

That's great, keep going 🚀

[@kntbruh]

nice!

[@lokindradangi]

Thanks man❤

[@ricardohernandezmendez4207]

Awesome Video Tutorial!

[@notjustdev]

Thanks!