File size: 1,251 Bytes
5c876be | 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 | import React from 'react';
import { StyleSheet, View } from 'react-native';
import { useTheme, Text, ActivityIndicator, Surface } from 'react-native-paper';
export interface LoadingScreenProps {
/** Optional message shown below the spinner */
message?: string;
}
/**
* Full-screen loading overlay with a centered ActivityIndicator on a
* surface-coloured background. Intended for splash screens, data
* fetching states, and navigation transitions.
*/
export function LoadingScreen({ message }: LoadingScreenProps) {
const theme = useTheme();
return (
<Surface style={[styles.container, { backgroundColor: theme.colors.surface }]}>
<View style={styles.content}>
<ActivityIndicator
size="large"
color={theme.colors.primary}
/>
{message ? (
<Text
style={[styles.message, { color: theme.colors.onSurfaceVariant }]}
variant="bodyMedium"
>
{message}
</Text>
) : null}
</View>
</Surface>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
content: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
gap: 16,
},
message: {
marginTop: 4,
},
});
|