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

[@ajalasegun1]

Thanks for DEVember!

[@_marcobaez]

Amazing tutorial!! Thank you Vadim!!

[@notjustdev]

Appreciate it, thanks! 🙌

[@usmaniCodes]

Awesome Sir, Done with Day 2. ❤❤

[@notjustdev]

That's great, keep going 🚀

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

[@ricardohernandezmendez4207]

Awesome Video Tutorial!

[@notjustdev]

Thanks!

[@lokindradangi]

Thanks man❤

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

[@kntbruh]

nice!

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

[@user-ob9mt6mx2y]

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

[@JohnWickXD]

Sir how to make Onboarding screen only once😢

[@emporteme]

Well
Guess I better use 3 different pages

[@user-ob9mt6mx2y]

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