Route Tab Navigator

gistfile1.txt

import React from 'react';
// import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import AntDesign from 'react-native-vector-icons/AntDesign';

// const TopTab = createMaterialTopTabNavigator();
const TabStack = createStackNavigator();
const AppTab = createBottomTabNavigator();

// import Header from '../components/Header';

import Feed from '../pages/Feed';
import Explorer from '../pages/Explorer';
import Profile from '../pages/Profile';

import DetailUser from '../pages/DetailUser';
import DepoimentPendent from '../pages/DepoimentPendent';
import CreateDepoiment from '../pages/CreateDepoiment';
import DepoimentCreated from '../pages/DepoimentCreated';
import CreatePost from '../pages/CreatePost';


function Tabs(){
  return(
      <AppTab.Navigator
          initialRouteName="Feed"
          tabBarOptions={{
              activeTintColor: '#00D50A', //bf3586
              inactiveTintColor: '#b4b4b4', //gray
              labelStyle: {
                  marginTop: 0,
                  paddingTop: 0,
              },
              showLabel: false,
              style: {
                  // backgroundColor: 'transparent',
                  borderTopWidth: 0,
                  shadowColor: "#FFFFFF",
                  shadowOffset: {
                      width: 0,
                      height: 0,
                  },
                  shadowOpacity: 0.10,
                  shadowRadius: 10,
                  elevation: 5,
              },
          }}
      >
          <AppTab.Screen
              name="Feed" 
              component={Feed} 
              options={{
                  tabBarLabel: 'Feed',
                  tabBarIcon: ({ color, size }) => (
                  <AntDesign name="home" color={color} size={24} />
                  ),
              }}
          />
          <AppTab.Screen 
              name="Explorer" 
              component={Explorer}
              options={{
                  tabBarLabel: 'Buscar',
                  tabBarIcon: ({ color, size }) => (
                      <AntDesign name="search1" color={color} size={24} />
                  ),
              }}
          />
          <AppTab.Screen 
              name="Profile" 
              component={Profile} 
              options={{
                  tabBarLabel: 'Perfil',
                  tabBarIcon: ({ color, size }) => (
                  <AntDesign name="user" color={color} size={24} />
                  ),
              }}
          />
      </AppTab.Navigator>
  )
}

// function TopTabNavigator() {
//   return (
//     <TopTab.Navigator
//       screenOptions={{ headerShown: false }}
//       initialRouteName="Feed"
//       tabBarOptions={{
//         // activeTintColor: '#e91e63',
//         labelStyle: { fontSize: 16 },
//         style: {
//           height: 0,
//           shadowColor: 'transparente',
//           shadowOffset: {
//             width: 0,
//             height: 0,
//           },
//           shadowOpacity: 0,
//           shadowRadius: 0,
//           elevation: 0,
//         },
//         // pressColor: false,
//         // scrollEnabled: false,
//         showLabel: false,
//         tabStyle: { height: 0 },
//         tabBarIcon: {
//           focused: false
//         },
//         indicatorStyle: { backgroundColor: '#FFF' },
//         // labelStyle: 'inactiveTintColor',
//       }}
//     >
//       {/* <TopTab.Screen
//         name="Feed"
//         component={Feed}
//         options={{ tabBarLabel: 'Feed' }}
//       /> */}

//       <TopTab.Screen
//         name="Explorer"
//         component={Explorer}
//         options={{ tabBarLabel: 'Explorer' }}
//       />

//       <TopTab.Screen
//         name="Profile"
//         component={Profile}
//         options={{ tabBarLabel: 'Perfil' }}
//       />

//     </TopTab.Navigator>
//   );
// }

// function TapStackNavigator() {
//   return (
//     <TabStack.Navigator screenOptions={{ headerShown: false }} >
//       <TabStack.Screen name="DepoimentPendent" component={DepoimentPendent} />
//     </TabStack.Navigator>
//   );
// }

export default function AppRoutes() {
  return (
    <>
      {/* <Header /> */}
      <TabStack.Navigator screenOptions={{ headerShown: false }}>
        {/* <TopTab.Screen name="Home" component={TopTabNavigator} /> */}
        <TabStack.Screen 
            name="Feed" 
            component={Tabs}
            options={{headerShown: false}}
        />
        <TabStack.Screen 
            name="Explorer" 
            component={Tabs}
            options={{headerShown: false}}
        />
        <TabStack.Screen 
            name="Profile" 
            component={Tabs}
            options={{headerShown: false}}
        />

        <TabStack.Screen name="DepoimentPendent" component={DepoimentPendent} />
        <TabStack.Screen name="DetailUser" component={DetailUser} />
        <TabStack.Screen name="CreateDepoiment" component={CreateDepoiment} />
        <TabStack.Screen name="DepoimentCreated" component={DepoimentCreated} />
        <TabStack.Screen name="CreatePost" component={CreatePost} />
      </TabStack.Navigator>
    </>
  );
}