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