Modal not showing the LottieView

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

[batilio]

I got the same issue, any updates?

[TheRogue76]

Hi. Thank you for opening an issue. Is the new architecture enabled?

[batilio]

Hi. Thank you for opening an issue. Is the new architecture enabled?

Hi, thank you for the answer.

The new architecture is disabled.

After some research I found the BREAKING CHANGES #992 that removed the default width. After apply my own width, height and/or aspectratio the behaviour was as expected.

My problem is solved.

[TheRogue76]

@chatphonhasser How about you? I see that your code also only mentions height

[chatphonhasser]

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

const styles = StyleSheet.create({
fullScreen: {
position: 'absolute',
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
justifyContent: 'center',
alignItems: 'center',
zIndex: 1000, // Ensures it's on top of other components
},
});

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={styles.fullScreen}
source={require("../assets/json/Icon-Only (2).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(() => (

), []);
if(isLoading) {
return (<>
{loadingAnimation}
</>
)
}
else{
return null;
}
};

export default UniversalLoadingComponent;
`
I am using this then it worked.

[TheRogue76]

This code sample is missing quite a bit that i can't figure out (What's in the loadingAnimation, what useLoading is doing, what is in the animation file, etc). Please provide a self contained code example or a reproducible repo so i can test things out. Otherwise, if it is working for both of you, i'll close the issue.

[chatphonhasser]

As I said it is working.

The point here is the style(unable to style the component within a View) and how the component is enclosed. Which is the issue I think. I cannot put it in a View tag.

<View>
    <LottieView/>
</View>

loadingAnimation ==> I provided the code

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={styles.fullScreen}
source={require("../assets/json/Icon-Only (2).json")}
autoPlay
loop
/>
);
}

export default LoadingAnimation;

[TheRogue76]

This is Lottie's Fabric example:

import React from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import LottieView from 'lottie-react-native';

const color = {
  primary: '#1652f0',
  secondary: '#64E9FF',
};

const remoteSource = {
  uri: 'https://raw.githubusercontent.com/lottie-react-native/lottie-react-native/master/apps/paper/src/animations/Watermelon.json',
};

const dotLottie = require('./animations/animation_lkekfrcl.lottie');

const localSource = require('./animations/LottieLogo1.json');

const App = () => {
  const [source, setSource] = React.useState(localSource);
  const [isLoop, setLoop] = React.useState(false);

  return (
    <View style={styles.container}>
      <LottieView
        key={source + isLoop}
        source={source}
        autoPlay={true}
        loop={isLoop}
        style={styles.lottie}
        resizeMode={'contain'}
        colorFilters={colorFilter}
        enableMergePathsAndroidForKitKatAndAbove
        onAnimationFinish={() => {
          console.log('Finished');
        }}
        onAnimationFailure={e => {
          console.log('Error ', {e});
        }}
      />
      <View style={styles.controlsContainer}>
        <TouchableOpacity
          onPress={() => {
            setSource(localSource);
          }}
          style={styles.button}>
          <Text style={styles.text}>{'Local animation'}</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => {
            setSource(remoteSource);
          }}
          style={styles.button}>
          <Text style={styles.text}>{'Remote animation'}</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => {
            setSource(dotLottie);
          }}
          style={styles.button}>
          <Text style={styles.text}>{'DotLottie animation'}</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => {
            setLoop(p => !p);
          }}
          style={styles.button}>
          <Text style={styles.text}>{isLoop ? 'Loop on' : 'Loop off'}</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 32,
  },
  controlsContainer: {marginTop: 24, gap: 12},
  button: {
    backgroundColor: color.primary,
    paddingHorizontal: 24,
    paddingVertical: 16,
  },
  text: {color: 'white', textAlign: 'center'},
  lottie: {width: 400, height: 400},
});

const colorFilter = [
  {
    keypath: 'BG',
    color: color.primary,
  },
  {
    keypath: 'O-B',
    color: color.secondary,
  },
  {
    keypath: 'L-B',
    color: color.secondary,
  },
  {
    keypath: 'T1a-Y 2',
    color: color.secondary,
  },
  {
    keypath: 'T1b-Y',
    color: color.secondary,
  },
  {
    keypath: 'T2b-B',
    color: color.secondary,
  },
  {
    keypath: 'T2a-B',
    color: color.secondary,
  },
  {
    keypath: 'I-Y',
    color: color.secondary,
  },
  {
    keypath: 'E1-Y',
    color: color.secondary,
  },
  {
    keypath: 'E2-Y',
    color: color.secondary,
  },
  {
    keypath: 'E3-Y',
    color: color.secondary,
  },
];

export default App;

And here is the output:

As you can see, you very much can put it in a View tag and expect it to work. This is why i am asking for a reproducible so i can narrow down what is going on. Also, as i mentioned, your original example for LoadingAnimation is not allocating width to the component. As of Version 6, you are required to provide both width and height (Or equivalent sizing props like flex) and we no longer calculate those values.

[chatphonhasser]

It worked. Thanks.

For your information, I could clone your project, there is the index error.

Have a nice day