Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | 9x 4x | /**
* @fileoverview Loading modal component
* @module LoadingModal
* @description Component that renders a loading modal.
* @requires react react-native
* @requires Modal react-native
* @requires View react-native
* @requires ActivityIndicator react-native
* @requires StyleSheet react-native
*/
import React from 'react'
import { Modal, View, ActivityIndicator, StyleSheet, StyleProp, ViewStyle } from 'react-native'
import colors from '../global/colors'
type Props = {
visible: boolean
loadingColor?: string
size?: number | 'small' | 'large' | undefined
loadingStyle?: StyleProp<ViewStyle>
containerStyle?: StyleProp<ViewStyle>
}
/**
* @function LoadingModal
* @param visible Wether the modal is visible or not
* @param loadingColor Color of the loading indicator
* @param size Size of the loading indicator
* @param loadingStyle Style of the loading indicator
* @param containerStyle Style of the container
* @returns {JSX.Element}
*/
export default function LoadingModal({
visible,
loadingColor = colors.accent,
size = 'large',
loadingStyle,
containerStyle,
}: Props): JSX.Element {
return (
<Modal
visible={visible}
transparent
>
<View style={styles.background}>
<View style={[styles.container, containerStyle]}>
<ActivityIndicator
size={size}
color={loadingColor}
style={loadingStyle}
/>
</View>
</View>
</Modal>
)
}
const styles = StyleSheet.create({
background: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#000000A0',
zIndex: 100,
},
container: {
backgroundColor: 'white',
padding: 62,
borderRadius: 8,
},
})
|