How to use state in React Native Reanimated event with TapGestureHandler

Question

I'm pretty new on react native and i'm stuck... I have an event that handle an animation on a TapGestureHandler button

this.isLoginIn = new Animated.Value(false);
    this.onStateChange = event([
      {
        nativeEvent: ({ state }) =>
          block([
            cond(eq(state, State.END), [
              set(
                this.buttonOpacity,
                ReanimatedUtils.runTiming(new Clock(), 1, 0)
              ),
              set(this.isLoginIn, true);
            ]),
          ]),
      },
    ]);


<TapGestureHandler
      onHandlerStateChange={onHandlerStateChange}
    >
      <Animated.View
        style={{
          ...styles.container,
          ...animatedStyle,
          ...style,
        }}
      >
        <Text style={{ ...styles.text, ...textStyle }}>
          {title.toUpperCase()}
        </Text>
      </Animated.View>
    </TapGestureHandler>

I'm willing to use this isLoginIn value to display different type of forms using this

{this.isLoginIn._value === true ? (
            <LoginInput
              title={"Login"}
              buttonText="Login"
              onPress={() => {}}
              onSignUpPress={() => {}}
            ></LoginInput>
          ) : (
            <LoginInput
              title={"Registration"}
              buttonText="SignIn"
              onPress={() => {}}
              onSignUpPress={() => {}}
            ></LoginInput>
          )}
        </Animated.View>

but this is not working, i don't realy know how to properly ask my question, to find a solution on internet. I tried to use a value in state but this isn't working because it's on a different thread than the UI thread i guess. Someone help me please..

Answer 1

There is no need isLoginIn to be an animated value. Just replace it with a normal state value like so: const [isLoginIn, setIsLoginIn] = React.useState(false); and when your animation is finished just use callback to update your state, use call([], () => setIsLoginIn(true)); instead of set(this.isLoginIn, true); because set doesn't rerender your component and isLoginIn is always false.