Add files via upload

App.js

@@ -0,0 +1,37 @@
+import { Provider } from 'react-redux';
+import store from './store';
+import MapScreen from './screens/MapScreen';
+import HomeScreen from './screens/HomeScreen';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import 'react-native-gesture-handler';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+
+export default function App() {
+  const Stack = createStackNavigator();
+  return (
+    <Provider store={store}>
+      <NavigationContainer>
+        <SafeAreaProvider>
+          <Stack.Navigator>
+            <Stack.Screen
+              name="HomeScreen"
+              component={HomeScreen}
+              options={{
+                headerShown: false,
+              }}
+            />
+            <Stack.Screen
+              name="MapScreen"
+              component={MapScreen}
+              options={{
+                headerShown: false,
+              }}
+            />
+          </Stack.Navigator>
+        </SafeAreaProvider>
+      </NavigationContainer>
+    </Provider>
+  );
+}
+

app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "uber-clone-reactnative",
+    "slug": "uber-clone-reactnative",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

babel.config.js

@@ -0,0 +1,15 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        "module:react-native-dotenv",
+        {
+          moduleName: "@env",
+          path: ".env",
+        },
+      ],
+    ],
+  };
+};

components/Map.js

@@ -0,0 +1,62 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import MapView, { Marker } from 'react-native-maps';
+import tw from 'tailwind-react-native-classnames';
+import { useSelector } from 'react-redux';
+import { selectOrigin } from '../slices/navSlice';
+const Map = () => {
+    const origin = useSelector(selectOrigin);
+    return (
+        <MapView
+            style={tw`flex-1`}
+            mapType="mutedStandard"
+            initialRegion={{
+                latitude: 37.78825,
+                longitude: -122.4324,
+                latitudeDelta: 0.0922,
+                longitudeDelta: 0.0421,
+            }}
+        >
+
+            <Marker
+                coordinate={{
+                    latitude: 37.78825,
+                    longitude: -122.4324,
+                }}
+                title='Origin'
+                description='This is the origin'
+                identifier='origin'
+            />
+
+
+        </MapView>
+    )
+}
+
+export default Map;
+
+const styles = StyleSheet.create({});
+
+
+
+ // <MapView
+        //     style={tw`flex-1`}
+        //     mapType="mutedStandard"
+        //     initialRegion={{
+        //         latitude: origin.location.lat,
+        //         longitude: origin.location.lng,
+        //         latitudeDelta: 0.005,
+        //         longitudeDelta: 0.005,
+        //     }}
+        // />
+        // This is the correct code but due to not paid api key this is not possible for me to use it.
+
+
+        // {origin?.location && (
+        //     <Marker
+        //         coordinate={{
+        //             latitude: origin.location.latitude,
+        //             longitude:origin.location.lng,
+        //         }}
+        //     />
+        // )}

components/NavOptions.js

@@ -0,0 +1,56 @@
+import { FlatList, StyleSheet, TouchableOpacity, Text, View, Image } from 'react-native'
+import React from 'react'
+import tw from 'tailwind-react-native-classnames';
+import { Icon } from 'react-native-elements';
+import { useNavigation } from '@react-navigation/native';
+// import { useSelector } from 'react-redux';
+// import { selectOrigin } from '../slices/navSlice';
+const data = [
+    {
+        id: "123",
+        title: "Get a ride",
+        image: "https://links.papareact.com/3pn",
+        screen: "MapScreen",
+    },
+    {
+        id: "456",
+        title: "Order food",
+        image: "https://links.papareact.com/28w",
+        screen: "EatsScreen",
+
+    },
+];
+const NavOptions = () => {
+    const navigation = useNavigation();
+    // const origin = useSelector(selectOrigin);
+    return (
+        <FlatList
+            data={data}
+            horizontal
+            keyExtractor={(item) => item.id}
+            renderItem={({ item }) => (
+                <TouchableOpacity
+                    // disabled={!origin}
+                    onPress={() => navigation.navigate(item.screen)}
+                    style={tw`p-2 pl-6 pb-8 pt-4 bg-gray-200 m-2 w-40`}>
+                    <View>
+                        <Image
+                            source={{ uri: item.image }}
+                            style={{ width: 120, height: 120, resizeMode: "contain" }}
+                        />
+                        <Text style={tw`mt-2 text-lg font-semibold`}>{item.title}</Text>
+                        <Icon
+                            style={tw`p-2 bg-black rounded-full w-10 mt-4`}
+                            name="arrowright"
+                            color="white"
+                            type="antdesign" />
+                    </View>
+                </TouchableOpacity>
+            )}
+        />
+    );
+};
+
+export default NavOptions;
+
+const styles = StyleSheet.create({})