Add theme. Create basic layout.

This commit is contained in:
Ceda EI 2020-03-14 16:05:35 +05:30
parent 190f874772
commit f13caa7cc7
2 changed files with 58 additions and 3 deletions

47
App.js
View File

@ -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}
/>
</> </>
); );
}; };

View File

@ -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>
); );