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",
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",