styling bottom nav

app/mobile/src/constants/Colors.js

@@ -16,6 +16,9 @@ export const Colors = {
   text: '#444444',
   link: '#0077CC',
 
+  active: '#222222',
+  idle: '#707070',
+
   itemDivider: '#eeeeee',
   
   connected: '#44cc44',

app/mobile/src/session/Session.jsx

@@ -1,7 +1,11 @@
 import { View, TouchableOpacity, Text } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
-import { useSession } from './useSession.hook';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { NavigationContainer } from '@react-navigation/native';
+import Ionicons from '@expo/vector-icons/AntDesign';
+import { useSession } from './useSession.hook';
+import { styles } from './Session.styled';
+import Colors from 'constants/Colors';
 
 export function Session() {
 
@@ -9,17 +13,39 @@ export function Session() {
 
   const Tab = createBottomTabNavigator();
 
-  const Home = () => (<TouchableOpacity style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }} onPress={actions.logout}><Text>LOGOUT</Text></TouchableOpacity>);
+  const Conversation = () => (<TouchableOpacity style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }} onPress={actions.logout}><Text>LOGOUT</Text></TouchableOpacity>);
 
-  const Settings = () => (<Text>SETTINGS</Text>);
+  const Profile = () => (<SafeAreaView edges={['top']}><View style={{ width: '100%', height: '100%', backgroundColor: 'yellow'}} /></SafeAreaView>);
+  const Contacts = () => (<SafeAreaView edges={['top']}><View style={{ width: '100%', height: '100%', backgroundColor: 'yellow'}} /></SafeAreaView>);
 
   return (
-    <NavigationContainer>
-      <Tab.Navigator>
-        <Tab.Screen name="Home" component={Home} />
-        <Tab.Screen name="Settings" component={Settings} />
-      </Tab.Navigator>
-    </NavigationContainer>
+    <SafeAreaProvider>
+      <NavigationContainer>
+        <Tab.Navigator
+          screenOptions={({ route }) => ({
+            tabBarStyle: styles.tabBar,
+            headerShown: false,
+            tabBarIcon: ({ focused, color, size }) => {
+              if (route.name === 'Profile') {
+                return <Ionicons name={'user'} size={size} color={color} />;
+              }
+              if (route.name === 'Conversation') {
+                return <Ionicons name={'message1'} size={size} color={color} />;
+              }
+              if (route.name === 'Contacts') {
+                return <Ionicons name={'contacts'} size={size} color={color} />;
+              }
+            },
+            tabBarActiveTintColor: Colors.white,
+            tabBarInactiveTintColor: Colors.disabled,
+          })}
+            >
+          <Tab.Screen name="Conversation" component={Conversation} />
+          <Tab.Screen name="Profile" component={Profile} />
+          <Tab.Screen name="Contacts" component={Contacts} />
+        </Tab.Navigator>
+      </NavigationContainer>
+    </SafeAreaProvider>
   );
 }
 

app/mobile/src/session/Session.styled.js

@@ -0,0 +1,8 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from 'constants/Colors';
+
+export const styles = StyleSheet.create({
+  tabBar: {
+    backgroundColor: Colors.primary,
+  },
+});