cameron.stream
A React Native app for the ultimate thinking partner.
1/**
2 * BottomNavigation Component
3 *
4 * View switcher with three navigation tabs: You, Chat, Knowledge.
5 *
6 * Features:
7 * - Active tab highlighting
8 * - Hides when no messages present (empty state)
9 * - Centered layout with max-width constraint
10 *
11 * Note: Settings is accessed from the sidebar menu, not bottom navigation.
12 */
13
14import React from 'react';
15import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
16import type { Theme } from '../theme';
17
18export type ViewType = 'you' | 'chat' | 'knowledge' | 'settings';
19
20interface BottomNavigationProps {
21 theme: Theme;
22 currentView: ViewType;
23 hasMessages: boolean;
24 onYouPress: () => void;
25 onChatPress: () => void;
26 onKnowledgePress: () => void;
27 onSettingsPress?: () => void; // Optional - not shown in bottom nav
28}
29
30export function BottomNavigation({
31 theme,
32 currentView,
33 hasMessages,
34 onYouPress,
35 onChatPress,
36 onKnowledgePress,
37 onSettingsPress,
38}: BottomNavigationProps) {
39 // Hide when chat is empty
40 if (!hasMessages) {
41 return null;
42 }
43
44 return (
45 <View
46 style={[
47 styles.viewSwitcher,
48 { backgroundColor: theme.colors.background.secondary },
49 ]}
50 >
51 <TouchableOpacity
52 style={[
53 styles.viewSwitcherButton,
54 currentView === 'you' && {
55 backgroundColor: theme.colors.background.tertiary,
56 },
57 ]}
58 onPress={onYouPress}
59 >
60 <Text
61 style={[
62 styles.viewSwitcherText,
63 {
64 color:
65 currentView === 'you'
66 ? theme.colors.text.primary
67 : theme.colors.text.tertiary,
68 },
69 ]}
70 >
71 You
72 </Text>
73 </TouchableOpacity>
74
75 <TouchableOpacity
76 style={[
77 styles.viewSwitcherButton,
78 currentView === 'chat' && {
79 backgroundColor: theme.colors.background.tertiary,
80 },
81 ]}
82 onPress={onChatPress}
83 >
84 <Text
85 style={[
86 styles.viewSwitcherText,
87 {
88 color:
89 currentView === 'chat'
90 ? theme.colors.text.primary
91 : theme.colors.text.tertiary,
92 },
93 ]}
94 >
95 Chat
96 </Text>
97 </TouchableOpacity>
98
99 <TouchableOpacity
100 style={[
101 styles.viewSwitcherButton,
102 currentView === 'knowledge' && {
103 backgroundColor: theme.colors.background.tertiary,
104 },
105 ]}
106 onPress={onKnowledgePress}
107 >
108 <Text
109 style={[
110 styles.viewSwitcherText,
111 {
112 color:
113 currentView === 'knowledge'
114 ? theme.colors.text.primary
115 : theme.colors.text.tertiary,
116 },
117 ]}
118 >
119 Knowledge
120 </Text>
121 </TouchableOpacity>
122 </View>
123 );
124}
125
126const styles = StyleSheet.create({
127 viewSwitcher: {
128 flexDirection: 'row',
129 justifyContent: 'space-between',
130 alignItems: 'center',
131 paddingHorizontal: 16,
132 paddingVertical: 2,
133 maxWidth: 400,
134 alignSelf: 'center',
135 width: '100%',
136 },
137 viewSwitcherButton: {
138 paddingVertical: 4,
139 paddingHorizontal: 14,
140 borderRadius: 6,
141 flex: 1,
142 alignItems: 'center',
143 justifyContent: 'center',
144 },
145 viewSwitcherText: {
146 fontSize: 13,
147 fontFamily: 'Lexend_500Medium',
148 },
149});
150
151export default BottomNavigation;