NewPost View at bottom bar navigator

App.js

@@ -17,6 +17,9 @@ import * as Device from 'expo-device';
 import * as Notifications from 'expo-notifications';
 import API from './API.js';
 import i18n from "./i18nMessages.js";
+import NewPostView from './Views/NewPost.js';
+import { TouchableOpacity, View } from 'react-native';
+
 
 const Tab = createBottomTabNavigator();
 const Stack = createNativeStackNavigator();
@@ -111,7 +114,9 @@ const MainNavigation = () => {
         <Tab.Navigator initialRouteName="Home"
             activeColor="#0d6efd"
             inactiveColor="#FFFFFF"
-            barStyle={{ backgroundColor: '#000000' }}
+            barStyle={{ 
+                backgroundColor: '#000000'
+            }}
             sceneContainerStyle={{ paddingBottom: 0, paddingTop: 15 }}
         >
             <Tab.Screen
@@ -142,6 +147,36 @@ const MainNavigation = () => {
                     header: () => { <></> },
                 }}
             />
+            <Tab.Screen
+                name="NewPost"
+                component={NewPostView}
+                options={{
+                    tabBarLabel: '',//i18n.t('message.statusUpdate'),
+                    tabBarIcon: ({ color }) => (
+                        <MaterialIcons name="add" color="#fff" size={26} />
+                    ),
+                    tabBarButton: (props) => (
+                        <TouchableOpacity 
+                            onPress={props.onPress}
+                            style={{
+                                top: -27,
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                
+                            }} 
+                        >
+                           <View style={{
+                            height: 56,
+                            width: 56,
+                            borderRadius: 28,
+                            backgroundColor: "#c44d56",
+                            paddingTop: 13
+                           }}>{props.children}</View>
+                        </TouchableOpacity>
+                    ),
+                    header: () => { <></> },
+                }}
+            />
             <Tab.Screen
                 name="Search"
                 component={Search}
@@ -164,7 +199,7 @@ const MainNavigation = () => {
                     header: () => { <></> },
                 }}
             />
-            <Tab.Screen
+            {/*<Tab.Screen
                 name="Courses"
                 component={Courses}
                 options={{
@@ -186,7 +221,7 @@ const MainNavigation = () => {
                     ),
                     header: () => { <></> },
                 }}
-            />
+            />*/}
         </Tab.Navigator>
     )
 }
@@ -215,6 +250,13 @@ export default function App() {
                             tabBarLabel: i18n.t('message.profile')
                         }}
                     />
+                    <Stack.Screen
+                        name="NewPost"
+                        component={NewPostView}
+                        options={{
+                            tabBarLabel: i18n.t('message.statusUpdate')
+                        }}
+                    />
                     <Stack.Screen name="SinglePost" component={SinglePost} />
                     <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
                 </Stack.Navigator>