Skip to content

2
2022_223_Digi Bus
Commit 089a2f8c authored by Gunasekara M.A.L.M's avatar Gunasekara M.A.L.M
Browse files
Options

implement routing

parent f6bf28f0
Show whitespace changes
Inline Side-by-side
Showing with 155 additions and 109 deletions
digibus/App.js
View file @ 089a2f8c
...@@ -6,9 +6,8 @@ ...@@ -6,9 +6,8 @@
* @flow strict-local * @flow strict-local
*/ */
import React from 'react'; import React from 'react';
import type {Node} from 'react'; import {
import {
SafeAreaView, SafeAreaView,
ScrollView, ScrollView,
StatusBar, StatusBar,
...@@ -16,45 +15,28 @@ import { ...@@ -16,45 +15,28 @@ import {
Text, Text,
useColorScheme, useColorScheme,
View, View,
} from 'react-native'; } from 'react-native';
import { import {
Colors, Colors,
DebugInstructions, DebugInstructions,
Header, Header,
LearnMoreLinks, LearnMoreLinks,
ReloadInstructions, ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen'; } from 'react-native/Libraries/NewAppScreen';
/* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's import { Stack, Router, Scene, ActionConst } from 'react-native-router-flux';
* LTI update could not be added via codemod */ import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
const Section = ({children, title}): Node => {
const isDarkMode = useColorScheme() === 'dark';
return (
<View style={styles.sectionContainer}>
<Text
style={[
styles.sectionTitle,
{
color: isDarkMode ? Colors.white : Colors.black,
},
]}>
{title}
</Text>
<Text
style={[
styles.sectionDescription,
{
color: isDarkMode ? Colors.light : Colors.dark,
},
]}>
{children}
</Text>
</View>
);
};
const App: () => Node = () => {
import SplashScreen from './src/screen/splash_screen/splashscreen';
import HomeScreen from './src/screen/home_screen/homescreen';
import BusListScreen from './src/screen/bus_list_screen/buslistscreen';
import MapScreen from './src/screen/map_screen/mapscreen';
import BusRoteScreen from './src/screen/bus_route_screen/busroutescreen';
const App = () => {
const isDarkMode = useColorScheme() === 'dark'; const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = { const backgroundStyle = {
...@@ -62,40 +44,91 @@ const App: () => Node = () => { ...@@ -62,40 +44,91 @@ const App: () => Node = () => {
}; };
return ( return (
<SafeAreaView style={backgroundStyle}> <Router>
<StatusBar <Stack key="root" headerLayoutPreset="center">
barStyle={isDarkMode ? 'light-content' : 'dark-content'} <Scene
backgroundColor={backgroundStyle.backgroundColor} key="splash"
type="replace"
component={SplashScreen}
initial
hideNavBar={true}
/> />
<ScrollView
contentInsetAdjustmentBehavior="automatic" <Scene
style={backgroundStyle}> key="authenticated"
<Header /> type="replace"
<View renderTitle={() => (
style={{ <View style={styles.navBarStyles}>
backgroundColor: isDarkMode ? Colors.black : Colors.white, <View style={styles.app_logs_holder}>
}}> {/* <Image source={{ uri: 'tabbar_icon' }} style={styles.app_logs} /> */}
<Section title="Step One"> </View>
Edit <Text style={styles.highlight}>App.js</Text> to change this
screen and then come back to see your edits.
</Section>
<Section title="See Your Changes">
<ReloadInstructions />
</Section>
<Section title="Debug">
<DebugInstructions />
</Section>
<Section title="Learn More">
Read the docs to discover what to do next:
</Section>
<LearnMoreLinks />
</View> </View>
</ScrollView> )}
</SafeAreaView> //hideNavBar={true}
panHandlers={null}
>
<Scene
key="dashbord"
title="Select Route And Bus off"
component={HomeScreen}
renderTitle={() => (
<View style={styles.navBarStyles}>
<View style={styles.app_logs_holder}>
{/* <Image source={{ uri: 'tabbar_icon' }} style={styles.app_logs} /> */}
<Text style={{ color: '#000' }}>Select Route And Bus off</Text>
</View>
</View>
)}
hideNavBar={true}
initial
/>
<Scene
key="busRoute"
title="Bus Details"
component={BusRoteScreen}
// renderTitle={() => (
// <View style={styles.navBarStyles}>
// <View style={styles.app_logs_holder}>
// {/* <Image source={{ uri: 'tabbar_icon' }} style={styles.app_logs} /> */}
// </View>
// </View>
// )}
hideNavBar={true}
/>
<Scene
key="busList"
title="Bus Details"
component={BusListScreen}
// renderTitle={() => (
// <View style={styles.navBarStyles}>
// <View style={styles.app_logs_holder}>
// {/* <Image source={{ uri: 'tabbar_icon' }} style={styles.app_logs} /> */}
// </View>
// </View>
// )}
hideNavBar={true}
/>
<Scene
key="mapScreen"
title="View On Map"
component={MapScreen}
// renderTitle={() => (
// <View style={styles.navBarStyles}>
// <View style={styles.app_logs_holder}>
// {/* <Image source={{ uri: 'tabbar_icon' }} style={styles.app_logs} /> */}
// </View>
// </View>
// )}
hideNavBar={true}
/>
</Scene>
</Stack>
</Router>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
sectionContainer: { sectionContainer: {
marginTop: 32, marginTop: 32,
paddingHorizontal: 24, paddingHorizontal: 24,
...@@ -112,6 +145,19 @@ const styles = StyleSheet.create({ ...@@ -112,6 +145,19 @@ const styles = StyleSheet.create({
highlight: { highlight: {
fontWeight: '700', fontWeight: '700',
}, },
}); navBarStyles: {
width: "100%", //wp('100%')
height: hp('7.5%'),
alignItems: 'center',
justifyContent: 'center',
},
app_logs_holder: {
width: wp('10%'),
height: hp('5%'),
alignContent: 'center',
alignItems: 'center',
},
});
export default App;
\ No newline at end of file
export default App;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment