From 6eadc6739fc720ab2f67c07d7575c0b0886563f7 Mon Sep 17 00:00:00 2001
From: Ceda EI <ceda_ei@webionite.com>
Date: Sat, 28 Mar 2020 18:18:49 +0530
Subject: [PATCH] Replace BottomNavigation with react-native-tab-view.

Squashed commit of the following:

commit e4dd4768b703537bc32b897d835331ca72784d3b
Author: Ceda EI <ceda_ei@webionite.com>
Date:   Sat Mar 28 16:45:18 2020 +0530

    Style tab navigation.

commit 6a6795c7fb3a09160337af34fe53ff5c7df046d3
Author: Ceda EI <ceda_ei@webionite.com>
Date:   Thu Mar 26 04:05:50 2020 +0530

    Add basic working model using react-native-tab-view.
---
 App.js                 | 63 +++++++++++++++++++++++++++++++++++-------
 components/Subjects.js |  2 +-
 package.json           |  4 +++
 yarn.lock              | 15 ++++++++++
 4 files changed, 73 insertions(+), 11 deletions(-)

diff --git a/App.js b/App.js
index 517b252..8476c7c 100644
--- a/App.js
+++ b/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
diff --git a/components/Subjects.js b/components/Subjects.js
index b1bf03c..b8574d8 100644
--- a/components/Subjects.js
+++ b/components/Subjects.js
@@ -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.
diff --git a/package.json b/package.json
index 19446a9..e6ef472 100644
--- a/package.json
+++ b/package.json
@@ -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": {
diff --git a/yarn.lock b/yarn.lock
index abcacb6..8d842c0 100644
--- a/yarn.lock
+++ b/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"