Passing a sharedValue as props to a component

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]

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.

[nitin-jotwani-fc]

Update: Was able to see animation if I apply in useAnimatedStyle. But, if I want to access value to do something conditional inside child component, that I’m unable to do. size variable doesn’t update outside. But works fine when applied as an animation using useAnimatedStyle.