*

Ejectable/App.tsx

@@ -1,27 +1,64 @@
 import 'react-native-gesture-handler';
 import { StatusBar } from 'expo-status-bar';
-import React, { useState } from 'react';
-import Switch from 'react-native';
+import React, { useState, useEffect } from 'react';
+import { Platform, Text, View, Switch, StyleSheet } from 'react-native';
+import * as Location from 'expo-location';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-
 import useCachedResources from './hooks/useCachedResources';
 import useColorScheme from './hooks/useColorScheme';
 import Navigation from './navigation';
 
+export var debug:boolean = false;
+export var expoGeoState:any;
+export var tripInProgress:boolean = true;
+
 export default function App() {
   const isLoadingComplete = useCachedResources();
   const colorScheme = useColorScheme();
   const [isKM, setIsKM] = useState(false);
   const toggleUnits = () => setIsKM(previousState => !previousState);
+  const [location, setLocation] = useState(Object);
+  const [errorMsg, setErrorMsg] = useState("");
+
+  useEffect(() => {
+    (async () => {
+      let { status } = await Location.requestForegroundPermissionsAsync();
+      if (status !== 'granted') {
+        setErrorMsg('Permission to access location was denied');
+        return;
+      }
+
+      let location = await Location.getCurrentPositionAsync({});
+      setLocation(location);
+    })();
+  }, []);
+
+  expoGeoState = 'Waiting..';
+  if (errorMsg) {
+    expoGeoState = errorMsg;
+  } else if (location) {
+    expoGeoState = JSON.stringify(location);
+  }
 
   if (!isLoadingComplete) {
     return null;
   } else {
+    if (!debug)
     return (
       <SafeAreaProvider>
         <Navigation colorScheme={colorScheme} />
         <StatusBar />
       </SafeAreaProvider>
     );
+    else
+    return (
+      <SafeAreaProvider>
+        <Navigation colorScheme={colorScheme} />
+        <Text>{expoGeoState}</Text>
+        <StatusBar />
+      </SafeAreaProvider>
+    );
   }
 }
+
+export function toggleTripInProgress() {tripInProgress = !tripInProgress;}

Ejectable/GT2Service.js

@@ -1,42 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Platform, Text, View, StyleSheet } from 'react-native';
-import * as Location from 'expo-location';
-
-export class GT2Service {
-
-  constructor () {
-  const [location, setLocation] = useState(null);
-  const [errorMsg, setErrorMsg] = useState(null);
-
-  }
-
-  start() {
-
-  useEffect(() => {
-    (async () => {
-      let { status } = await Location.requestForegroundPermissionsAsync();
-      if (status !== 'granted') {
-        setErrorMsg('Permission to access location was denied');
-        return;
-      }
-
-      let location = await Location.getCurrentPositionAsync({});
-      setLocation(location);
-    })();
-   }, []);
-
-   let text = 'Waiting..';
-   if (errorMsg) {
-    text = errorMsg;
-   } else if (location) {
-    text = JSON.stringify(location);
-   }
-
-   return (
-    <View style={styles.container}>
-      <Text style={styles.paragraph}>{text}</Text>
-    </View>
-    );
-  }
-
-}

Ejectable/components/ScreenInfo.tsx

@@ -40,6 +40,12 @@ export function ScreenInfo3() {
           darkColor="rgba(255,255,255,0.8)">
           Green Travel Carbon Calculator v. 2
         </Text>  
+        <Text
+          style={styles.versionText}
+          lightColor="rgba(0,0,0,0.8)"
+          darkColor="rgba(255,255,255,0.8)">
+          expo version
+        </Text>  
     </View>
   );
 }
@@ -54,5 +60,8 @@ const styles = StyleSheet.create({
     lineHeight: 24,
     textAlign: 'center',
   },
-
+  versionText: {
+    fontSize: 8,
+    textAlign: 'center',
+  },
 });

Ejectable/navigation/BottomTabNavigator.tsx

@@ -7,15 +7,14 @@ import { Ionicons } from '@expo/vector-icons';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createStackNavigator } from '@react-navigation/stack';
 import * as React from 'react';
-
 import Colors from '../constants/Colors';
 import useColorScheme from '../hooks/useColorScheme';
 import SplashScreen from '../screens/SplashScreen';
-import TripScreen from '../screens/TripScreen';
 import SettingsScreen from '../screens/SettingsScreen';
+import TripScreen from '../screens/TripScreen';
 import { SplashParamList, BottomTabParamList, TripParamList, SettingsParamList } from '../types';
 
