I have this modal called LevelCompletePopup. It takes in parameters visible and onClose.

The issue is when I set the visible = {true}, it displays the gif correctly as expected -

• takes up the entire screen
• entire screen is transparent with 0.2 opacity
• gif is on the screen center.

But as soon as I set visible={visible} from the parameter, the layout changes -

• The screen is not shown with an opacity.
• The gif moves to the top left of the screen.

The incoming parameter visible is set in the parent component in a function like -

const handleLevelComplete = () => {
    console.log ("handleLevelComplete")
    setLevelComplete(!isLevelComple)
}

import { View, Modal } from 'react-native';
import LottieView from 'lottie-react-native';

const LevelCompletePopup = ({ visible, onClose }) => {
    return (
    <Modal transparent animationType='fade' visible={true} onRequestClose={onClose}>
      <View
        style={{
          flex:1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'rgba(0, 0, 0, 0.2)',
        }}
      >
        <LottieView
          source={require('../../assets/confetti/confetti.json')}
          autoPlay
          loop
          style={{ width: 500, height: 500}}
        />
      </View>
    </Modal>
    );
};

export default LevelCompletePopup;

react-native:"0.76.7"