Browse Source

Added new home tab icon

Arnaud Vergnet 4 years ago
parent
commit
54861d729d
3 changed files with 18 additions and 6 deletions
  1. BIN
      assets/tab-icon-outline.png
  2. BIN
      assets/tab-icon.png
  3. 18
    6
      src/navigation/MainTabNavigator.js

BIN
assets/tab-icon-outline.png View File


BIN
assets/tab-icon.png View File


+ 18
- 6
src/navigation/MainTabNavigator.js View File

13
 import PlanexScreen from '../screens/Websites/PlanexScreen';
13
 import PlanexScreen from '../screens/Websites/PlanexScreen';
14
 import {MaterialCommunityIcons} from "@expo/vector-icons";
14
 import {MaterialCommunityIcons} from "@expo/vector-icons";
15
 import AsyncStorageManager from "../managers/AsyncStorageManager";
15
 import AsyncStorageManager from "../managers/AsyncStorageManager";
16
-import {useTheme, withTheme} from 'react-native-paper';
16
+import {FAB, useTheme, withTheme} from 'react-native-paper';
17
 import i18n from "i18n-js";
17
 import i18n from "i18n-js";
18
 import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
18
 import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
19
 import ScannerScreen from "../screens/ScannerScreen";
19
 import ScannerScreen from "../screens/ScannerScreen";
22
 import {createCollapsibleStack} from "react-navigation-collapsible";
22
 import {createCollapsibleStack} from "react-navigation-collapsible";
23
 import GroupSelectionScreen from "../screens/GroupSelectionScreen";
23
 import GroupSelectionScreen from "../screens/GroupSelectionScreen";
24
 
24
 
25
-
26
 const TAB_ICONS = {
25
 const TAB_ICONS = {
27
     home: 'triangle',
26
     home: 'triangle',
28
     planning: 'calendar-range',
27
     planning: 'calendar-range',
330
         this.createHomeStackComponent = () => HomeStackComponent(props.defaultRoute, props.defaultData);
329
         this.createHomeStackComponent = () => HomeStackComponent(props.defaultRoute, props.defaultData);
331
     }
330
     }
332
 
331
 
332
+    getHomeButton(focused: boolean) {
333
+        let icon = focused ? require('../../assets/tab-icon.png') : require('../../assets/tab-icon-outline.png')
334
+        return (
335
+                <FAB
336
+                    icon={icon}
337
+                    small
338
+                    style={{position: 'absolute', top: '-25%'}}/>
339
+        );
340
+    }
341
+
333
     render() {
342
     render() {
334
         return (
343
         return (
335
             <Tab.Navigator
344
             <Tab.Navigator
336
                 initialRouteName={this.defaultRoute}
345
                 initialRouteName={this.defaultRoute}
337
-                barStyle={{backgroundColor: this.props.theme.colors.surface}}
346
+                barStyle={{backgroundColor: this.props.theme.colors.surface, overflow: 'visible'}}
338
                 screenOptions={({route}) => ({
347
                 screenOptions={({route}) => ({
339
-                    tabBarIcon: ({focused, color, size}) => {
348
+                    tabBarIcon: ({focused, color}) => {
340
                         let icon = TAB_ICONS[route.name];
349
                         let icon = TAB_ICONS[route.name];
341
-                        // tintColor is ignoring activeColor and inactiveColor for some reason
342
                         icon = focused ? icon : icon + ('-outline');
350
                         icon = focused ? icon : icon + ('-outline');
343
-                        return <MaterialCommunityIcons name={icon} color={color} size={26}/>;
351
+                        if (route.name !== "home")
352
+                            return <MaterialCommunityIcons name={icon} color={color} size={26}/>;
353
+                        else
354
+                            return this.getHomeButton(focused);
344
                     },
355
                     },
356
+                    tabBarLabel: route.name !== 'home' ? undefined : ''
345
                 })}
357
                 })}
346
                 activeColor={this.props.theme.colors.primary}
358
                 activeColor={this.props.theme.colors.primary}
347
                 inactiveColor={this.props.theme.colors.tabIcon}
359
                 inactiveColor={this.props.theme.colors.tabIcon}

Loading…
Cancel
Save