feat(chat): navigation

src/navigation/tab-data.ts

@@ -1,7 +1,8 @@
 import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
 import { faFeed, faMessage, faSearch } from '@fortawesome/free-solid-svg-icons';
 
-import { Chat, Search } from '@/screens';
+import { Search } from '@/screens';
+import { ChatNavigator } from '@/screens/chat/chat-navigator';
 
 import { FeedNavigator } from './feed-navigator';
 
@@ -36,9 +37,9 @@ export const tabs: TabType[] = [
     icon: faSearch,
   },
   {
-    name: 'Chat',
-    component: Chat, // React Chat component screen
-    label: 'Chat',
+    name: 'ChatNavigator',
+    component: ChatNavigator, // React Chat component screen
+    label: 'ChatNavigator',
     icon: faMessage,
   },
 ];

src/navigation/tab-navigator.tsx

@@ -38,7 +38,7 @@ export const TabNavigator: React.FC = () => {
   return (
     <Tab.Navigator
       screenOptions={({ route }) => ({
-        tabBarInactiveTintColor: colorScheme === 'dark' ? '#1DA1F' : '#65776',
+        tabBarInactiveTintColor: colorScheme === 'dark' ? '#1DA1F' : '#A9A9A9',
         tabBarIcon: ({ color }) => renderTabBarIcon({ color, route }),
       })}
     >

src/navigation/types.tsx

@@ -1,9 +1,14 @@
 import type { RouteProp as NRouteProp } from '@react-navigation/native';
 
+import type { ChatStackParamList } from '@/screens/chat/chat-navigator';
+
 import type { AuthStackParamList } from './auth-navigator';
 import type { FeedStackParamList } from './feed-navigator';
 
-export type RootStackParamList = AuthStackParamList & FeedStackParamList; //  & FooStackParamList & BarStackParamList
+// TODO: change, this must be dynamic
+export type RootStackParamList = AuthStackParamList &
+  FeedStackParamList &
+  ChatStackParamList; //  & FooStackParamList & BarStackParamList
 // very important to type check useNavigation hook
 declare global {
   namespace ReactNavigation {

src/screens/chat/chat-list-screen.tsx

@@ -42,7 +42,7 @@ const ChatListScreen = () => {
     },
   ];
 
-  const navigate = useNavigation();
+  const { navigate } = useNavigation();
 
   return (
     <View style={styles.container}>
@@ -52,7 +52,7 @@ const ChatListScreen = () => {
       <ChatListHeader />
 
       {/* List of chats */}
-      <ChatListBody chats={chats} onPress={() => navigate.navigate('Feed')} />
+      <ChatListBody chats={chats} onPress={() => navigate('ChatScreen')} />
       {/* <ChatListBody chats={chats} onPress={() => console.log('Me undieron')} /> */}
 
       {/* <ChatScreen /> */}

src/screens/chat/chat-navigator.tsx

@@ -0,0 +1,23 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import * as React from 'react';
+
+import { Chat } from '@/screens';
+
+import ChatScreen from './chat-screen';
+
+export type ChatStackParamList = {
+  ChatPrincipal: undefined;
+  // Snap: { id: number };
+  ChatScreen: undefined;
+};
+
+const Stack = createNativeStackNavigator<ChatStackParamList>();
+
+export const ChatNavigator = () => {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen name="ChatPrincipal" component={Chat} />
+      <Stack.Screen name="ChatScreen" component={ChatScreen} />
+    </Stack.Navigator>
+  );
+};