Design TabBottom

Author: chnirt

src/navigation/TabNavigator.js

@@ -1,44 +1,17 @@
-import React, {useContext} from 'react';
+import React from 'react';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import {View, Text, StyleSheet} from 'react-native';
+import {View} from 'react-native';
 import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 
 import {primaryColor} from '../theme';
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+import Home from '../screens/Home';
+import Message from '../screens/Message';
+import Post from '../screens/Post';
+import Notification from '../screens/Notification';
+import Profile from '../screens/Profile';
 
 const Tab = createBottomTabNavigator();
 
-function Feed() {
-  return (
-    <View style={styles.container}>
-      <Text>Feed</Text>
-    </View>
-  );
-}
-
-function Notifications() {
-  return (
-    <View style={styles.container}>
-      <Text>Notifications</Text>
-    </View>
-  );
-}
-
-function Profile() {
-  return (
-    <View style={styles.container}>
-      <Text>Profile</Text>
-    </View>
-  );
-}
-
 export default function TabNavigator(props) {
   return (
     <Tab.Navigator
@@ -55,27 +28,37 @@ export default function TabNavigator(props) {
             <FontAwesome5 name={'home'} color={color} size={size} />
           ),
         }}
-        children={() => <Feed {...props} />}
+        children={() => <Home {...props} />}
+      />
+      <Tab.Screen
+        name="Message"
+        options={{
+          tabBarLabel: () => <View />,
+          tabBarIcon: ({color, size}) => (
+            <FontAwesome5 name={'comments'} color={color} size={size} />
+          ),
+        }}
+        children={() => <Message {...props} />}
       />
       <Tab.Screen
-        name="Notifications1"
+        name="Post"
         options={{
           tabBarLabel: () => <View />,
           tabBarIcon: ({color, size}) => (
-            <FontAwesome5 name={'heart'} color={color} size={size} />
+            <FontAwesome5 name={'plus'} color={color} size={size} />
           ),
         }}
-        children={() => <Notifications {...props} />}
+        children={() => <Post {...props} />}
       />
       <Tab.Screen
-        name="Notifications"
+        name="Notification"
         options={{
           tabBarLabel: () => <View />,
           tabBarIcon: ({color, size}) => (
-            <FontAwesome5 name={'heart'} color={color} size={size} />
+            <FontAwesome5 name={'bell'} color={color} size={size} />
           ),
         }}
-        children={() => <Notifications {...props} />}
+        children={() => <Notification {...props} />}
       />
       <Tab.Screen
         name="Profile"

src/screens/Home.js

@@ -0,0 +1,21 @@
+import React, {Component} from 'react';
+import {Text, StyleSheet, View} from 'react-native';
+
+export default class BirthdayScreen extends Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text> Home </Text>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'transparent',
+  },
+});

src/screens/Message.js

@@ -0,0 +1,21 @@
+import React, {Component} from 'react';
+import {Text, StyleSheet, View} from 'react-native';
+
+export default class BirthdayScreen extends Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text> Message </Text>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'transparent',
+  },
+});

src/screens/Notification.js

@@ -0,0 +1,21 @@
+import React, {Component} from 'react';
+import {Text, StyleSheet, View} from 'react-native';
+
+export default class BirthdayScreen extends Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text> Notification </Text>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'transparent',
+  },
+});

src/screens/Post.js

@@ -0,0 +1,21 @@
+import React, {Component} from 'react';
+import {Text, StyleSheet, View} from 'react-native';
+
+export default class BirthdayScreen extends Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text> Post </Text>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'transparent',
+  },
+});

src/screens/Profile.js

@@ -0,0 +1,21 @@
+import React, {Component} from 'react';
+import {Text, StyleSheet, View} from 'react-native';
+
+export default class BirthdayScreen extends Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text> Profile </Text>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'transparent',
+  },
+});