Wrong State Value Inside Reanimated Callback

[ngseba]

I have a reanimated callback that does multiple actions based on the state of the container. However if the state changes from 'red' to 'blue' ( before the callback is called ) at the time in which the callback is called I expected it to see that the state is 'blue' and so the callback should do that specific action according to the 'blue' state. Instead the callback "sees" the initial state value only, which in my case is 'red'. The text that is rendered changes its value according to the state (and it shows blue) , however when the callback occurs it will still appear to be red in the scope of the callback function.

I have a guess that this is happening because all the reanimated code is sent over to the native side at the start of the application (and then the state is red, initially). But I'm not quite sure that this is what is going on.

Short example:

import * as React from 'react';
import { LongPressGestureHandler, State } from "react-native-gesture-handler";
import { View, StyleSheet, Text, Button } from "react-native";
import { useState } from "react";
import Animated, {event, block, call, set, useValue } from "react-native-reanimated";


export const TestContainer = () => {
  const [color, setColor] = useState('red');
  const handlerState = useValue(State.UNDETERMINED);

  const problematicCallback = () => {
    if(color === 'red'){
      console.log('warm color')
    } else if(color === 'blue'){
      console.log('cold color')
    }
  }

  const onPress = () => setColor('blue')

  const onHandlerStateChange = event([
      {
        nativeEvent: ({state}) => block([
          set(handlerState,state),
          call([],problematicCallback)
        ])
      }
    ]
  )

  return(
    <View style={{flex:1}}>
      <LongPressGestureHandler  onHandlerStateChange={onHandlerStateChange}>
        <Animated.View style={styles.box}/>
      </LongPressGestureHandler>
      <Text>{color}</Text>
      <Button title={'Change state to blue'} onPress={onPress}/>
    </View>
  )
}

const styles = StyleSheet.create({
  box : {
    backgroundColor:'red',
    width:200,
    height: 200,
  }
})

At first, when pressing on the red box, the LongPressGestureHandler, it prints out 'warm color' which is expected because the state is now red. But then if I press on the button, the state switches to blue, by pressing again on the LongPressGestureHandler now I should see that it prints out 'cold color'. However 'warm color' is displayed and even though the component re-rendered and it's aware of the state change, that callback for some reason is not.

Is there any workaround for this, am I missing something?

[ngseba]

Upon better reading the documentation I made it work by using the useCode hook. Hopefully I can apply the same thing on the actual project I have to work on.

Here's a snippet of the working solution if anyone else has this problem:

import * as React from 'react';
import { LongPressGestureHandler, State } from "react-native-gesture-handler";
import { View, StyleSheet, Text, Button } from "react-native";
import { useState } from "react";
import Animated, { event, block, call, set, useValue, useCode, onChange } from "react-native-reanimated";


export const TestContainer = () => {
  const [color, setColor] = useState('red');
  const handlerState = useValue(State.UNDETERMINED);

  const problematicCallback = () => {
    if(color === 'red'){
      console.log('warm color')
    } else if(color === 'blue'){
      console.log('cold color')
    }
  }

  const onPress = () => setColor('blue')

  const onHandlerStateChange = event([
      {
        nativeEvent: ({state}) => block([
          set(handlerState,state),
        ])
      }
    ]
  )

  useCode(() =>
    onChange(
      handlerState,call([],problematicCallback)
    ),[color]
  )

  return(
    <View style={{flex:1}}>
      <LongPressGestureHandler  onHandlerStateChange={onHandlerStateChange}>
        <Animated.View style={styles.box}/>
      </LongPressGestureHandler>
      <Text>{color}</Text>
      <Button title={'Change state to blue'} onPress={onPress}/>
    </View>
  )
}

const styles = StyleSheet.create({
  box : {
    backgroundColor:'red',
    width:200,
    height: 200,
  }
})

[jakub-gonet]

When using call you can specify dependencies array. In your original code, it's empty so the callback should trigger on mount / unmount. It should work after you specify some AnimatedNode that's updated alongside your useState variable. IIRC you can store strings in nodes – you can avoid re-renders if you want that (but it also depends on things you're doing in the callback, getting value imperatively isn't best for performance).

useCode should work fine though. You may consider transitioning to v2 as well.