97 lines
2.8 KiB
JavaScript
97 lines
2.8 KiB
JavaScript
import { Motion } from "@legendapp/motion";
|
|
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
|
|
import React from "reactn";
|
|
import { useGlobal } from "reactn";
|
|
import { Palette } from "../styles";
|
|
import { Routes } from "./Routes";
|
|
import { tabs } from "../assets";
|
|
import TabBar from "./TabBar";
|
|
import { Platform } from "react-native";
|
|
import HitParade from "../screens/HitParade/HitParade.js";
|
|
import Library from "../screens/Library/Library";
|
|
import Playbacks from "../screens/Playbacks/Playbacks";
|
|
import Profile from "../screens/Profile/Profile.js";
|
|
import HomeStack from "./HomeStack";
|
|
|
|
const BottomTab = createBottomTabNavigator();
|
|
|
|
export const BottomTabScreen = () => {
|
|
const [currentUID] = useGlobal("currentUID");
|
|
const isAuthenticated = !!currentUID;
|
|
|
|
const renderIcon = (icon, focused) => (
|
|
<Motion.Image
|
|
resizeMode={"contain"}
|
|
animate={{
|
|
tintColor: focused ? Palette.white : "#cacacaff",
|
|
}}
|
|
transition={{ type: "spring", damping: 18, mass: 0.7 }}
|
|
style={[
|
|
{
|
|
width: Platform.OS === "web" ? 30 : 24,
|
|
height: Platform.OS === "web" ? 30 : 24,
|
|
},
|
|
]}
|
|
source={icon}
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<BottomTab.Navigator tabBar={(props) => <TabBar {...props} />}>
|
|
<BottomTab.Screen
|
|
name={Routes.HomeStack}
|
|
component={HomeStack}
|
|
options={{
|
|
tabBarLabel: "Créer",
|
|
headerShown: false,
|
|
tabBarShowLabel: true,
|
|
tabBarIcon: ({ focused }) => renderIcon(tabs.addTab, focused),
|
|
}}
|
|
/>
|
|
<BottomTab.Screen
|
|
name={Routes.HitParade}
|
|
component={HitParade}
|
|
options={{
|
|
tabBarLabel: "Hit Parade",
|
|
headerShown: false,
|
|
tabBarShowLabel: true,
|
|
tabBarIcon: ({ focused }) => renderIcon(tabs.ribbon, focused),
|
|
}}
|
|
/>
|
|
<BottomTab.Screen
|
|
name={Routes.Playbacks}
|
|
component={Playbacks}
|
|
options={{
|
|
tabBarLabel: "Playbacks",
|
|
headerShown: false,
|
|
tabBarShowLabel: true,
|
|
tabBarIcon: ({ focused }) => renderIcon(tabs.mic, focused),
|
|
}}
|
|
/>
|
|
<BottomTab.Screen
|
|
name={Routes.Library}
|
|
component={Library}
|
|
options={{
|
|
tabBarLabel: "Librairie",
|
|
headerShown: false,
|
|
tabBarShowLabel: true,
|
|
tabBarIcon: ({ focused }) => renderIcon(tabs.albums, focused),
|
|
hide: !isAuthenticated,
|
|
}}
|
|
/>
|
|
<BottomTab.Screen
|
|
name={Routes.Profile}
|
|
component={Profile}
|
|
initialParams={{ noBack: true }}
|
|
options={{
|
|
tabBarLabel: "Profil",
|
|
headerShown: false,
|
|
tabBarShowLabel: true,
|
|
tabBarIcon: ({ focused }) => renderIcon(tabs.person, focused),
|
|
hide: !isAuthenticated,
|
|
}}
|
|
/>
|
|
</BottomTab.Navigator>
|
|
);
|
|
};
|