Le design système de l'autonomie n'inclut par défaut le composant Bottom Bar car il est fortement couplé à de la navigation. Ainsi, nous recommandons d'utiliser la librairie React Navigation.
Pour réaliser la bottom bar, il faut utiliser le composant Bottom Tabs de cette librairie.
La stylisation de ce composant est à votre charge.
Voici un exemple de stylisation du composant Bottom Tab:
const DSAScreenOptions = {
tabBarActiveTintColor: theme.collection['bottom bar'].item.icon.active,
tabBarLabelPosition: 'below-icon',
}
<Tab.Navigator
initialRouteName="Home"
screenOptions={({ route, navigation }) => ({
...DSAScreenOptions,
headerShown: /* Affiche la top bar */,
headerLeft: /* Composant personnalisé pour l'élement gauche de la top bar */,
tabBarLabel: /* Composant personnalisé pour les labels des entrées de la sidebar */,
tabBarIcon: /* Composant personnalisé pour les labels des entrées de la sidebar */
})}
drawerContent=/* Composant personnalisé pour tous le contenu de la sidebar */
>
/* Liste des screen a afficher */
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Notifications" component={NotificationsScreen} />
</Tab.Navigator>
Veuillez consulter les options de customisation de la Bottom Tabs Navigator, plus particulièrement:
- tabBar
- tabBarLabel
- tabBarIcon
- tabBarLabelPosition
- tabBarLabelStyle
- tabBarButton
- tabBarBackground
- header
- headerLeft
- headerRight
Vous aurez besoin des primitives disponibles dans le fichier @ds-autonomie/assets/js/dsa-theme .