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
|
* @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 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 (
|
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 {AppRegistry} from "react-native";
|
||||||
import App from "./App";
|
import App from "./App";
|
||||||
import {name as appName} from "./app.json";
|
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() {
|
export default function Main() {
|
||||||
return (
|
return (
|
||||||
<Provider>
|
<Provider theme={theme}>
|
||||||
<App />
|
<App />
|
||||||
</Provider>
|
</Provider>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue