Screen not updated, except if I add a console.log 🤪

[renchap]

Hi there,

I am having a very weird issue that I am not able to troubleshoot after spending a few hours on it.

Summary

I am animating a modal using Reanimated, and sometimes the modal never appears with an animation, but only on the next touch on the device screen / when browsing layout in Flipper.

If I add a console.log call in useAnimatedStyle, then it works flawlessly…

Implementation

Reanimated is used to display a modal panel, using a wrapper around the modal content.

The wrapper keeps its own state (closed, opening, opened, closing) and animates:

• translateY when opening/closing the modal
• height when the modal content changes.

It exposes (through a context) 2 shared values, used by the modal content components to expose:

• totalContentHeight: the total height of the content to display (inner content of a ScrollView)
• contentHeight: the actuel height of the inner ScrollView, computed so it fits the screen

It then uses these values to transition between states, and set an animated view around the component with the needed style.

The initial transition (closed => opening is triggered using useEffect, and the translation animation (appear) does not start until a contentHeight is computed (meaning totalContentHeight has been set by the modal content component).

Click to see sample code (simplified)

const ModalWrapper: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  // this is the modal scrollview content (total content height)
  const totalContentHeight = useSharedValue(0);

  // the scrollview height (less than the total content if it does not fit the screen)
  const contentHeight = useSharedValue(0);

  // padding at the bottom of the modal
  const bottomPadding = useSharedValue(0);

  const openState = useSharedValue<"closed" | "opening" | "opened" | "closing">(
    "closed"
  );

  const { height: screenHeight } = useWindowDimensions();

  // When the component is mounted, let's update the modal
  useEffect(() => {
    openState.value = "opening";
  }, [openState]);

  // When the modal needs to be closed, we dont really close it but launch the animation
  // The real close will be called at the end of the animation
  const hideModal = useCallback(() => {
    openState.value = "closing";
  }, [openState]);

  // react to the various value changes
  useAnimatedReaction(
    () => {
      const padding = 20;

      const maxContentSize = screenHeight - 200 - padding;

      // compute the maximum displayed height for modal content
      return [
        Math.round(Math.min(totalContentHeight.value, maxContentSize)),
        padding,
      ] as const;
    },
    ([height, padding]) => {
      contentHeight.value = height;
      bottomPadding.value = padding;
    },
    [screenHeight]
  );

  const modalAnimatedStyle = useAnimatedStyle(() => {
    let height = contentHeight.value;

    let translateY = -height || 10000; // initially we render the modal way below the fold, so its invisible until displayed and content height calculated

    switch (openState.value) {
      case "closed":
        // do nothing
        break;
      case "opening":
        if (height > 0) {
          translateY = withSequence(
            // first move it just below the bottom of the screen
            withTiming(height, { duration: 0 }),
            // then do the opening animation
            withTiming(0, { duration: APPEAR_DURATION }, () => {
              openState.value = "opened";
            })
          );

          // If we remove this log, then sometimes the modal does not displays
          // But it always displays when we log?
          // console.log("Modal opened. Do not remove this log.");
        }
        // otherwise we let it be hidden
        break;
      case "closing":
        translateY = withTiming(height, { duration: APPEAR_DURATION }, () => {
          openState.value = "closed";
        });
        break;
      case "opened":
        // animate height when content changes
        height = withTiming(height, { duration: APPEAR_DURATION });
        break;
    }

    return {
      height,
      transform: [{ translateY }],
    };
  });

  return (
    <Animated.View style={[styles.modalContainer, modalAnimatedStyle]}>
      <modalInnerContext.Provider
        value={useMemo(
          () => ({
            actions: {
              showModal,
              hideModal,
            },

            totalContentHeight,
            contentHeight,
            bottomPadding,
          }),
          [
            hideModal,
            showModal,
            totalContentHeight,
            contentHeight,
            bottomPadding,
          ]
        )}
      >
        {children}
      </modalInnerContext.Provider>
    </Animated.View>
  );
};

Issue detail

These tests are done using an iPhone simulator

When opening/closing repeatedly the modal, at some point opening does nothing. The useEffect is triggered, but nothing else happen on the screen.

I can get the modal to appear (instantly, without animation), if:

• If I touch the screen (anywhere)
• If I browse the layout in Flipper without any input in the simulator, after some time (did not find out exactly when)

The very weird thing is that if I uncomment the console.log call in my useAnimatedStyle, then it works flawlessly all the time. I tried to call a dummy function using runOnJS but it does not work, this seems to need to be a console.log call.

I tried to upgrade to Reanimated 3 RC0, the behaviour is the same.

Does somebody have an idea on:

• what could be causing this?
• how can I troubleshoot this further? As it only happens when I dont use console.log, it makes it very hard to pinpoint…