React-native-reanimated: (measure) method cannot be used on RN side!

[Daavidaviid]

Description

When I use the measure function like that :

  const style = useAnimatedStyle(() => {
    const measured = measure(aref);

    return {
      width: measured.width,
      height: measured.height,
    };
  });

I get the error message :
(measure) method cannot be used on RN side!

Screenshots

Steps To Reproduce

1.

Expected behavior

Actual behavior

I'd like for this measure to work

Snack or minimal code example

Package versions

• React:
• React Native:
• React Native Reanimated: alpha 5

[likern]

@Daavidaviid Could you provide full component code?

[Daavidaviid]

Sure. Here it is :

interface Props {}
export const NotifPlayground = memo(({}: Props) => {
  const oscillation = useSharedValue(1);
  const aRef = useAnimatedRef();

  useEffect(() => {
    oscillation.value = repeat(withTiming(10, { duration: 1000 }), -1, true);
  }, [oscillation.value]);

  useDerivedValue(() => {
    const width = measure(aRef).width;
    console.log({ width });
  });

  const style = useAnimatedStyle(() => {
    return {
      borderWidth: oscillation.value,
    };
  });

  return (
    <Animated.View ref={aRef} style={styles.container}>
      <Animated.View style={styles.cc}>
        <Animated.View style={[styles.circle, style]} />
      </Animated.View>
    </Animated.View>
  );
});

And the funny thing is, if I comment the content of the useDerivedValue callback, and relaunch the app, when I hot reload after I uncomment, it works. But the launching it without the comments it crashes with (measure) method cannot be used on RN side!

[a-eid]

having the same issue.

[terrysahaidak]

Unfortunately, there is no sync measure on the RN side right now. useAnimatedStyle is called on RN side to get the initial state. I would suggest to wrap it in try catch for now.

But most probably for the initial call in useAnimatedStyle it will return null for all the measurements anyway once we "fix" it.

[terrysahaidak]

Also, could you provide real life example so we could help to workaround it at least for you because current usage doesn't make any sense :)

[a-eid]

@terrysahaidak this doc example doesn't work and raises the above error.

```
const Comp = () => {
const aref = useAnimatedRef();

useDerivedValue(() => {
const measured = measure(aref);
// ...
});

return ;
};
``

[terrysahaidak]

Will it be ok if the initial value was null? Because in order to have "initial styles" for view which you render and then measure, we need to run everything on the RN side first.

[a-eid]

@terrysahaidak hmm, so when do u suggest is appropriate to measure a certain view ?

let's say I'm doing some sort of an accordion & I wanna measure the children height to be able to toggle it on / off ( items are closed by default ).

when would I measure the height ?

• Item
  
  
  
  • child 1
  
  
  • child 2
  
  
• Item 2
  
  
  
  • child 1
  
  
  • child 2
  
  
  • child 3
  
  
• Item 3
  
  
  
  • child 1
  
  
  • child 2
  
  
  • child 3
  
  

[terrysahaidak]

Check out the measure example. It's doing exactly this.The measure function is being executed in the tap handler.

[a-eid]

will do thank you @terrysahaidak