*

Ejectable/components/ScreenInfo.tsx

@@ -31,6 +31,19 @@ export function ScreenInfo2() {
   );
 }
 
+export function ScreenInfo3() {
+  return (
+    <View style={styles.settingsContainer}>
+        <Text
+          style={styles.settingsText}
+          lightColor="rgba(0,0,0,0.8)"
+          darkColor="rgba(255,255,255,0.8)">
+          Green Travel Carbon Calculator v. 2                  
+        </Text>  
+    </View>
+  );
+}
+
 const styles = StyleSheet.create({
   settingsContainer: {
     marginHorizontal: 50,

Ejectable/navigation/BottomTabNavigator.tsx

@@ -10,9 +10,10 @@ 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 { BottomTabParamList, TripParamList, SettingsParamList } from '../types';
+import { SplashParamList, BottomTabParamList, TripParamList, SettingsParamList } from '../types';
 
 const BottomTab = createBottomTabNavigator<BottomTabParamList>();
 
@@ -21,11 +22,11 @@ export default function BottomTabNavigator() {
 
   return (
     <BottomTab.Navigator
-      initialRouteName="Trip"
+      initialRouteName="Splash"
       tabBarOptions={{ activeTintColor: Colors[colorScheme].tint }}>
       <BottomTab.Screen
-        name="Trip"
-        component={TripNavigator}
+        name="Home"
+        component={SplashNavigator}
         options={{
           tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
         }}
@@ -37,6 +38,13 @@ export default function BottomTabNavigator() {
           tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
         }}
       />
+      <BottomTab.Screen
+        name="Trip"
+        component={TripNavigator}
+        options={{
+          tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
+        }}
+      />
     </BottomTab.Navigator>
   );
 }
@@ -49,8 +57,21 @@ 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>();
 
+function SplashNavigator() {
+  return (
+    <SplashStack.Navigator>
+      <SplashStack.Screen
+        name="SplashScreen"
+        component={SplashScreen}
+        options={{ headerTitle: 'Green Travel' }}
+      />
+    </SplashStack.Navigator>
+  );
+}
+
 function TripNavigator() {
   return (
     <TripStack.Navigator>

Ejectable/navigation/LinkingConfiguration.ts

@@ -12,14 +12,19 @@ export default {
     screens: {
       Root: {
         screens: {
+          Splash: {
+            screens: {
+              SplashScreen: 'one',
+            },
+          },
           Trip: {
             screens: {
-              TripScreen: 'one',
+              TripScreen: 'two',
             },
           },
           Settings: {
             screens: {
-              SettingsScreen: 'two',
+              SettingsScreen: 'three',
             },
           },
         },

Ejectable/screens/SettingsScreen.tsx

@@ -26,11 +26,11 @@ export default function SettingsScreen() {
        <View style={styles.controls} >
        <Button
          title="Jet"
-         onPress={() => Alert.alert('Jet Fuel Selected')}
+         onPress={() => Alert.alert('Jet Fuel Selected \n 285 g / passenger / km')}
        />
        <Button
        title="Gasoline"
-       onPress={() => Alert.alert('Gasoline Selected')}
+       onPress={() => Alert.alert('Gasoline Selected \n 255 g for driver \n only passenger / km')}
        />  
        <Button
        title="Food"

Ejectable/screens/SplashScreen.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { Text, View } from '../components/Themed';
+import { ScreenInfo3 } from '../components/ScreenInfo';
+
+export default function TripScreen() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>GT2</Text>
+      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />  
+      <ScreenInfo3 />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 40,
+    fontWeight: 'bold',
+  },
+  separator: {
+    marginVertical: 10,
+    height: 1,
+    width: '80%',
+  },
+});

Ejectable/types.tsx

@@ -20,3 +20,7 @@ export type TripParamList = {
 export type SettingsParamList = {
   SettingsScreen: undefined;
 };
+
+export type SplashParamList = {
+  SplashScreen: undefined;
+};