mirror of https://gitlab.com/ceda_ei/sonzai.git
Add theme. Create basic layout.
This commit is contained in:
parent
190f874772
commit
f13caa7cc7
47
App.js
47
App.js
|
@ -6,11 +6,56 @@
|
|||
* @flow
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
Appbar,
|
||||
BottomNavigation,
|
||||
Text,
|
||||
Card,
|
||||
} from "react-native-paper";
|
||||
|
||||
|
||||
function Dummy() {
|
||||
return (
|
||||
<Card>
|
||||
<Card.Title title="Card Title" />
|
||||
<Card.Content>
|
||||
<Text>Dummy</Text>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const App = () => {
|
||||
const [ pane, setPane ] = useState({
|
||||
index: 0,
|
||||
routes: [
|
||||
{ key: "update", title: "Update", icon: "plus-circle" },
|
||||
{ key: "statistics", title: "Statistics", icon: "file-chart" },
|
||||
{ key: "timetable", title: "Time Table", icon: "calendar-clock" },
|
||||
],
|
||||
});
|
||||
const renderScene = BottomNavigation.SceneMap({
|
||||
update: Dummy,
|
||||
statistics: Dummy,
|
||||
timetable: Dummy,
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<Appbar.Header>
|
||||
<Appbar.Content
|
||||
title="Sonzai"
|
||||
/>
|
||||
</Appbar.Header>
|
||||
<BottomNavigation
|
||||
navigationState={pane}
|
||||
onIndexChange={(index) => setPane({
|
||||
index,
|
||||
routes: pane.routes
|
||||
})}
|
||||
renderScene={renderScene}
|
||||
shifting={true}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
14
index.js
14
index.js
|
@ -6,11 +6,21 @@ import React from "react";
|
|||
import {AppRegistry} from "react-native";
|
||||
import App from "./App";
|
||||
import {name as appName} from "./app.json";
|
||||
import { Provider } from "react-native-paper";
|
||||
import { DarkTheme, Provider } from "react-native-paper";
|
||||
|
||||
const theme = {
|
||||
...DarkTheme,
|
||||
mode: "exact",
|
||||
colors: {
|
||||
...DarkTheme.colors,
|
||||
primary: "#e91e63",
|
||||
accent: "#3f51b5",
|
||||
}
|
||||
};
|
||||
|
||||
export default function Main() {
|
||||
return (
|
||||
<Provider>
|
||||
<Provider theme={theme}>
|
||||
<App />
|
||||
</Provider>
|
||||
);
|
||||
|
|
Loading…
Reference in New Issue