Closed Sushmitha-B closed 1 year ago
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()} </>
);
} }
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;
}; render() { return ( <> {this.SpinnerLoaderView()} </>
} }
Checklist