-const BottomTab = createBottomTabNavigator<BottomTabParamList>();
+export const BottomTab = createBottomTabNavigator<BottomTabParamList>();
 
 export default function BottomTabNavigator() {
   const colorScheme = useColorScheme();
@@ -25,7 +24,7 @@ export default function BottomTabNavigator() {
       initialRouteName="Splash"
       tabBarOptions={{ activeTintColor: Colors[colorScheme].tint }}>
       <BottomTab.Screen
-        name="Home"
+        name="Splash"
         component={SplashNavigator}
         options={{
           tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
@@ -57,8 +56,7 @@ function TabBarIcon(props: { name: React.ComponentProps<typeof Ionicons>['name']
 
 // Each tab has its own navigation stack, you can read more about this pattern here:
 // https://reactnavigation.org/docs/tab-based-navigation#a-stack-navigator-for-each-tab
-const SplashStack = createStackNavigator<TripParamList>();
-const TripStack = createStackNavigator<TripParamList>();
+const SplashStack = createStackNavigator<SplashParamList>();
 
 function SplashNavigator() {
   return (
@@ -72,6 +70,8 @@ function SplashNavigator() {
   );
 }
 
+const TripStack = createStackNavigator<TripParamList>();
+
 function TripNavigator() {
   return (
     <TripStack.Navigator>

Ejectable/screens/TripScreen.tsx

@@ -1,34 +1,24 @@
 import * as React from 'react';
+import { Component } from 'react';
 import { Button, StyleSheet, Alert } from 'react-native';
 import { Text, View } from '../components/Themed';
-import { GT2Service } from '../GT2Service.js';
 import { ScreenInfo2 } from '../components/ScreenInfo';
+import { geocodeAsync } from 'expo-location';
+import * as GT2 from '../App';
+import * as Nav from '../navigation/BottomTabNavigator';
+import Navigation from '../navigation';
 
-export default function TripScreen() {
-  return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Trip Control</Text>
-      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />  
-      <ScreenInfo2 />
-      <View style={styles.controls} >
-      <Button
-        title="Start"
-        onPress={() => Alert.alert('Trip Started')}
-      />
-      <Button
-      title="Pause"
-      onPress={() => Alert.alert('Trip Paused')}
-      />  
-      <Button
-      title="Stop"
-      onPress={() => Alert.alert('Trip Completed')}
-      />
-      </View>
-    </View>
-  );
-}
+var elapsed:number, lat:number, long:number, ds:number, v:number;
 
 const styles = StyleSheet.create({
+  tripText: {
+   marginHorizontal: -100,
+   marginVertical: 60,
+   textAlign: 'left',
+   width: "80%",
+   fontSize: 12,
+   fontWeight: 'bold',
+  },
   container: {
     flex: 1,
     alignItems: 'center',
@@ -49,3 +39,85 @@ const styles = StyleSheet.create({
     width: '80%',
   },
 });
+
+
+function startTrip() {
+
+  GT2.toggleTripInProgress();
+
+  elapsed = 0.0;
+  lat     = 0.0;
+  long    = 0.0;
+  ds      = 0.0;
+  v       = 0.0;
+  
+  Alert.alert('Trip Started');
+  
+
+}
+
+function pauseTrip() {
+  Alert.alert('Trip Paused');
+
+}
+
+function endTrip() {
+
+  GT2.toggleTripInProgress();
+  Alert.alert('Trip Ended');
+
+}
+
+export default function TripScreen() {
+  if (!GT2.tripInProgress)
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Trip Control</Text>
+      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />  
+      <ScreenInfo2 />
+      <View style={styles.controls} >
+       <Button
+        title="Start"
+        onPress={() => startTrip() }
+       />
+       <Button
+        title="Pause"
+        onPress={() => pauseTrip()}
+       />  
+       <Button
+        title="Stop"
+        onPress={() => endTrip() }
+       />    
+      </View>
+    </View>
+  ); else
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Trip Control</Text>
+      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />  
+      <ScreenInfo2 />
+      <View style={styles.controls} >
+       <Button
+        title="Start"
+        onPress={() => startTrip() }
+       />
+       <Button
+        title="Pause"
+        onPress={() => pauseTrip()}
+       />  
+       <Button
+        title="Stop"
+        onPress={() => endTrip() }
+       />    
+      </View>
+      <View>
+        <Text style={styles.tripText}>
+          {'Elapsed:    '}{elapsed}{'\n'}
+          {'Geo:        '}{lat}{long}{'\n'}
+          {'Vector:     '}{ds}{v}{'\n'}
+        </Text>
+      </View>
+    </View>
+  );
+
+}

Ejectable/types.tsx

@@ -9,6 +9,7 @@ export type RootStackParamList = {
 };
 
 export type BottomTabParamList = {
+  Splash: undefined;
   Trip: undefined;
   Settings: undefined;
 };

README.md

@@ -13,6 +13,9 @@
 
    The expo client will remain standalone, not support backend function and other enhancements.
 
+     Note: the initial expo app on App Store/Play will be replaced by the full react native version
+           and a binaries for the expo client will be downloadable from greentravel.app .
+
    There will be several iterations of it before
    ...