cameron.stream
A React Native app for the ultimate thinking partner.
fix: Resolve component rendering issues
LogoLoader:
- Make source prop optional with ActivityIndicator fallback
- Add dynamic Lottie import with error handling
- Fix container to use flex: 1
MessageBubble:
- Fix shadow styles to be platform-specific
- Use boxShadow on web, shadow* on iOS, elevation on Android
- Properly handle Platform imports
MessageInput.v2:
- Fix outline style warning
- Use outlineStyle: 'none' instead of outline: 'none'
- Add borderWidth: 0 for consistency
These changes resolve the 'Cannot read properties of undefined' errors
and eliminate React Native style warnings.
+40
-14
+25
-3
src/components/LogoLoader.tsx
+25
-3
src/components/LogoLoader.tsx
···
1
1
import React from 'react';
2
-
import { View, StyleSheet } from 'react-native';
3
-
import LottieView from 'lottie-react-native';
2
+
import { View, StyleSheet, ActivityIndicator } from 'react-native';
4
3
5
4
interface LogoLoaderProps {
6
5
// Pass a require('...') or an imported JSON
7
-
source: any;
6
+
source?: any;
8
7
loop?: boolean;
9
8
autoPlay?: boolean;
10
9
size?: number; // square size in px
···
16
15
autoPlay = true,
17
16
size = 160,
18
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
+
19
40
return (
20
41
<View style={styles.container}>
21
42
<LottieView
···
30
51
31
52
const styles = StyleSheet.create({
32
53
container: {
54
+
flex: 1,
33
55
justifyContent: 'center',
34
56
alignItems: 'center',
35
57
},
+12
-9
src/components/MessageBubble.tsx
+12
-9
src/components/MessageBubble.tsx
···
1
1
import React from 'react';
2
-
import { View, Text, StyleSheet, Image } from 'react-native';
2
+
import { View, Text, StyleSheet, Image, Platform } from 'react-native';
3
3
import { darkTheme } from '../theme';
4
4
import { LettaMessage } from '../types/letta';
5
5
import MessageContent from './MessageContent';
···
130
130
maxWidth: '80%',
131
131
padding: 12,
132
132
borderRadius: 16,
133
-
elevation: 1,
134
-
shadowColor: '#000',
135
-
shadowOffset: {
136
-
width: 0,
137
-
height: 1,
138
-
},
139
-
shadowOpacity: 0.1,
140
-
shadowRadius: 2,
133
+
...(Platform.OS === 'android' && { elevation: 1 }),
134
+
...(Platform.OS === 'ios' && {
135
+
shadowColor: '#000',
136
+
shadowOffset: { width: 0, height: 1 },
137
+
shadowOpacity: 0.1,
138
+
shadowRadius: 2,
139
+
}),
140
+
...(Platform.OS === 'web' && {
141
+
// @ts-ignore - boxShadow is web-only
142
+
boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)',
143
+
}),
141
144
},
142
145
userBubble: {
143
146
backgroundColor: darkTheme.colors.interactive.primary,
+3
-2
src/components/MessageInput.v2.tsx
+3
-2
src/components/MessageInput.v2.tsx