You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
4.9 KiB
108 lines
4.9 KiB
import React from "react";
|
|
import {NavigationContainer} from "@react-navigation/native";
|
|
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
|
|
import {ListJokeScreen} from "../screens/ListJokeScreen";
|
|
import {Image, StyleSheet, View} from "react-native";
|
|
import {darksalmonColor, greyColor, indigo, purpleColor} from "../Theme";
|
|
import {AccueilScreen} from "../screens/AccueilScreen";
|
|
import {AddJokeScreen} from "../screens/AddJokeScreen";
|
|
import {SettingsScreen} from "../screens/SettingsScreen";
|
|
const homeIcon = require("../assets/home_icon.png");
|
|
const listIcon = require("../assets/list_icon.png");
|
|
const addIcon = require("../assets/add_icon.png");
|
|
const favIcon = require("../assets/favorite_icon.png");
|
|
const setIcon = require("../assets/settings_icon.png");
|
|
|
|
|
|
export function Navigation(){
|
|
const BottomTabNavigator = createBottomTabNavigator();
|
|
return (
|
|
<NavigationContainer>
|
|
<BottomTabNavigator.Navigator initialRouteName="Home" screenOptions={{
|
|
headerTitleStyle: {
|
|
fontSize: 24,
|
|
fontWeight: 'bold',
|
|
color: darksalmonColor,
|
|
},
|
|
headerStyle: {
|
|
backgroundColor: indigo,
|
|
},
|
|
tabBarShowLabel: false,
|
|
tabBarStyle: styles.top,
|
|
}} >
|
|
<BottomTabNavigator.Screen name="Accueil" component={AccueilScreen}
|
|
options={{
|
|
tabBarIcon: ({focused}) => (
|
|
<Image
|
|
source={homeIcon}
|
|
style={{ tintColor: focused ? darksalmonColor : purpleColor }}
|
|
/>
|
|
)
|
|
}}/>
|
|
<BottomTabNavigator.Screen name="Catalogue" component={ListJokeScreen}
|
|
options={{
|
|
tabBarIcon: ({focused}) => (
|
|
<Image source={listIcon}
|
|
style={{ tintColor: focused ? darksalmonColor : purpleColor }}
|
|
/>
|
|
)
|
|
}}/>
|
|
<BottomTabNavigator.Screen name="Ajouter" component={AddJokeScreen}
|
|
options={{
|
|
tabBarIcon: ({focused}) => (
|
|
<View style={styles.addJoke}>
|
|
<Image source={addIcon}
|
|
style={{ tintColor: focused ? darksalmonColor : purpleColor }}
|
|
/>
|
|
</View>
|
|
)
|
|
}}/>
|
|
|
|
<BottomTabNavigator.Screen name="Favoris" component={ListJokeScreen}
|
|
options={{
|
|
tabBarIcon: ({focused}) => (
|
|
<Image source={favIcon}
|
|
style={{ tintColor: focused ? darksalmonColor : purpleColor }}
|
|
/>
|
|
)
|
|
}}/>
|
|
<BottomTabNavigator.Screen name="Paramètres" component={SettingsScreen}
|
|
options={{
|
|
tabBarIcon: ({focused}) => (
|
|
<Image source={setIcon}
|
|
style={{ tintColor: focused ? darksalmonColor : purpleColor }}
|
|
/>
|
|
)
|
|
}}/>
|
|
|
|
</BottomTabNavigator.Navigator>
|
|
</NavigationContainer>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
title: {
|
|
fontSize: 24,
|
|
color: 'darksalmon',
|
|
textAlign: 'center',
|
|
fontWeight: 'bold',
|
|
marginVertical: 20,
|
|
},
|
|
top: {
|
|
backgroundColor : "rgba(14, 14, 44, 1)"
|
|
},
|
|
addJoke: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
backgroundColor: greyColor,
|
|
width: '70%',
|
|
height: '100%',
|
|
borderRadius: 4,
|
|
marginTop: 4,
|
|
},
|
|
|
|
|
|
});
|