mirror of
				https://gitlab.com/ceda_ei/sonzai.git
				synced 2025-11-04 00:50:05 +01:00 
			
		
		
		
	Add theme. Create basic layout.
This commit is contained in:
		
							
								
								
									
										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>
 | 
			
		||||
	);
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user