mirror of https://gitlab.com/ceda_ei/sonzai.git
Replace BottomNavigation with react-native-tab-view.
Squashed commit of the following: commite4dd4768b7Author: Ceda EI <ceda_ei@webionite.com> Date: Sat Mar 28 16:45:18 2020 +0530 Style tab navigation. commit6a6795c7fbAuthor: Ceda EI <ceda_ei@webionite.com> Date: Thu Mar 26 04:05:50 2020 +0530 Add basic working model using react-native-tab-view.
This commit is contained in:
parent
1dcc917825
commit
6eadc6739f
63
App.js
63
App.js
|
|
@ -1,8 +1,8 @@
|
|||
import React, { useState } from "react";
|
||||
import Color from "color";
|
||||
import PropTypes from "prop-types";
|
||||
import {
|
||||
Appbar,
|
||||
BottomNavigation,
|
||||
Text,
|
||||
Card,
|
||||
Dialog,
|
||||
|
|
@ -10,11 +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: [
|
||||
|
|
@ -72,13 +96,19 @@ const App = ({ theme, setTheme }) => {
|
|||
const [ newTheme, setNewTheme ] = useState(themes.findIndex(
|
||||
i => JSON.stringify(i.theme) === JSON.stringify(theme)
|
||||
));
|
||||
const renderScene = BottomNavigation.SceneMap({
|
||||
const renderScene = SceneMap({
|
||||
add: Dummy,
|
||||
statistics: Dummy,
|
||||
timetable: TimetableContainer,
|
||||
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>
|
||||
|
|
@ -102,7 +128,7 @@ const App = ({ theme, setTheme }) => {
|
|||
onPress={() => setShowDialog(true)}
|
||||
/>
|
||||
</Appbar.Header>
|
||||
<BottomNavigation
|
||||
<TabView
|
||||
navigationState={pane}
|
||||
onIndexChange={(index) => setPane({
|
||||
index,
|
||||
|
|
@ -110,6 +136,23 @@ const App = ({ theme, setTheme }) => {
|
|||
})}
|
||||
renderScene={renderScene}
|
||||
shifting={true}
|
||||
tabBarPosition="bottom"
|
||||
renderTabBar={props => (
|
||||
<TabBar
|
||||
{...props}
|
||||
style={{
|
||||
backgroundColor: backgroundColor,
|
||||
}}
|
||||
activeColor={activeColor}
|
||||
inactiveColor={inactiveColor}
|
||||
renderLabel={renderLabel}
|
||||
renderIcon={renderIcon}
|
||||
renderIndicator={() => null}
|
||||
/>)
|
||||
}
|
||||
sceneContainerStyle={{
|
||||
backgroundColor: theme.colors.background
|
||||
}}
|
||||
/>
|
||||
<Portal>
|
||||
<Dialog
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ function Subjects({ theme, subjects, addSubject, removeSubject }) {
|
|||
setShowDialog(false);
|
||||
}
|
||||
return (
|
||||
<Portal.Host><ScrollView>
|
||||
<Portal.Host><ScrollView style={{ backgroundColor: theme.colors.background }}>
|
||||
{subjects.length === 0 ?
|
||||
<Text style={style.text}>
|
||||
No Subjects added. Press + to add a subject.
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
@ -24,10 +26,12 @@
|
|||
"react-native-reanimated": "^1.7.0",
|
||||
"react-native-safe-area-context": "^0.7.3",
|
||||
"react-native-screens": "^2.3.0",
|
||||
"react-native-tab-view": "^2.13.0",
|
||||
"react-native-uuid": "^1.4.9",
|
||||
"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": {
|
||||
|
|
|
|||
15
yarn.lock
15
yarn.lock
|
|
@ -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"
|
||||
|
|
@ -5270,6 +5275,11 @@ react-native-screens@^2.3.0:
|
|||
dependencies:
|
||||
debounce "^1.2.0"
|
||||
|
||||
react-native-tab-view@^2.13.0:
|
||||
version "2.13.0"
|
||||
resolved "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-2.13.0.tgz#23037aa43b0f8f682ddc20415a4baaaf6f82ae8f"
|
||||
integrity sha512-AeYbp/u91+D/C9+PmVEPBmFb3ixv8IkLMC3Sc5MajJ/fg0Zl3Of+BcEknBvTnKoe7Fj2y8+Qf9zorBbh5xzh4A==
|
||||
|
||||
react-native-uuid@^1.4.9:
|
||||
version "1.4.9"
|
||||
resolved "https://registry.npmjs.org/react-native-uuid/-/react-native-uuid-1.4.9.tgz#a526742f8fddfe6414500655212ca8d109c40229"
|
||||
|
|
@ -5410,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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue