React Native Reanimated Measure view flattening

Question

I am aware that there was am issue with view flattening which can be found under this thread https://github.com/software-mansion/react-native-reanimated/issues/3188 but for me measure does not work despite applying props mentioned in the solution. I have a simple component like so:

import { StyleSheet } from 'react-native';

import Animated, {
  measure,
  useAnimatedRef,
  useAnimatedStyle,
} from 'react-native-reanimated';

import { ToastConfig } from './Toast.types';
import { BaseToast } from './variants/BaseToast';

interface ToastComponentProps {
  data: ToastConfig;
}

const styles = StyleSheet.create({
  wrapper: {
    position: 'relative',
    zIndex: 10,
  },
});

export const ToastComponent: React.FC<ToastComponentProps> = ({ data }) => {
  const aRef = useAnimatedRef<Animated.View>();
  const aStyles = useAnimatedStyle(() => {
    const measured = measure(aRef);
    console.log({ measured });
    return {
      top: 10,
    };
  });
  return (
    <Animated.View style={[styles.wrapper, aStyles]} ref={aRef} collapsable={false}>
      <BaseToast data={data} />
    </Animated.View>
  );
};

as you can see i have both style prop and collapsable false, and despite that i get warning in the console saying that

"[Reanimated] The view with tag 157 gets view-flattened on Android. To disable view-flattening, set collapsable={false} on this component."

The value returned from the measure is null at first and then on ios, I get the results but on android, I get this warning and it is null all the time. I have noticed that if I add position: 'relative' which is in styles.wrapper on the example I get null on ios all the time as well, is this me not knowing how to use it properly is this function to blame and I should be using onLayout?

Also, the return type of measure function is any, and this is not the first project i encounter this problem am I using it wrong? I checked the typings and it should return MeasuredDimensions

  export function measure<T extends Component>(
    ref: RefObject<T>
  ): MeasuredDimensions | null;

And I get any all the time. Thanks for help.

React Native Reanimated Measure view flattening

0 Answers0