bquintan/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Added new home tab icon

Browse source
This commit is contained in:
Arnaud Vergnet 2020-04-16 16:04:22 +02:00
parent 30e726b694
commit 54861d729d
3 changed files with 18 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/tab-icon-outline.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
assets/tab-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

24
src/navigation/MainTabNavigator.js
View file

@ -13,7 +13,7 @@ import ProximoAboutScreen from "../screens/Proximo/ProximoAboutScreen";
import PlanexScreen from '../screens/Websites/PlanexScreen'; import PlanexScreen from '../screens/Websites/PlanexScreen';
import {MaterialCommunityIcons} from "@expo/vector-icons"; import {MaterialCommunityIcons} from "@expo/vector-icons";
import AsyncStorageManager from "../managers/AsyncStorageManager"; import AsyncStorageManager from "../managers/AsyncStorageManager";
import {useTheme, withTheme} from 'react-native-paper'; import {FAB, useTheme, withTheme} from 'react-native-paper';
import i18n from "i18n-js"; import i18n from "i18n-js";
import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen"; import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
import ScannerScreen from "../screens/ScannerScreen"; import ScannerScreen from "../screens/ScannerScreen";
@ -22,7 +22,6 @@ import FeedItemScreen from "../screens/FeedItemScreen";
import {createCollapsibleStack} from "react-navigation-collapsible"; import {createCollapsibleStack} from "react-navigation-collapsible";
import GroupSelectionScreen from "../screens/GroupSelectionScreen"; import GroupSelectionScreen from "../screens/GroupSelectionScreen";
const TAB_ICONS = { const TAB_ICONS = {
home: 'triangle', home: 'triangle',
planning: 'calendar-range', planning: 'calendar-range',
@ -330,18 +329,31 @@ class TabNavigator extends React.Component<Props> {
this.createHomeStackComponent = () => HomeStackComponent(props.defaultRoute, props.defaultData); this.createHomeStackComponent = () => HomeStackComponent(props.defaultRoute, props.defaultData);
} }
getHomeButton(focused: boolean) {
let icon = focused ? require('../../assets/tab-icon.png') : require('../../assets/tab-icon-outline.png')
return (
<FAB
icon={icon}
small
style={{position: 'absolute', top: '-25%'}}/>
);
}
render() { render() {
return ( return (
<Tab.Navigator <Tab.Navigator
initialRouteName={this.defaultRoute} initialRouteName={this.defaultRoute}
barStyle={{backgroundColor: this.props.theme.colors.surface}} barStyle={{backgroundColor: this.props.theme.colors.surface, overflow: 'visible'}}
screenOptions={({route}) => ({ screenOptions={({route}) => ({
tabBarIcon: ({focused, color, size}) => { tabBarIcon: ({focused, color}) => {
let icon = TAB_ICONS[route.name]; let icon = TAB_ICONS[route.name];
// tintColor is ignoring activeColor and inactiveColor for some reason
icon = focused ? icon : icon + ('-outline'); icon = focused ? icon : icon + ('-outline');
return <MaterialCommunityIcons name={icon} color={color} size={26}/>; if (route.name !== "home")
return <MaterialCommunityIcons name={icon} color={color} size={26}/>;
else
return this.getHomeButton(focused);
}, },
tabBarLabel: route.name !== 'home' ? undefined : ''
})} })}
activeColor={this.props.theme.colors.primary} activeColor={this.props.theme.colors.primary}
inactiveColor={this.props.theme.colors.tabIcon} inactiveColor={this.props.theme.colors.tabIcon}