React-native-reanimated: Passing a sharedValue as props to a component

[Eduardo-Balistieri]

Description

Basically I created a sharedValue and I want to use it in a child component.
Is there a way to do that?

Code

const App = () => {
    const translateX = useSharedValue(0)

    const gestureHandler = useAnimatedGestureHandler({
        // ...
    })

    const animatedStyles = useAnimatedStyle(() => {
        return {
            transform: [{ translateX: translateX.value }]
        }
    })

    return (
        <View style={styles.container}>
            <PanGestureHandler onGestureEvent={gestureHandler}>
                <Animated.View style={[styles.box, animatedStyles]}>
                    <View style={styles.mainOption}>
                        <Text style={styles.mainContent}>Swipe to remove</Text>
                    </View>

                    <Action x={Math.abs(translateX.value)} />
                </Animated.View>
            </PanGestureHandler>
        </View >
    )
}


const Action = ({ x }) => {
    const size = useSharedValue(x < height ? x : x + (x - height))
    // ...
}

[terrysahaidak]

Pass the shared value as is (not the .value thing) and use useDerivedValue to create a shared value based on that value.

[Eduardo-Balistieri]

Pass the shared value as is (not the .value thing) and use useDerivedValue to create a shared value based on that value.

I tried something like that, but didn't work

const Action = props => {
    const x = useSharedValue(0)

    useDerivedValue(() => {
        const formatedValue = Math.abs(props.x.value)
        x.value = formatedValue
    })
    // ...
}

The solution that I found is using a useless state to force re-render the component, then I get the new values

const Action = props => {
    const [_, setState] = useState(0)

    const x = useDerivedValue(() => {
        const formatedValue = Math.abs(props.x.value)
        setState(formatedValue)
        return formatedValue
    })
    // ...
}

But it appears to be executed in JS thread instead the UI.
Do you have any suggestions?

[terrysahaidak]

in order to pass any value to component, you should use useAnimatedStyle. So just use x in there.

[Eduardo-Balistieri]

in order to pass any value to component, you should use useAnimatedStyle. So just use x in there.

Yes, but about the state? You have another solution?

[terrysahaidak]

What do you need state here for?

[Eduardo-Balistieri]

What do you need state here for?

As I said, with this code I only get the value of the first render

 const x = useSharedValue(0)

    useDerivedValue(() => {
        const formatedValue = Math.abs(props.x.value)
        x.value = formatedValue
    })

The reason of the state is force an update, then I get the new value (props).
Do you have an example passing a sharedValue as props?

[terrysahaidak]

useDerivedValue call returns a shared value which will be updated each time the shared value you used from props is updated. you don't need to have another one.

Also, why do you need your component to rerender?

[Eduardo-Balistieri]

useDerivedValue call returns a shared value which will be updated each time the shared value you used from props is updated. you don't need to have another one.

Also, why do you need your component to rerender?

I'm using a state because useDerivedValue is not updating.
If I print the value inside useDerivedValue its correct, but outside it doesn't change.

[terrysahaidak]

Could you please post a real code here? Unfortunately, I can't understand your intend by the extracted snippets you provided.

[Eduardo-Balistieri]

Could you please post a real code here? Unfortunately, I can't understand your intend by the extracted snippets you provided.

Sure!

• My repository

[terrysahaidak]

Instead of this

   const x = useSharedValue(0)

   useDerivedValue(() => {
      const formatedValue = Math.abs(props.x.value)
      x.value = formatedValue
   })

You should do this:

   const x = useDerivedValue(() => {
      const formatedValue = Math.abs(props.x.value)
      return formatedValue;
   })

useDerivedValue will be executed each time props.x.value has changed. It will result in the change of x.value. So no, x itself won't be recreated, but the .value of it will be the result of useDerivedValue's callback.

Moving to the next part.

if you need the shared value which depends on some other values, you again need to use useDerivedValue. So this

   const size = useSharedValue(
      x.value < height ?
         x.value :
         x.value + (x.value - height)
   )

   const translateX = useSharedValue(
      x.value < height ?
         0 :
         (x.value - height) / -2
   )

should be replaced with useDerivedValue

   const size = useDerivedValue(() =>
      x.value < height ?
         x.value :
         x.value + (x.value - height)
   )

   const translateX = useDerivedValue(() =>
      x.value < height ?
         0 :
         (x.value - height) / -2
   )

And the final part.

Interpolate - is just a function that returns a value. Only the time it's executed. In order for it to return interpolated opacity - you need to use it inside the useAnimatedStyle like so

   const textStyles = useAnimatedStyle(() => {
     const opacity = interpolate(
       size.value,
       [height - 5, height + 5],
       [0, 1]
     );

      return {
         opacity: opacity
      }
   })

In this useAniamtedStyle, we access size.value so it subscribes for its changes. And now each time the size changes - we rerun the callback. So that interpolation function will be re-executed too. And will return a new value based on the current size.value.

[Eduardo-Balistieri]

Nice! It works, thank you very much.