@janiscommerce/ui-native
Version:
components library for Janis app
61 lines (60 loc) • 2.13 kB
JavaScript
import React, { useEffect, useRef } from 'react';
import { StyleSheet, View, Animated, Easing } from 'react-native';
import LoadingSvg from './LoadingSvg';
import { primary } from '../../../theme/palette';
import { horizontalScale, moderateScale, scaledForDevice } from '../../../scale';
const startRotationAnimation = ({ duration, rotationDegree, timingAnimation }) => Animated.loop(Animated.timing(rotationDegree, {
duration,
toValue: 360,
easing: timingAnimation,
useNativeDriver: true,
})).start();
const Loading = ({ isLoading, color = primary.main, size = 64, duration = 1000, children = null, style, ...props }) => {
const rotationDegree = useRef(new Animated.Value(0)).current;
const validWidth = scaledForDevice(size, horizontalScale);
const validHeight = scaledForDevice(size, moderateScale);
const validSize = scaledForDevice(size, moderateScale);
const styles = StyleSheet.create({
container: {
position: 'relative',
justifyContent: 'center',
alignItems: 'center',
width: validWidth,
height: validHeight,
},
spinner: {
position: 'absolute',
width: size,
height: size,
justifyContent: 'center',
alignItems: 'center',
},
});
const animationSpinnerStyle = {
transform: [
{
rotateZ: rotationDegree.interpolate({
inputRange: [0, 360],
outputRange: ['0deg', '360deg'],
}),
},
],
};
useEffect(() => {
if (isLoading) {
startRotationAnimation({
duration,
rotationDegree,
timingAnimation: Easing.linear,
});
}
}, [isLoading, duration, rotationDegree]);
if (!isLoading) {
return <></>;
}
return (<View style={[styles.container, style]} {...props}>
<LoadingSvg style={[styles.spinner, { ...animationSpinnerStyle }]} size={validSize} color={color}/>
{children}
</View>);
};
export default Loading;