Slight delay is needed, otherwise, the animation will happen as navigation is also happening and it won't render the animation correctly

Timeout is to give enough time for the animation to complete before the app navigates away from this screen

taken from renanimated AnimatedComponentProps

I tested on my iPhone 11 and the Google Pixel 6a, and these were the smallest times when the animation was consistently working well

Seems like JS does not have a builtin sleep function. I can still create our own sleep function or would this be a cleaner approach?

onPressBackdrop = () => {
  const navigateBackCallback = () => this.props.navigation.goBackOnce();

  if (this.location !== 'fixed') {
    navigateBackCallback();
    return;
  }

  this.props.setHideTooltip(true);
  setTimeout(navigateBackCallback, 100);
};

git grep sleep, but note my other concerns... ideally we don't need this at all

Also just came across this for layout animations, I think this is actually what we want

Don't think we can just call our normal code from a worklet, but perhaps there's some special way to do it

@ashoat just to clairfy, when you mean root context you mean outside the if/else block correct?

Outside all blocks

I don't know if I am missing something here, but I don't think worklets or the callback that runOnJS calls can be defined in the class. When I define goBackCallback on the class and call it through runOnJS(this.goBackCallback)() I keep getting error...

Will keep digging around, but wondering if there is an alternative approach that would be just as good

I wonder if this has anything to do with why I can't call a function defined in the class