completed navigation

Ejectable/GT2.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import * as Location from 'expo-location';
 import { Coordinate } from "./Coordinate";
 import { Text, View } from './components/Themed';
-import { Button, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 
        var   debug:boolean      = false;
 export var   endPending:boolean = false;
@@ -12,8 +12,8 @@ export var   locEnabled:boolean = false;
        const heartbeat:number   = 500; 
        const displayBeat:number = 3;  
 
-export function getEndPending() { return(endPending) }
+export function getEndPending()              { return(endPending); }
-export function toggleEndPending() { endPending = !endPending;}
+export function setEndPending(value:boolean) { endPending = value; }
 
 const styles = StyleSheet.create({
     tripText: {
@@ -149,7 +149,7 @@ export class GT2 {
         this.trip.stop();
         this.inProgress = false;
         this.nTrips++;
-        toggleEndPending();
+        setEndPending(true);
         
     }
 
@@ -265,10 +265,10 @@ export class TripDisplay extends React.Component {
 
 export class TripSummary extends React.Component {
     
-  constructor(props:any) {
+  handleRefresh = () => {
-      super(props);
+    // by calling this method react re-renders the component
-      this.state = { slug: null };
+    this.setState({});
-    }
+  };
 
   render() {
 

Ejectable/navigation/index.tsx

@@ -42,7 +42,7 @@ function RootNavigator() {
       <Stack.Screen name="Root" component={BottomTabNavigator} options={{ headerShown: false }} />
       <Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }} />
       <Stack.Group screenOptions={{ presentation: 'modal' }}>
-        <Stack.Screen name="Modal" component={ModalScreen} />
+        <Stack.Screen name='Modal' component={ModalScreen} />
       </Stack.Group>
     </Stack.Navigator>
   );

Ejectable/screens/HomeScreen.tsx

@@ -2,12 +2,13 @@ import * as React from 'react';
 import { StyleSheet, ImageBackground } from 'react-native';
 import { Text, View } from '../components/Themed';
 import { ScreenInfo3 } from '../components/ScreenInfo';
+import { RootTabScreenProps } from '../types';
 
 const image = { uri: "https://meansofproduction.biz/images/GREENT.jpg" };
 
 export var nav:any = null;
 
-export default function HomeScreen(navigation:any) {
+export default function HomeScreen( { navigation }: RootTabScreenProps<'Home'>) {
   nav = navigation;
   return (
     <View style={styles.container}>

Ejectable/screens/ModalScreen.tsx

@@ -1,17 +1,20 @@
 import { StatusBar } from 'expo-status-bar';
 import * as React from 'react';
-import { Platform, StyleSheet } from 'react-native';
+import { Button, Platform, StyleSheet } from 'react-native';
 
 import EndScreenInfo from '../components/EndScreenInfo';
 import { Text, View } from '../components/Themed';
+import { RootTabScreenProps } from '../types';
 
-export default function ModalScreen() {
+export default function ModalScreen({ navigation }: RootTabScreenProps<'Settings'>) {
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>Modal</Text>
+      <Text style={styles.title}>Carbon Impact</Text>
       <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
       <EndScreenInfo path="/screens/ModalScreen.tsx" />
-
+      <Button title={'Dismiss'}
+          onPress={() => { navigation.goBack(); }}
+        />
       {/* Use a light status bar on iOS to account for the black space above the modal */}
       <StatusBar style={Platform.OS === 'ios' ? 'light' : 'auto'} />
     </View>

Ejectable/screens/SettingsScreen.tsx

@@ -5,8 +5,9 @@ import { useState } from 'react';
 import ScreenInfo from '../components/ScreenInfo';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { Trips } from '../GT2';
+import { RootTabScreenProps } from '../types';
 
-export default function SettingsScreen() {
+export default function SettingsScreen( { navigation }: RootTabScreenProps<'Settings'>) {
   const [number, onChangeNumber] = React.useState("");
   const [isKM, setMiles] = useState(false);
   const toggleUnits = () => setMiles(previousState => !previousState);

Ejectable/screens/TripScreen.tsx

@@ -4,7 +4,10 @@ import { Alert, BackHandler, Button, StyleSheet } from 'react-native';
 import { Text, View } from '../components/Themed';
 import { ScreenInfo2 } from '../components/ScreenInfo';
 import  EndScreenInfo  from '../components/EndScreenInfo';
-import { locEnabled, getEndPending, toggleEndPending, TripDisplay, Trips } from '../GT2';
+import { locEnabled, getEndPending, setEndPending, TripDisplay, Trips } from '../GT2';
+import { RootTabScreenProps } from '../types';
+
+ var debug:number = 10;
 
 const styles = StyleSheet.create({
   container: {
@@ -31,7 +34,7 @@ const styles = StyleSheet.create({
 
 function startTrip() {
 
-  if (!locEnabled ) {
+  if (!locEnabled && debug != 10) {
     Alert.alert("You must enable both foreground\n and background location tracking.");
     return;
   }
@@ -55,12 +58,11 @@ function pauseTrip() {
 
 function endTrip() {  Trips.end(); }
 
-export default function TripScreen( ) {
+export default function TripScreen( { navigation }: RootTabScreenProps<'Trip'>) {
 
   const [sButtonText, setSButtonText] = useState("Start"); 
   const [pButtonText, setPButtonText] = useState("Pause");
    
-  if (!getEndPending()) 
    return (
     <View style={styles.container}>
       <Text style={styles.title}>Trip Control</Text>
@@ -70,8 +72,13 @@ export default function TripScreen( ) {
        <Button
         title={sButtonText}
         onPress={() => {
-          if (!Trips.inProgress) {setSButtonText("End");startTrip();setPButtonText('Pause');}
+          if (!Trips.inProgress) {setSButtonText("End");
-          else                   {setSButtonText('Start');endTrip();}}
+                                  startTrip();
+                                  setPButtonText('Pause');}
+          else                   {setSButtonText('Start');
+                                  endTrip();
+                                  navigation.push('Modal');
+        }}
         }
        />
        <Button
@@ -85,14 +92,14 @@ export default function TripScreen( ) {
       <TripDisplay></TripDisplay>
     </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)" />  
        <EndScreenInfo path="/screens/TripScreen.tsx" />
-       <Button title={'Dismiss'}
+         <Button title={'Done'}
-        onPress={() => { toggleEndPending();  }}
+          onPress={() => { setEndPending(false); navigation.jumpTo('Trip'); }}
         />
      </View>
     );