I am using LottieView from ‘lottie-react-native’ to render a json video file in my app. The file is 35Mb.
The video is lagging for a second then plays. The issue is, before the video renders and starts playing an empty screen is shown which I do not want.
This is my React component:
const Guide = () => {
const { checkOSVersion } = useGuide();
const { setGuide, guide } = authStore();
const navigation = useNavigation<MainStackParamList>();
const [isAnimationFinished, setIsAnimationFinished] = useState(false);
useEffect(() => {
if (!guide) {
if (isAnimationFinished) {
handleSkip();
}
}
}, [isAnimationFinished]);
const handleSkip = () => {
setGuide();
navigation.navigate('TabStack', { screen: 'Dashboard' });
};
const handleAnimationFinish = () => {
setIsAnimationFinished(true);
};
return (
<Box flex={1}>
{checkOSVersion && (
<LottieView
autoPlay
loop={false}
resizeMode="cover"
style={{ flex: 1 }}
onAnimationFinish={handleAnimationFinish}
renderMode="AUTOMATIC"
source={require('./guidevideo.mp4.lottie.json')}
speed={1}
/>
)}
</Box>
);
};
export default Guide;
I tried to “pre-load” the video like this:
const [videoReady, setVideoReady] = useState(false);
const handleSkip = () => {
setGuide();
};
return (
<Box flex={1}>
<LottieView
autoPlay
loop={false}
resizeMode="cover"
style={{
flex: 1,
position: 'absolute',
width: '100%',
height: '100%',
opacity: videoReady ? 1 : 0,
}}
onAnimationFinish={handleSkip}
hardwareAccelerationAndroid={true}
renderMode="HARDWARE"
source={require('./combined.mp4.lottie.json')}
speed={1}
onAnimationLoaded={() => setVideoReady(true)}
/>
</Box>
);
};
and also tried setting hardwareAccelarationAndroid, and rendermode to hardware, but did not see a difference. Any help would be greatly appreciated. Thanks!