ceda_ei
/
sonzai
mirror of https://gitlab.com/ceda_ei/sonzai.git
1
0
Fork 0
Code Issues Releases Wiki Activity

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

This commit is contained in:
Ceda EI 2020-03-26 04:05:50 +05:30
parent 1dcc917825
commit 6a6795c7fb
4 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
App.js
View File

@ -2,7 +2,6 @@ import React, { useState } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { import {
Appbar, Appbar,
BottomNavigation,
Text, Text,
Card, Card,
Dialog, Dialog,
@ -15,6 +14,7 @@ import {
import { View, StatusBar, StyleSheet } from "react-native"; import { View, StatusBar, StyleSheet } from "react-native";
import { NavigationContainer } from "@react-navigation/native"; import { NavigationContainer } from "@react-navigation/native";
import { TabView, SceneMap, TabBar } from "react-native-tab-view";
import SubjectsContainer from "./containers/SubjectsContainer"; import SubjectsContainer from "./containers/SubjectsContainer";
import TimetableContainer from "./containers/TimetableContainer"; import TimetableContainer from "./containers/TimetableContainer";
@ -72,7 +72,7 @@ const App = ({ theme, setTheme }) => {
const [ newTheme, setNewTheme ] = useState(themes.findIndex( const [ newTheme, setNewTheme ] = useState(themes.findIndex(
i => JSON.stringify(i.theme) === JSON.stringify(theme) i => JSON.stringify(i.theme) === JSON.stringify(theme)
)); ));
const renderScene = BottomNavigation.SceneMap({ const renderScene = SceneMap({
add: Dummy, add: Dummy,
statistics: Dummy, statistics: Dummy,
timetable: TimetableContainer, timetable: TimetableContainer,
@ -102,7 +102,7 @@ const App = ({ theme, setTheme }) => {
onPress={() => setShowDialog(true)} onPress={() => setShowDialog(true)}
/> />
</Appbar.Header> </Appbar.Header>
<BottomNavigation <TabView
navigationState={pane} navigationState={pane}
onIndexChange={(index) => setPane({ onIndexChange={(index) => setPane({
index, index,
@ -110,6 +110,18 @@ const App = ({ theme, setTheme }) => {
})} })}
renderScene={renderScene} renderScene={renderScene}
shifting={true} 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> <Portal>
<Dialog <Dialog

2
components/Subjects.js
View File

@ -23,7 +23,7 @@ function Subjects({ theme, subjects, addSubject, removeSubject }) {
setShowDialog(false); setShowDialog(false);
} }
return ( return (
<Portal.Host><ScrollView> <Portal.Host><ScrollView style={{ backgroundColor: theme.colors.background }}>
{subjects.length === 0 ? {subjects.length === 0 ?
<Text style={style.text}> <Text style={style.text}>
No Subjects added. Press + to add a subject. No Subjects added. Press + to add a subject.

1
package.json
View File

@ -24,6 +24,7 @@
"react-native-reanimated": "^1.7.0", "react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.7.3", "react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.3.0", "react-native-screens": "^2.3.0",
"react-native-tab-view": "^2.13.0",
"react-native-uuid": "^1.4.9", "react-native-uuid": "^1.4.9",
"react-native-vector-icons": "^6.6.0", "react-native-vector-icons": "^6.6.0",
"react-redux": "^7.2.0", "react-redux": "^7.2.0",

5
yarn.lock
View File

@ -5270,6 +5270,11 @@ react-native-screens@^2.3.0:
dependencies: dependencies:
debounce "^1.2.0" 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: react-native-uuid@^1.4.9:
version "1.4.9" version "1.4.9"
resolved "https://registry.npmjs.org/react-native-uuid/-/react-native-uuid-1.4.9.tgz#a526742f8fddfe6414500655212ca8d109c40229" resolved "https://registry.npmjs.org/react-native-uuid/-/react-native-uuid-1.4.9.tgz#a526742f8fddfe6414500655212ca8d109c40229"