Add basic working model using react-native-tab-view.

App.js

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import PropTypes from "prop-types";
 import {
 	Appbar,
-	BottomNavigation,
 	Text,
 	Card,
 	Dialog,
@@ -15,6 +14,7 @@ import {
 
 import { View, StatusBar, StyleSheet } from "react-native";
 import { NavigationContainer } from "@react-navigation/native";
+import { TabView, SceneMap, TabBar } from "react-native-tab-view";
 
 import SubjectsContainer from "./containers/SubjectsContainer";
 import TimetableContainer from "./containers/TimetableContainer";
@@ -72,7 +72,7 @@ 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,
@@ -102,7 +102,7 @@ const App = ({ theme, setTheme }) => {
 						onPress={() => setShowDialog(true)}
 					/>
 				</Appbar.Header>
-				<BottomNavigation
+				<TabView
 					navigationState={pane}
 					onIndexChange={(index) => setPane({
 						index,
@@ -110,6 +110,18 @@ const App = ({ theme, setTheme }) => {
 					})}
 					renderScene={renderScene}
 					shifting={true}
+					renderTabBar={props => (
+						<TabBar
+							{...props}
+							style={{
+								backgroundColor: theme.dark && theme.mode === "adaptive" ?
+									theme.colors.surface :
+									theme.colors.primary,
+								color: theme.colors.text,
+							}}
+						/>)
+					}
+					tabBarPosition="bottom"
 				/>
 				<Portal>
 					<Dialog

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.

package.json

@@ -24,6 +24,7 @@
     "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",

yarn.lock

@@ -5270,6 +5270,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"