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,7 +13,7 @@ import ProximoAboutScreen from "../screens/Proximo/ProximoAboutScreen";
13 13
 import PlanexScreen from '../screens/Websites/PlanexScreen';
14 14
 import {MaterialCommunityIcons} from "@expo/vector-icons";
15 15
 import AsyncStorageManager from "../managers/AsyncStorageManager";
16
-import {useTheme, withTheme} from 'react-native-paper';
16
+import {FAB, useTheme, withTheme} from 'react-native-paper';
17 17
 import i18n from "i18n-js";
18 18
 import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
19 19
 import ScannerScreen from "../screens/ScannerScreen";
@@ -22,7 +22,6 @@ import FeedItemScreen from "../screens/FeedItemScreen";
22 22
 import {createCollapsibleStack} from "react-navigation-collapsible";
23 23
 import GroupSelectionScreen from "../screens/GroupSelectionScreen";
24 24
 
25
-
26 25
 const TAB_ICONS = {
27 26
     home: 'triangle',
28 27
     planning: 'calendar-range',
@@ -330,18 +329,31 @@ class TabNavigator extends React.Component<Props> {
330 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 342
     render() {
334 343
         return (
335 344
             <Tab.Navigator
336 345
                 initialRouteName={this.defaultRoute}
337
-                barStyle={{backgroundColor: this.props.theme.colors.surface}}
346
+                barStyle={{backgroundColor: this.props.theme.colors.surface, overflow: 'visible'}}
338 347
                 screenOptions={({route}) => ({
339
-                    tabBarIcon: ({focused, color, size}) => {
348
+                    tabBarIcon: ({focused, color}) => {
340 349
                         let icon = TAB_ICONS[route.name];
341
-                        // tintColor is ignoring activeColor and inactiveColor for some reason
342 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 358
                 activeColor={this.props.theme.colors.primary}
347 359
                 inactiveColor={this.props.theme.colors.tabIcon}

Loading…
Cancel
Save