Style tab navigation.

This commit is contained in:
Ceda EI 2020-03-28 16:45:18 +05:30
parent 6a6795c7fb
commit e4dd4768b7
3 changed files with 56 additions and 12 deletions

55
App.js
View File

@ -1,4 +1,5 @@
import React, { useState } from "react";
import Color from "color";
import PropTypes from "prop-types";
import {
Appbar,
@ -9,12 +10,14 @@ import {
Button,
Provider,
RadioButton,
TouchableRipple
TouchableRipple,
overlay,
} from "react-native-paper";
import { View, StatusBar, StyleSheet } from "react-native";
import { View, StatusBar, StyleSheet, Text as RNText } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { TabView, SceneMap, TabBar } from "react-native-tab-view";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import SubjectsContainer from "./containers/SubjectsContainer";
import TimetableContainer from "./containers/TimetableContainer";
@ -59,6 +62,27 @@ ThemePicker.propTypes = {
};
const App = ({ theme, setTheme }) => {
function renderLabel({ route, focused, color }) {
return <RNText style={{color: focused ? color : backgroundColor}}>{route.title}</RNText>;
}
renderLabel.propTypes = {
route: PropTypes.object,
focused: PropTypes.bool,
color: PropTypes.string,
};
function renderIcon({ route, color }) {
return (
<View>
<Icon name={route.icon} color={color} size={20}/>
</View>
);
}
renderIcon.propTypes = renderLabel.propTypes;
const [ pane, setPane ] = useState({
index: 0,
routes: [
@ -79,6 +103,12 @@ const App = ({ theme, setTheme }) => {
subjects: SubjectsContainer,
});
const backgroundColor = theme.dark && theme.mode === "adaptive" ?
overlay(4, theme.colors.surface):
theme.colors.primary;
const activeColor = Color(backgroundColor).isLight() ? "#000" : "#FFF";
const inactiveColor = Color(backgroundColor).isLight() ? "#222" : "#AAA";
function dialogSelection(theme, idx) {
setNewTheme(idx);
setTheme(theme.theme);
@ -86,11 +116,7 @@ const App = ({ theme, setTheme }) => {
return (
<NavigationContainer theme={theme}>
<StatusBar
backgroundColor={
theme.dark && theme.mode === "adaptive" ?
theme.colors.surface :
theme.colors.primary
}
backgroundColor={backgroundColor}
/>
<Provider theme={theme}>
<Appbar.Header>
@ -110,18 +136,23 @@ const App = ({ theme, setTheme }) => {
})}
renderScene={renderScene}
shifting={true}
tabBarPosition="bottom"
renderTabBar={props => (
<TabBar
{...props}
style={{
backgroundColor: theme.dark && theme.mode === "adaptive" ?
theme.colors.surface :
theme.colors.primary,
color: theme.colors.text,
backgroundColor: backgroundColor,
}}
activeColor={activeColor}
inactiveColor={inactiveColor}
renderLabel={renderLabel}
renderIcon={renderIcon}
renderIndicator={() => null}
/>)
}
tabBarPosition="bottom"
sceneContainerStyle={{
backgroundColor: theme.colors.background
}}
/>
<Portal>
<Dialog

View File

@ -16,7 +16,9 @@
"@react-navigation/native": "^5.1.0",
"@react-navigation/stack": "^5.2.1",
"buffer": "^5.5.0",
"color": "^3.1.2",
"date-fns": "^2.11.0",
"jsan": "^3.1.13",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-gesture-handler": "^1.6.0",
@ -29,6 +31,7 @@
"react-native-vector-icons": "^6.6.0",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-persist": "^6.0.0"
},
"devDependencies": {

View File

@ -3885,6 +3885,11 @@ js-yaml@^3.13.1:
argparse "^1.0.7"
esprima "^4.0.0"
jsan@^3.1.13:
version "3.1.13"
resolved "https://registry.npmjs.org/jsan/-/jsan-3.1.13.tgz#4de8c7bf8d1cfcd020c313d438f930cec4b91d86"
integrity sha512-9kGpCsGHifmw6oJet+y8HaCl14y7qgAsxVdV3pCHDySNR3BfDC30zgkssd7x5LRVAT22dnpbe9JdzzmXZnq9/g==
jsbn@~0.1.0:
version "0.1.1"
resolved "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
@ -5415,6 +5420,11 @@ realpath-native@^1.1.0:
dependencies:
util.promisify "^1.0.0"
redux-devtools-extension@^2.13.8:
version "2.13.8"
resolved "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz#37b982688626e5e4993ff87220c9bbb7cd2d96e1"
integrity sha512-8qlpooP2QqPtZHQZRhx3x3OP5skEV1py/zUdMY28WNAocbafxdG2tRD1MWE7sp8obGMNYuLWanhhQ7EQvT1FBg==
redux-persist@^6.0.0:
version "6.0.0"
resolved "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8"