React Native - изменение содержимого экрана при анимации

Question

У меня есть анимированный экран с использованием обработчика жестов и реанимированные библиотеки. Моя проблема в том, что я пытаюсь изменить содержимое экрана во время анимации. Я заставил это работать, но, честно говоря, я на 100% уверен, что это не лучшее решение (или это может быть, но нужно больше конфигураций)

Код:

const onStateChangeLogin = event([
  {
    nativeEvent: ({state}) => block([
      cond(eq(state, State.END), set(buttonOpacity, runTiming(new Clock(), 1, 0))), call([], () => handleTapLogin())
    ])
  }
]);

В вызов функции, я пытаюсь изменить содержимое:

const handleTapLogin = (e) => {
setContent(<Login />)}

Это Animated.View:

<TapGestureHandler onHandlerStateChange={onStateChangeLogin}>
        <Animated.View style={{...styles.button, opacity: buttonOpacity, transform:[{translateY: buttonY}]}}>
          <Text style={{...styles.buttonText, color: colors.white}}>{strings.signin}</Text>
        </Animated.View>
      </TapGestureHandler>

И содержимое экрана находится в нижней части моего «возврата» Метод:

    ....</Animated.View>
        </TapGestureHandler>
        {content}
      </Animated.View>
    </View>
  </Container>

Так что это работает сейчас, но слишком медленно. Я думаю, потому что функция вызова в событии asyn c. Итак, что происходит сейчас, содержимое меняется, но иногда мне нужно ждать 2-3 секунды, чтобы увидеть правильный экран.

Я уже пытался использовать 'listener' в функции события:

const onStateChangeLogin = event([
  {
    nativeEvent: ({state}) => block([
      cond(eq(state, State.END), set(buttonOpacity, runTiming(new Clock(), 1, 0))), call([], () => handleTapLogin())
    ], {
      listener: () => handleTapLogin
    }
  )
  }
]);

И я также пытался использовать onGestureEvent и onHandlerStateChange вместе как:

<TapGestureHandler onGestureEvent={onStateChangeLogin} onHandlerStateChange={handleTapLogin}>
        ...
</TapGestureHandler>