Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Modal not showing the LottieView #1141

Description

@chatphonhasser

Description

Using the Modal from react-native does not show the LottieView

Steps to Reproduce

Using Lottie as usual

Expected behavior: [What you expected to happen]
It should work everywhere

Actual behavior: [What actually happened]
Not showing

Minimal reproduction

`import React, { useRef } from "react";
import LottieView from "lottie-react-native";

const LoadingAnimation: React.FC = () =>{
// Define the type of the ref to match LottieView
const animationRef = useRef(null);

const play = () => {
console.log("animationRef", animationRef);
animationRef.current?.play();
}
return (
<LottieView
ref={animationRef}
onLayout={() => play() }
style={{
height: 50,
justifyContent: 'center',
alignItems: 'center',
}}
source={require("../assets/json/astronot.json")}
autoPlay
loop
/>
);
}

export default LoadingAnimation;`

`import React, { useMemo } from 'react';
import { View, StyleSheet, Modal } from 'react-native';
import { useLoading } from './LoadingContext';
import LoadingAnimation from './LoadingAnimation';

const UniversalLoadingComponent: React.FC = () => {
const { isLoading } = useLoading();

const loadingAnimation = useMemo(() => (

), []);

return (
<Modal visible={isLoading} animationType="none" transparent style={{
flex: 1, justifyContent: 'center',
alignItems: 'center',
}}>

{/* /}
{/
{loadingAnimation} */}



)
};

const styles = StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: "red"
},
});

export default UniversalLoadingComponent;
`

React Native Environment

"react": "^18.2.0",
"react-native": "^0.73.1",

Lottie Version

Version: "lottie-react-native": "^6.4.1",

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs infoNeeds info from issue provider / does not provide reproducible

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions