cameron.stream
A React Native app for the ultimate thinking partner.
1import React from 'react';
2import { View, StyleSheet, ActivityIndicator } from 'react-native';
3
4interface LogoLoaderProps {
5 // Pass a require('...') or an imported JSON
6 source?: any;
7 loop?: boolean;
8 autoPlay?: boolean;
9 size?: number; // square size in px
10}
11
12const LogoLoader: React.FC<LogoLoaderProps> = ({
13 source,
14 loop = true,
15 autoPlay = true,
16 size = 160,
17}) => {
18 // If Lottie is not available or source not provided, use ActivityIndicator
19 if (!source) {
20 return (
21 <View style={styles.container}>
22 <ActivityIndicator size="large" color="#ffffff" />
23 </View>
24 );
25 }
26
27 // Dynamically import LottieView only if needed
28 let LottieView: any;
29 try {
30 LottieView = require('lottie-react-native').default;
31 } catch (e) {
32 // Fallback to ActivityIndicator if Lottie is not available
33 return (
34 <View style={styles.container}>
35 <ActivityIndicator size="large" color="#ffffff" />
36 </View>
37 );
38 }
39
40 return (
41 <View style={styles.container}>
42 <LottieView
43 source={source}
44 autoPlay={autoPlay}
45 loop={loop}
46 style={{ width: size, height: size }}
47 />
48 </View>
49 );
50};
51
52const styles = StyleSheet.create({
53 container: {
54 flex: 1,
55 justifyContent: 'center',
56 alignItems: 'center',
57 },
58});
59
60export default LogoLoader;