layoutAnimation causes extra blue background on Android while switching between two views

Question

I am using layoutAnimation in a function component to make it appear smoothly. It works well on IOS, but on Android, it will show an extra blue transparent background while I switch from another view to the view using layoutAnimation.

This is my code

const { UIManager } = NativeModules;

UIManager.setLayoutAnimationEnabledExperimental &&
  UIManager.setLayoutAnimationEnabledExperimental(true);

const myFunction = (props) => {
   ...
   useEffect(() => {
            LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
   }, [props.info]); // info is the component data  
  ...
}

Does anyone meet the same issue?

Thx a lot.

Answer 1

LayoutAnimation on Android is experimental so it is not unusual to encounter unusual behaviour. I would recommend using React Native Animated API or react-native-reanimated. However your description indicates that you might have a problem with the opacity from the preset. I'm not sure what you want to animate, but if you don't need the opacity in the animation you might want to try the following code sample.

    LayoutAnimation.configureNext({
        duration: 300,
        update: {
            type: 'easeInEaseOut',
        },
    });