@janiscommerce/ui-native
Version:
components library for Janis app
42 lines (41 loc) • 1.67 kB
JavaScript
import React from 'react';
import { StyleSheet, Modal, Text, View } from 'react-native';
import Loading from '../../atoms/Loading';
import Svg from '../../atoms/Svg';
import { grey, white } from '../../../theme/palette';
import { moderateScale, horizontalScale, scaledForDevice } from '../../../scale';
const validFontSize = scaledForDevice(16, moderateScale);
const validLineHeight = scaledForDevice(24, moderateScale);
const validMarginTop = scaledForDevice(25, moderateScale);
const validWidth = scaledForDevice(36, horizontalScale);
const validHeight = scaledForDevice(25, moderateScale);
const styles = StyleSheet.create({
ContainerStyles: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: white.semiTransparent,
},
TextStyles: {
fontSize: validFontSize,
lineHeight: validLineHeight,
fontFamily: 'Roboto',
color: grey[700],
textAlign: 'center',
fontWeight: '500',
width: '50%',
marginTop: validMarginTop,
},
});
const LoadingFullScreen = ({ text, isLoading, svgName = 'janis-iso', spinnerDuration = 2000, style, ...props }) => {
const hasTextPassed = typeof text === 'string' && Boolean(text);
return (<Modal visible={isLoading} transparent animationType="fade" testID="loading modal" {...props}>
<View style={[styles.ContainerStyles, style]}>
<Loading isLoading={isLoading} duration={spinnerDuration}>
<Svg name={svgName} width={validWidth} height={validHeight}/>
</Loading>
{hasTextPassed && <Text style={styles.TextStyles}>{text}</Text>}
</View>
</Modal>);
};
export default LoadingFullScreen;