`callbackNode` or `enabledBottomInitialAnimation` works incorrectly?

[jtomaszewski]

I pass callbackNode to BottomSheet like this:

  const visibilityAnimValRef = useRef(new AnimatedValue<number>(1));

  return (
    <>
      <SheetBackdrop
        sheetVisibilityAnimVal={visibilityAnimValRef.current}
      />
      <BottomSheet
        enabledBottomInitialAnimation
        callbackNode={visibilityAnimValRef.current}
        snapPoints={[350, 0]}
      />
    </>
  );

And then use it to show a backdrop:

function SheetBackdrop({
  sheetVisibilityAnimVal,
}: {
  sheetVisibilityAnimVal: Animated.Value<number>;
}): React.ReactElement {
  const animatedOpacity = Animated.interpolate(sheetVisibilityAnimVal, {
    inputRange: [0, 1],
    outputRange: [0.4, 0]
  });

  return (
      <Animated.View
        style={[
          StyleSheet.absoluteFill,
          { backgroundColor: Colors.BLACK },
          {
            opacity: animatedOpacity
          }
        ]}
      />
  );
}

However when component gets initialized on iOS, it starts with the backdrop not being visible. Why?

See this video: https://www.dropbox.com/s/1trejw9s9zr4obf/rpreplay_final1591260759.mp4?dl=0

[jtomaszewski]

I think it might be related to enabledBottomInitialAnimation option. It doesn't work well. After component is mounted, animation looks weird or doesn't work at all, on both iOS and Android.