Animation does not work

[Sushmitha-B]

Node.js version: v16.16.0

Actual behaviour
Animation does not work with overlay intermittently

Expected behaviour
Animation should load all the time when this component is rendered

Code to reproduce

import React, { Component } from 'react';
import { Text, View, StyleSheet, Animated, Easing } from 'react-native';
import Spinner from 'react-native-loading-spinner-overlay';
import Animation from 'lottie-react-native';
import { Images } from '../../res';

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
textAlign: 'center',
bottom: 100,
backgroundColor: '#ecf0f1',
width: '100%',
height: '100%',
},
lottieStyle: {
width: '100%',
height: '100%',
flexDirection: 'column',
alignItems: 'flex-start',
},
});
export default class Spinner extends Component {
constructor(props) {
super(props);
this.state = {
progress: new Animated.Value(0),
};
}
SpinnerLoaderView = () => {
const {
loading = true,
} = this.props;

if (loading) {
  return (
  <View style={{ backgroundColor: '#ecf0f1' }}>
  <Spinner
  >
  <View style={styles.lottieStyle}>
  <Animation
   progress={this.state.progress}
    source={Images.newLoader}
    ref={(animation) => {
      if (animation) animation.play();
    }}
    loop
  />
  </Spinner>
</View>
  );
}

};
render() {
return (
<>
{this.SpinnerLoaderView()}
</>

);

}
}

Checklist

• I have searched through GitHub issues for similar issues.
• I have completely read through the README and documentation.
• I have tested my code with the latest version of Node.js and this package and confirmed it is still not working.