React-native-reanimated: How to control pointerEvents props with a sharedValue ?

[Daavidaviid]

Description

I'd like to control the pointerEvents value of an Animated.View, so I was thinking doing something like :

Code

  const translateY = useSharedValue(0);

  ...

  const animatedProps = useAnimatedProps(() => {
    const pointerEvents = translateY.value === 1 ? undefined : 'box-none';

    return {
      pointerEvents,
    };
  });

  return (
    <Animated.View {...animatedProps} style={styles.container}>
      // CONTENT
    </Animated.View>
  );

Except it doesn't work the way I expected it to work. Someone knows how to solve this ?
Thanks.

Package versions

• React: latest
• React Native: 0.63.2
• React Native Reanimated: alphaV4

ANSWER :
I found this issue right after :
https://github.com/software-mansion/react-native-reanimated/issues/895

Got it to work like that :

  const translateY = useSharedValue(0);

  ...

  const animatedProps = useAnimatedProps(() => {
    const pointerEvents = translateY.value === 1 ? 'auto' : 'box-none';

    return {
      pointerEvents,
    };
  });

  return (
    <Animated.View {...{ animatedProps }} style={styles.container}>
      // CONTENT
    </Animated.View>
  );

[a-eid]

Hi, could u please let us know how you resolved this ?

[Daavidaviid]

At the end of my first message

[a-eid]

@Daavidaviid thank you

[terrysahaidak]

By the way you can use both booleans and strings as shared values :)