├── .env
├── .expo-shared
    └── assets.json
├── .gitignore
├── App.js
├── app.json
├── assets
    ├── Splash.json
    ├── back.jpg
    ├── back.png
    ├── blankProfilePic.jpg
    ├── carMarker.png
    ├── card.jpg
    ├── card.png
    ├── cashIcon.png
    ├── driver.png
    ├── food.png
    ├── icon.png
    ├── location.png
    ├── package.png
    ├── reserve.png
    ├── ride.png
    ├── splash.png
    ├── transit.png
    ├── uberAssist.png
    ├── uberBlack.png
    ├── uberCar.png
    ├── uberConnect.png
    ├── uberGo.png
    ├── uberIcon.png
    ├── uberRequest.png
    ├── uberSplash.jpg
    ├── uberTime.png
    ├── uberVan.png
    ├── uberX.png
    └── visaIcon.png
├── babel.config.js
├── package.json
├── src
    ├── components
    │   └── MapComponent.js
    ├── contexts
    │   └── contexts.js
    ├── global
    │   ├── data.js
    │   ├── mapStyle.js
    │   └── styles.js
    ├── navigations
    │   ├── DrawerNavigator.js
    │   ├── RootNavigator.js
    │   └── StackNavigators.js
    ├── reducers
    │   └── reducers.js
    └── screens
    │   ├── DestinationScreen.js
    │   ├── HomeScreen.js
    │   └── RequestScreen.js
└── yarn.lock


/.env:
--------------------------------------------------------------------------------
1 | GOOGLE_MAPS_APIKEY = 'AIzaSyBQivdVNxU7quHhW_ARw2VuXKmHVwXhNMk'


--------------------------------------------------------------------------------
/.expo-shared/assets.json:
--------------------------------------------------------------------------------
1 | {
2 |   "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
3 |   "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
4 | }
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules/
 2 | .expo/
 3 | dist/
 4 | npm-debug.*
 5 | *.jks
 6 | *.p8
 7 | *.p12
 8 | *.key
 9 | *.mobileprovision
10 | *.orig.*
11 | web-build/
12 | 
13 | # macOS
14 | .DS_Store
15 | 


--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { StyleSheet, Text, View,Dimensions } from 'react-native'
 3 | import { OriginContextProvider,DestinationContextProvider } from './src/contexts/contexts'
 4 | import RoootNavigator from './src/navigations/RootNavigator'
 5 | 
 6 | 
 7 | const App = () => {
 8 |   return (
 9 |   <DestinationContextProvider>
10 |     <OriginContextProvider>
11 |         <RoootNavigator />
12 |     </OriginContextProvider>
13 |    </DestinationContextProvider>
14 |    
15 |   )
16 | }
17 | 
18 | export default App
19 | 
20 | const styles = StyleSheet.create({
21 | 
22 | container:{
23 |   flex:1
24 | }
25 | 
26 | 
27 | })
28 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "uberClone",
 4 |     "slug": "uberClone",
 5 |     "version": "1.0.0",
 6 |     "orientation": "portrait",
 7 |     "icon": "./assets/icon.png",
 8 |     "splash": {
 9 |       "image": "./assets/splash.png",
10 |       "resizeMode": "contain",
11 |       "backgroundColor": "#ffffff"
12 |     },
13 |     "updates": {
14 |       "fallbackToCacheTimeout": 0
15 |     },
16 |     "assetBundlePatterns": [
17 |       "**/*"
18 |     ],
19 |     "ios": {
20 |       "supportsTablet": true,
21 |       "bundleIdentifier":"com.uberclone",
22 |       "config":{
23 |         "googleMapsApiKey" :"AIzaSyBQivdVNxU7quHhW_ARw2VuXKmHVwXhNMk"
24 |       }
25 |     },
26 |     "android": {
27 |       "adaptiveIcon": {
28 |         "foregroundImage": "./assets/icon.png",
29 |         "backgroundColor": "#FFFFFF"
30 |       },
31 | 
32 |     "package":"com.uberclone",
33 |     "config" :{
34 |       "googleMaps":{
35 |         "apiKey":"KEY"
36 |       },
37 |       "permissions":["ACCESS_COARSE_LOCATION","ACCESS_FINE_LOCATION","FOREGROUND_SERVICE"]
38 |     }
39 |     
40 |     },
41 |     "web": {
42 |       "favicon": "./assets/favicon.png"
43 |     }
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/assets/back.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EfficientProgramming01/uberClone/6b8b9d48543bb673588342af2cc46d61d5f044f2/assets/back.jpg


--------------------------------------------------------------------------------
/assets/back.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EfficientProgramming01/uberClone/6b8b9d48543bb673588342af2cc46d61d5f044f2/assets/back.png


--------------------------------------------------------------------------------
/assets/blankProfilePic.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EfficientProgramming01/uberClone/6b8b9d48543bb673588342af2cc46d61d5f044f2/assets/blankProfilePic.jpg


--------------------------------------------------------------------------------
/assets/carMarker.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EfficientProgramming01/uberClone/6b8b9d48543bb673588342af2cc46d61d5f044f2/assets/carMarker.png


--------------------------------------------------------------------------------
/assets/card.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EfficientProgramming01/uberClone/6b8b9d48543bb673588342af2cc46d61d5f044f2/assets/card.jpg


--------------------------------------------------------------------------------
/assets/card.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EfficientProgramming01/uberClone/6b8b9d48543bb673588342af2cc46d61d5f044f2/assets/card.png


--------------------------------------------------------------------------------
/assets/cashIcon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EfficientProgramming01/uberClone/6b8b9d48543bb673588342af2cc46d61d5f044f2/assets/cashIcon.png


--------------------------------------------------------------------------------
/assets/driver.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EfficientProgramming01/uberClone/6b8b9d48543bb673588342af2cc46d61d5f044f2/assets/driver.png


--------------------------------------------------------------------------------
/assets/food.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EfficientProgramming01/uberClone/6b8b9d48543bb673588342af2cc46d61d5f044f2/assets/food.png


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EfficientProgramming01/uberClone/6b8b9d48543bb673588342af2cc46d61d5f044f2/assets/icon.png


--------------------------------------------------------------------------------
/assets/location.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EfficientProgramming01/uberClone/6b8b9d48543bb673588342af2cc46d61d5f044f2/assets/location.png


--------------------------------------------------------------------------------
/assets/package.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EfficientProgramming01/uberClone/6b8b9d48543bb673588342af2cc46d61d5f044f2/assets/package.png


--------------------------------------------------------------------------------
/assets/reserve.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EfficientProgramming01/uberClone/6b8b9d48543bb673588342af2cc46d61d5f044f2/assets/reserve.png


--------------------------------------------------------------------------------
/assets/ride.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EfficientProgramming01/uberClone/6b8b9d48543bb673588342af2cc46d61d5f044f2/assets/ride.png


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EfficientProgramming01/uberClone/6b8b9d48543bb673588342af2cc46d61d5f044f2/assets/splash.png


--------------------------------------------------------------------------------
/assets/transit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EfficientProgramming01/uberClone/6b8b9d48543bb673588342af2cc46d61d5f044f2/assets/transit.png


--------------------------------------------------------------------------------
/assets/uberAssist.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EfficientProgramming01/uberClone/6b8b9d48543bb673588342af2cc46d61d5f044f2/assets/uberAssist.png


--------------------------------------------------------------------------------
/assets/uberBlack.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EfficientProgramming01/uberClone/6b8b9d48543bb673588342af2cc46d61d5f044f2/assets/uberBlack.png


--------------------------------------------------------------------------------
/assets/uberCar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EfficientProgramming01/uberClone/6b8b9d48543bb673588342af2cc46d61d5f044f2/assets/uberCar.png


--------------------------------------------------------------------------------
/assets/uberConnect.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EfficientProgramming01/uberClone/6b8b9d48543bb673588342af2cc46d61d5f044f2/assets/uberConnect.png


--------------------------------------------------------------------------------
/assets/uberGo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EfficientProgramming01/uberClone/6b8b9d48543bb673588342af2cc46d61d5f044f2/assets/uberGo.png


--------------------------------------------------------------------------------
/assets/uberIcon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EfficientProgramming01/uberClone/6b8b9d48543bb673588342af2cc46d61d5f044f2/assets/uberIcon.png


--------------------------------------------------------------------------------
/assets/uberRequest.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EfficientProgramming01/uberClone/6b8b9d48543bb673588342af2cc46d61d5f044f2/assets/uberRequest.png


--------------------------------------------------------------------------------
/assets/uberSplash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EfficientProgramming01/uberClone/6b8b9d48543bb673588342af2cc46d61d5f044f2/assets/uberSplash.jpg


--------------------------------------------------------------------------------
/assets/uberTime.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EfficientProgramming01/uberClone/6b8b9d48543bb673588342af2cc46d61d5f044f2/assets/uberTime.png


--------------------------------------------------------------------------------
/assets/uberVan.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EfficientProgramming01/uberClone/6b8b9d48543bb673588342af2cc46d61d5f044f2/assets/uberVan.png


--------------------------------------------------------------------------------
/assets/uberX.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EfficientProgramming01/uberClone/6b8b9d48543bb673588342af2cc46d61d5f044f2/assets/uberX.png


--------------------------------------------------------------------------------
/assets/visaIcon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EfficientProgramming01/uberClone/6b8b9d48543bb673588342af2cc46d61d5f044f2/assets/visaIcon.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(api) {
 2 |   api.cache(true);
 3 |   return {
 4 |     presets: ['babel-preset-expo'],
 5 |     plugins:[["module:react-native-dotenv",
 6 |   
 7 |     {
 8 |       moduleName:"@env",
 9 |       path:".env",
10 |     }
11 | ], ['react-native-reanimated/plugin',],
12 | 
13 |     ]
14 |   };
15 | };
16 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "main": "node_modules/expo/AppEntry.js",
 3 |   "scripts": {
 4 |     "start": "expo start",
 5 |     "android": "expo start --android",
 6 |     "ios": "expo start --ios",
 7 |     "web": "expo start --web",
 8 |     "eject": "expo eject"
 9 |   },
10 |   "dependencies": {
11 |     "@gorhom/bottom-sheet": "^4",
12 |     "@react-navigation/drawer": "^6.1.8",
13 |     "@react-navigation/native": "^6.0.6",
14 |     "@react-navigation/native-stack": "^6.2.5",
15 |     "expo": "41.0.0",
16 |     "expo-location": "~13.0.4",
17 |     "expo-status-bar": "~1.1.0",
18 |     "react": "17.0.1",
19 |     "react-dom": "17.0.1",
20 |     "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
21 |     "react-native-dotenv": "^3.3.0",
22 |     "react-native-elements": "^3.4.2",
23 |     "react-native-gesture-handler": "~1.10.2",
24 |     "react-native-google-places-autocomplete": "^2.4.1",
25 |     "react-native-maps": "0.28.0",
26 |     "react-native-maps-directions": "^1.8.0",
27 |     "react-native-reanimated": "~2.2.0",
28 |     "react-native-safe-area-context": "3.2.0",
29 |     "react-native-screens": "~3.8.0",
30 |     "react-native-status-bar-height": "^2.6.0",
31 |     "react-native-vector-icons": "^9.0.0",
32 |     "react-native-web": "0.17.1"
33 |   },
34 |   "devDependencies": {
35 |     "@babel/core": "^7.12.9"
36 |   },
37 |   "private": true
38 | }
39 | 


--------------------------------------------------------------------------------
/src/components/MapComponent.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react'
  2 | import { Text, StyleSheet, View,Image } from 'react-native'
  3 | import { mapStyle} from "../global/mapStyle"
  4 | import MapView, { PROVIDER_GOOGLE,} from 'react-native-maps'; 
  5 | import { colors,parameters } from '../global/styles';
  6 | import MapViewDirections from 'react-native-maps-directions';
  7 | import {GOOGLE_MAPS_APIKEY} from "@env";
  8 | 
  9 | export default class MapComponent extends Component {
 10 | 
 11 |     constructor(){
 12 |       super()
 13 |         this.state ={
 14 | 
 15 |         }
 16 |       
 17 |         this._map = React.createRef(35)
 18 |     }
 19 |     
 20 |     componentDidUpdate(){
 21 |       setTimeout(()=>{
 22 |         if(this.props.userDestination.latitude !== null){
 23 |           this._map.current.fitToCoordinates(
 24 |             [this.props.userOrigin,this.props.userDestination],{
 25 |               edgePadding:{top:450,right:50,left:50,bottom:350},
 26 |               animated:true
 27 |             }
 28 |           )
 29 |         }
 30 |       },500)
 31 |    }
 32 | 
 33 |     render() {
 34 |         return (
 35 |             <View>
 36 |                 <MapView
 37 |                     provider ={PROVIDER_GOOGLE}
 38 |                     style = {styles.map}
 39 |                     customMapStyle ={mapStyle}
 40 |                     ref = {this._map}
 41 |                         >
 42 |                      { this.props.userOrigin.latitude != null &&   
 43 |                         <MapView.Marker coordinate = {this.props.userOrigin} anchor = {{x:0.5,y:0.5}} >
 44 |                             <Image 
 45 |                                 source ={require('../../assets/location.png')}
 46 |                                 style ={styles.markerOrigin2}
 47 |                                 resizeMode ="cover"
 48 |                             />
 49 |                         </MapView.Marker>
 50 |                      }
 51 |                      { this.props.userDestination.latitude != null &&   
 52 |                         <MapView.Marker coordinate = {this.props.userDestination} anchor = {{x:0.5,y:0.5}} >
 53 |                             <Image 
 54 |                                 source ={require('../../assets/location.png')}
 55 |                                 style ={styles.markerDestination}
 56 |                                 resizeMode ="cover"
 57 |                             />
 58 |                         </MapView.Marker>
 59 |                      }
 60 |                     {this.props.userDestination.latitude !== null &&
 61 |                         <MapViewDirections 
 62 |                           origin={this.props.userOrigin}
 63 |                           destination={this.props.userDestination}
 64 |                           apikey={GOOGLE_MAPS_APIKEY}
 65 |                           strokeWidth={4}
 66 |                           strokeColor={colors.black}
 67 |                         />
 68 |                     } 
 69 |                 </MapView> 
 70 |             </View>
 71 |         )
 72 |     }
 73 | }
 74 | 
 75 | const styles = StyleSheet.create({
 76 |    map: {
 77 |         height:"100%",
 78 |          width:"100%"
 79 |         },
 80 | 
 81 |         
 82 |           markerWrapOrigin: {
 83 |            //  alignItems: "center",
 84 |             // justifyContent: "center",
 85 |               width:40,
 86 |              height:20,
 87 |             // marginTop:0
 88 |             },
 89 |             markerOrigin: {
 90 |                width: 16,
 91 |                height: 16,
 92 |                borderRadius:8
 93 |             },
 94 |       
 95 |             destination: {
 96 |                width:20,
 97 |               height:20,
 98 |               backgroundColor:colors.black,
 99 |               alignItems:"center",
100 |               justifyContent:"center"
101 |              },
102 |    
103 |              view1: {
104 |                width:7,
105 |               height:7,
106 |               backgroundColor:colors.white
107 |              },
108 |              markerDestination: {
109 |               width: 16,
110 |               height: 16,
111 |               
112 |              },
113 |              
114 |              markerOrigin2: {
115 |                width: 20,
116 |                height:20,
117 |                borderRadius:10
118 |               },
119 |    
120 |        car:{
121 |            paddingTop:0,
122 |            width: 40,
123 |            height: 20,
124 |           },
125 |    
126 |           view2:{
127 |            position:"absolute",
128 |            top:10,
129 |            right:12,
130 |            backgroundColor:colors.white,
131 |            height:40,
132 |            width:180,
133 |            borderRadius:20,
134 |            justifyContent:"center",
135 |            alignItems:"center",
136 |            marginTop:2, 
137 |            zIndex: 8
138 |            
139 |          },    
140 |     
141 |    view3:{ flexDirection:"row",
142 |    alignItems:"center",
143 |    //marginRight:15,
144 |    //backgroundColor:"white",
145 |    //paddingHorizontal:2,
146 |    paddingVertical:2,
147 |    //borderRadius:20
148 |    },
149 |    
150 |    view4:{
151 |        position:"absolute",
152 |        top:50,
153 |        left:12,
154 |        backgroundColor:colors.white,
155 |        height:40,
156 |        width:140,
157 |        borderRadius:20,
158 |        justifyContent:"center",
159 |        alignItems:"center",
160 |        marginTop:2, 
161 |        zIndex: 8
162 |        
163 |      }, 
164 |    
165 |      location: {
166 |        width: 20,
167 |        height: 20,
168 |        borderRadius:9,
169 |        backgroundColor:colors.black,
170 |        alignItems:"center",
171 |        justifyContent:"center"
172 |        
173 |        }, 
174 |        
175 |    view9:{width:6,
176 |      height:6,
177 |      borderRadius:4,
178 |      backgroundColor:"white"
179 |    }     
180 | })
181 | 


--------------------------------------------------------------------------------
/src/contexts/contexts.js:
--------------------------------------------------------------------------------
 1 | import React,{createContext,useReducer} from 'react';
 2 | import {OriginReducer,DestinationReducer} from  '../reducers/reducers'
 3 | 
 4 | export const OriginContext = createContext()
 5 | export const DestinationContext = createContext()
 6 | 
 7 | 
 8 | export const OriginContextProvider = (props)=>{
 9 |     const[origin,dispatchOrigin] =useReducer(OriginReducer,{
10 |                 latitude:null,
11 |                 longitude:null,
12 |                 address:"",
13 |                 name:""
14 |     })
15 |     return(
16 |         <OriginContext.Provider
17 |                 value ={{origin,dispatchOrigin}}
18 |             >
19 |             {props.children}
20 |         </OriginContext.Provider>
21 |     )
22 | }
23 | 
24 | 
25 | export const DestinationContextProvider = (props)=>{
26 |     const[destination,dispatchDestination] =useReducer(DestinationReducer,{
27 |                 latitude:null,
28 |                 longitude:null,
29 |                 address:"",
30 |                 name:""
31 |     })
32 |     return(
33 |         <DestinationContext.Provider
34 |                 value ={{destination,dispatchDestination}}
35 |             >
36 |             {props.children}
37 |         </DestinationContext.Provider>
38 |     )
39 | }


--------------------------------------------------------------------------------
/src/global/data.js:
--------------------------------------------------------------------------------
 1 | export const filterData = [ {name:"Ride",image: require('../../assets/ride.png'), id:"0"},
 2 |                             {name:"Food",image:require("../../assets/food.png"),id:"1"},
 3 |                             {name:"Package",image:require("../../assets/package.png"),id:"2"},
 4 |                             {name:"Reserve",image:require("../../assets/reserve.png"),id:"3"}
 5 |                           
 6 |                            ];
 7 | 
 8 | 
 9 | export const rideData =[
10 |     {street:"32 Olivia Rd",area:"Klipfontein 83-Ir,Boksburg",id:"0"},
11 |     {street:"Hughes Industrial Park",area:"Hughes,Boksburg",id:"1"},
12 |     {street:"32 Olivia Road",area:" East Rand,Ekurhuleni,Gauteng,1459",id:"2"},
13 |     {street:"Total Boksburg",area:"35 Atlas Rd,Anderbolt,Boksburg",id:"3"},
14 |     {street:"179 8th Ave",area:"Bezuidenhout Valley,Johannesburg",id:"4"},
15 | ];
16 | 
17 | export const carTypeData =[
18 |     {title:"Popular",
19 |      data:[
20 |     {name:"Uber Go",group :2, price:7,image: require('../../assets/uberGo.png'),note:"Affordable.compact rides",promotion:5 ,time:"20:19",id:"0"},
21 |     {name:"UberX",group :3, price:5.5,image: require('../../assets/uberX.png'),note:"Affordable everyday trips",promotion:0,time:"20:20", id:"1"},
22 |     {name:"Connect", group:0, price:12.6,image: require('../../assets/uberConnect.png'),note:"Send and receive packages",promotion:10,time:"20:33", id:"2"}
23 |      ]
24 |     },
25 | 
26 |     {title:"Premium",
27 |     data:[
28 |    {name:"Black",group :3, price:17.4,image: require('../../assets/uberBlack.png'),note:"Premium trips in luxury cars",promotion:0,time:"20:31",id:"3"},
29 |    {name:"Van", group:6, price:22.3,image: require('../../assets/uberVan.png'),note:"Rides for groups up to 6",promotion:12,time:"20:31", id:"4"},
30 |     ]
31 |    },
32 | 
33 |    {title:"More",
34 |    data:[
35 |   {name:"Assist",group :3, price:35.3,image: require('../../assets/uberAssist.png'),note:"Special assistance from certified drivers",promotion:26,time:"20:25",id:"5"},
36 |    ]
37 |   },
38 | 
39 | ];
40 | 
41 |  export const requestData = [{
42 |     name:"For Me",id:0
43 | },
44 | {
45 |     name:"For Someone",id:1
46 | }
47 | 
48 | ]
49 | 
50 | export const rideOptions = [{name:"Personal",icon:"account", id:"0"},
51 | {name:"Business",icon:"briefcase", id:"1"},  
52 | 
53 | ];
54 | 
55 | export const paymentOptions = [{image:require('../../assets/visaIcon.png'),text:"Visa ...0476"},
56 |                                 {image:require('../../assets/cashIcon.png'),text:"Cash"}]
57 | 
58 | export const availableServices = ["Uber Go","UberX","Uber connect","Uber Black","Uber Van","Uber Assist"]
59 | 
60 | export const carsAround = [{latitude:-26.207487,longitude:28.236226},
61 |     {latitude:-26.202616,longitude:28.227718},
62 |     {latitude:-26.202424,longitude:28.236612},
63 |     {latitude:-26.208565,longitude:28.237191},
64 |     {latitude:-26.203598,longitude:28.239509},
65 | ]
66 | 


--------------------------------------------------------------------------------
/src/global/mapStyle.js:
--------------------------------------------------------------------------------
  1 | export const mapStyle = [
  2 |     {
  3 |         "featureType": "administrative",
  4 |         "elementType": "geometry.fill",
  5 |         "stylers": [
  6 |             {
  7 |                 "color": "#d6e2e6"
  8 |             }
  9 |         ]
 10 |     },
 11 |     {
 12 |         "featureType": "administrative",
 13 |         "elementType": "geometry.stroke",
 14 |         "stylers": [
 15 |             {
 16 |                 "color": "#cfd4d5"
 17 |             }
 18 |         ]
 19 |     },
 20 |     {
 21 |         "featureType": "administrative",
 22 |         "elementType": "labels.text.fill",
 23 |         "stylers": [
 24 |             {
 25 |                 "color": "#7492a8"
 26 |             }
 27 |         ]
 28 |     },
 29 |     {
 30 |         "featureType": "administrative.neighborhood",
 31 |         "elementType": "labels.text.fill",
 32 |         "stylers": [
 33 |             {
 34 |                 "lightness": 25
 35 |             }
 36 |         ]
 37 |     },
 38 |     {
 39 |         "featureType": "landscape.man_made",
 40 |         "elementType": "geometry.fill",
 41 |         "stylers": [
 42 |             {
 43 |                 "color": "#dde2e3"
 44 |             }
 45 |         ]
 46 |     },
 47 |     {
 48 |         "featureType": "landscape.man_made",
 49 |         "elementType": "geometry.stroke",
 50 |         "stylers": [
 51 |             {
 52 |                 "color": "#cfd4d5"
 53 |             }
 54 |         ]
 55 |     },
 56 |     {
 57 |         "featureType": "landscape.natural",
 58 |         "elementType": "geometry.fill",
 59 |         "stylers": [
 60 |             {
 61 |                 "color": "#dde2e3"
 62 |             }
 63 |         ]
 64 |     },
 65 |     {
 66 |         "featureType": "landscape.natural",
 67 |         "elementType": "labels.text.fill",
 68 |         "stylers": [
 69 |             {
 70 |                 "color": "#7492a8"
 71 |             }
 72 |         ]
 73 |     },
 74 |     {
 75 |         "featureType": "landscape.natural.terrain",
 76 |         "elementType": "all",
 77 |         "stylers": [
 78 |             {
 79 |                 "visibility": "off"
 80 |             }
 81 |         ]
 82 |     },
 83 |     {
 84 |         "featureType": "poi",
 85 |         "elementType": "geometry.fill",
 86 |         "stylers": [
 87 |             {
 88 |                 "color": "#dde2e3"
 89 |             }
 90 |         ]
 91 |     },
 92 |     {
 93 |         "featureType": "poi",
 94 |         "elementType": "labels.text.fill",
 95 |         "stylers": [
 96 |             {
 97 |                 "color": "#588ca4"
 98 |             }
 99 |         ]
100 |     },
101 |     {
102 |         "featureType": "poi",
103 |         "elementType": "labels.icon",
104 |         "stylers": [
105 |             {
106 |                 "saturation": -100
107 |             }
108 |         ]
109 |     },
110 |     {
111 |         "featureType": "poi.park",
112 |         "elementType": "geometry.fill",
113 |         "stylers": [
114 |             {
115 |                 "color": "#a9de83"
116 |             }
117 |         ]
118 |     },
119 |     {
120 |         "featureType": "poi.park",
121 |         "elementType": "geometry.stroke",
122 |         "stylers": [
123 |             {
124 |                 "color": "#bae6a1"
125 |             }
126 |         ]
127 |     },
128 |     {
129 |         "featureType": "poi.sports_complex",
130 |         "elementType": "geometry.fill",
131 |         "stylers": [
132 |             {
133 |                 "color": "#c6e8b3"
134 |             }
135 |         ]
136 |     },
137 |     {
138 |         "featureType": "poi.sports_complex",
139 |         "elementType": "geometry.stroke",
140 |         "stylers": [
141 |             {
142 |                 "color": "#bae6a1"
143 |             }
144 |         ]
145 |     },
146 |     {
147 |         "featureType": "road",
148 |         "elementType": "labels.text.fill",
149 |         "stylers": [
150 |             {
151 |                 "color": "#41626b"
152 |             }
153 |         ]
154 |     },
155 |     {
156 |         "featureType": "road",
157 |         "elementType": "labels.icon",
158 |         "stylers": [
159 |             {
160 |                 "saturation": -45
161 |             },
162 |             {
163 |                 "lightness": 10
164 |             },
165 |             {
166 |                 "visibility": "on"
167 |             }
168 |         ]
169 |     },
170 |     {
171 |         "featureType": "road.highway",
172 |         "elementType": "geometry.fill",
173 |         "stylers": [
174 |             {
175 |                 "color": "#c1d1d6"
176 |             }
177 |         ]
178 |     },
179 |     {
180 |         "featureType": "road.highway",
181 |         "elementType": "geometry.stroke",
182 |         "stylers": [
183 |             {
184 |                 "color": "#a6b5bb"
185 |             }
186 |         ]
187 |     },
188 |     {
189 |         "featureType": "road.highway",
190 |         "elementType": "labels.icon",
191 |         "stylers": [
192 |             {
193 |                 "visibility": "on"
194 |             }
195 |         ]
196 |     },
197 |     {
198 |         "featureType": "road.highway.controlled_access",
199 |         "elementType": "geometry.fill",
200 |         "stylers": [
201 |             {
202 |                 "color": "#9fb6bd"
203 |             }
204 |         ]
205 |     },
206 |     {
207 |         "featureType": "road.arterial",
208 |         "elementType": "geometry.fill",
209 |         "stylers": [
210 |             {
211 |                 "color": "#ffffff"
212 |             }
213 |         ]
214 |     },
215 |     {
216 |         "featureType": "road.local",
217 |         "elementType": "geometry.fill",
218 |         "stylers": [
219 |             {
220 |                 "color": "#ffffff"
221 |             }
222 |         ]
223 |     },
224 |     {
225 |         "featureType": "transit",
226 |         "elementType": "labels.icon",
227 |         "stylers": [
228 |             {
229 |                 "saturation": -70
230 |             }
231 |         ]
232 |     },
233 |     {
234 |         "featureType": "transit.line",
235 |         "elementType": "geometry.fill",
236 |         "stylers": [
237 |             {
238 |                 "color": "#b4cbd4"
239 |             }
240 |         ]
241 |     },
242 |     {
243 |         "featureType": "transit.line",
244 |         "elementType": "labels.text.fill",
245 |         "stylers": [
246 |             {
247 |                 "color": "#588ca4"
248 |             }
249 |         ]
250 |     },
251 |     {
252 |         "featureType": "transit.station",
253 |         "elementType": "all",
254 |         "stylers": [
255 |             {
256 |                 "visibility": "off"
257 |             }
258 |         ]
259 |     },
260 |     {
261 |         "featureType": "transit.station",
262 |         "elementType": "labels.text.fill",
263 |         "stylers": [
264 |             {
265 |                 "color": "#008cb5"
266 |             },
267 |             {
268 |                 "visibility": "on"
269 |             }
270 |         ]
271 |     },
272 |     {
273 |         "featureType": "transit.station.airport",
274 |         "elementType": "geometry.fill",
275 |         "stylers": [
276 |             {
277 |                 "saturation": -100
278 |             },
279 |             {
280 |                 "lightness": -5
281 |             }
282 |         ]
283 |     },
284 |     {
285 |         "featureType": "water",
286 |         "elementType": "geometry.fill",
287 |         "stylers": [
288 |             {
289 |                 "color": "#a6cbe3"
290 |             }
291 |         ]
292 |     }
293 | ]


--------------------------------------------------------------------------------
/src/global/styles.js:
--------------------------------------------------------------------------------
 1 | import { getStatusBarHeight } from 'react-native-status-bar-height';
 2 | 
 3 | // 44 - on iPhoneX
 4 | // 20 - on iOS device
 5 | // X - on Android platfrom (runtime value)
 6 | // 0 - on all other platforms (default)
 7 | //console.log(getStatusBarHeight());
 8 | 
 9 | // will be 0 on Android, because You pass true to skipAndroid
10 | //console.log(getStatusBarHeight(true));
11 | 
12 | 
13 | 
14 | export const colors = {
15 |     buttons:"#ff8c52",
16 |     grey:  "#bebebe",
17 |     grey1: '#43484d',
18 |     grey2: '#5e6977',
19 |     grey3: '#86939e',
20 |     grey4: '#bdc6cf',
21 |     grey5: '#e1e8ee',
22 |     grey6:  "#eeeeee",
23 |     grey7:  "#F2f9f9",
24 |     grey10: "#d6d6d6",
25 |     CardComment : '#86939e',
26 |     cardbackground:"white",
27 |     statusbar:"#ff8c52",
28 |     heaherText:"white",
29 |     lightgreen: '#66DF48',
30 |     blue:'#286ef0',
31 |     black: "#000000",
32 |     white: "#ffffff",
33 |     darkBlue:"#2d328a",
34 |     pagebackground:"white"
35 | 
36 |     
37 | 
38 | }
39 | 
40 | 
41 | export const parameters ={
42 |     statusBarHeight :getStatusBarHeight(),
43 |     headerHeight:70,
44 | 
45 |     styledButton:{
46 |         backgroundColor:"#ff8c52",
47 |         alignContent:"center",
48 |         justifyContent:"center",
49 |         borderRadius:12,
50 |         borderWidth:1, 
51 |         borderColor:"#ff8c52",
52 |         height:50,
53 |         paddingHorizontal:20,
54 |         width:'100%'
55 |     },
56 | 
57 |     buttonTitle:{
58 |         color:"white",
59 |         fontSize:20,  
60 |         fontWeight:"bold" ,
61 |         alignItems:"center",
62 |         justifyContent:"center"  ,
63 |         marginTop:-3 
64 |     }
65 | }
66 | 
67 | export const title ={
68 |     color:"#ff8c52",
69 |     fontSize :20,
70 |     fontWeight:"bold"
71 | }


--------------------------------------------------------------------------------
/src/navigations/DrawerNavigator.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { createDrawerNavigator } from '@react-navigation/drawer';
 3 | import { HomeStack } from './StackNavigators';
 4 | import {Icon} from 'react-native-elements';
 5 | import {colors} from "../global/styles";
 6 | 
 7 | const Drawer = createDrawerNavigator()
 8 | 
 9 | export default function DrawerNavigator(){
10 |     return(
11 |         <Drawer.Navigator>
12 |              <Drawer.Screen 
13 |                  name = "HomeStack"
14 |                  component = {HomeStack}
15 |                  options ={{
16 |                      title:"Client",
17 |                      drawerIcon :({focussed,size})=><Icon type ="material-community" 
18 |                                                           name = "home" 
19 |                                                           color = {focussed?'#7cc':colors.grey2}
20 |                                                           size ={size}
21 |                                                           />,
22 | 
23 |                  headerShown : false                                      
24 |                  }}
25 | 
26 |                 
27 |              />
28 |         </Drawer.Navigator>
29 |     )
30 | }   


--------------------------------------------------------------------------------
/src/navigations/RootNavigator.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { NavigationContainer } from '@react-navigation/native';
 3 | import DrawerNavigator from './DrawerNavigator';
 4 | 
 5 | export default function RoootNavigator(){
 6 |     return(
 7 |         <NavigationContainer>
 8 |             <DrawerNavigator />
 9 |         </NavigationContainer>
10 |     )
11 | }


--------------------------------------------------------------------------------
/src/navigations/StackNavigators.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { createNativeStackNavigator } from '@react-navigation/native-stack';
 3 | import HomeScreen from '../screens/HomeScreen'
 4 | import RequestScreen from '../screens/RequestScreen';
 5 | import DestinationScreen from '../screens/DestinationScreen';
 6 | 
 7 | 
 8 | const Home = createNativeStackNavigator();
 9 | 
10 | export function HomeStack(){
11 |     return(
12 |         <Home.Navigator>
13 |             <Home.Screen 
14 |                 name ="HomeScreen"
15 |                 component = {HomeScreen}
16 |                 options ={{headerShown:false}}
17 |             />
18 |             <Home.Screen 
19 |                 name ="RequestScreen"
20 |                 component = {RequestScreen}
21 |                 options ={{headerShown:false}}
22 |             /> 
23 |              <Home.Screen 
24 |                 name ="DestinationScreen"
25 |                 component = {DestinationScreen}
26 |                 options ={{headerShown:false}}
27 |             /> 
28 |         </Home.Navigator>
29 |     )
30 | }


--------------------------------------------------------------------------------
/src/reducers/reducers.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export const OriginReducer = (state,action)=>{
 3 |     switch(action.type){
 4 |         case 'ADD_ORIGIN':
 5 |                 return{
 6 |                     latitude:action.payload.latitude,
 7 |                     longitude:action.payload.longitude,
 8 |                     address:action.payload.address,
 9 |                     name:action.payload.name
10 |                 }
11 |             default:
12 |                 return state
13 |     }
14 | }
15 | 
16 | 
17 | export const DestinationReducer = (state,action)=>{
18 |     switch(action.type){
19 |         case 'ADD_DESTINATION':
20 |                 return{
21 |                     latitude:action.payload.latitude,
22 |                     longitude:action.payload.longitude,
23 |                     address:action.payload.address,
24 |                     name:action.payload.name
25 |                 }
26 |             default:
27 |                 return state
28 |     }
29 | }


--------------------------------------------------------------------------------
/src/screens/DestinationScreen.js:
--------------------------------------------------------------------------------
  1 | import React,{useRef,useContext,useState} from 'react'
  2 | import { StyleSheet, Text, View,Dimensions,TouchableOpacity,} from 'react-native';
  3 | import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
  4 | import { Avatar,Icon} from 'react-native-elements';
  5 | import { colors,parameters } from '../global/styles'
  6 | import {GOOGLE_MAPS_APIKEY} from "@env";
  7 | import { OriginContext,DestinationContext } from '../contexts/contexts';
  8 | 
  9 | const SCREEN_HEIGHT = Dimensions.get('window').height;
 10 | const SCREEN_WIDTH = Dimensions.get('window').width;
 11 | 
 12 | const DestinationScreen = ({navigation}) => {
 13 | 
 14 |     const {dispatchOrigin} = useContext(OriginContext)
 15 |     const {dispatchDestination} = useContext(DestinationContext)
 16 | 
 17 |     const textInput1 = useRef(4);
 18 |     const textInput2 = useRef(5);
 19 | 
 20 |     const[destination,setDestination] = useState(false)
 21 | 
 22 |     return (
 23 |         <>
 24 |             <View style = {styles.view2}>
 25 |                 <View style ={styles.view1}> 
 26 |                     <Icon 
 27 |                         type ="material-community"
 28 |                         name ="arrow-left"
 29 |                         color ={colors.grey1}
 30 |                         size ={32}
 31 |                         onPress ={()=>navigation.goBack()} 
 32 |                     />
 33 |                 </View>
 34 |                 <TouchableOpacity>
 35 |                     <View style ={{top:25,alignItems:"center"}}>
 36 |                         <View style ={styles.view3}>
 37 |                             <Avatar 
 38 |                                 rounded
 39 |                                 avatarStyle ={{}}
 40 |                                 size ={30}
 41 |                                 source = {require('../../assets/blankProfilePic.jpg')}
 42 |                                 />
 43 |                             <Text style ={{marginLeft:5}}>For Someone</Text>
 44 |                             <Icon 
 45 |                                 type ="material-community"
 46 |                                 name ="chevron-down"
 47 |                                 color ={colors.grey1}
 48 |                                 size ={26}
 49 |                                 />
 50 |                         </View>
 51 |                     </View>
 52 |                 </TouchableOpacity>
 53 |             </View>
 54 |             {destination === false &&
 55 |             <GooglePlacesAutocomplete 
 56 |                 nearbyPlacesAPI = 'GooglePlacesSearch'
 57 |                 placeholder ="From..."
 58 |                 listViewDisplayed = "auto"
 59 |                 debounce ={400}
 60 |                 currentLocation ={true}
 61 |                 ref ={textInput1}
 62 |                 minLength ={2}
 63 |                 enablePoweredByContainer = {false}
 64 |                 fetchDetails ={true}
 65 |                 autoFocus ={true}
 66 |                 styles = {autoComplete}
 67 |                 query ={{
 68 |                     key:GOOGLE_MAPS_APIKEY,
 69 |                     language:"en"
 70 |                 }}
 71 | 
 72 |                 onPress= {(data,details = null)=>{
 73 |                     dispatchOrigin({type:"ADD_ORIGIN",payload:{
 74 |                         latitude:details.geometry.location.lat,
 75 |                         longitude:details.geometry.location.lng,
 76 |                         address:details.formatted_address,
 77 |                         name:details.name
 78 |                     }})
 79 | 
 80 |                     setDestination(true)
 81 |                 }}
 82 | 
 83 |             />
 84 |             }
 85 |             {destination === true &&
 86 |             <GooglePlacesAutocomplete 
 87 |                 nearbyPlacesAPI = 'GooglePlacesSearch'
 88 |                 placeholder ="Going to..."
 89 |                 listViewDisplayed = "auto"
 90 |                 debounce ={400}
 91 |                 currentLocation ={true}
 92 |                 ref ={textInput2}
 93 |                 minLength ={2}
 94 |                 enablePoweredByContainer = {false}
 95 |                 fetchDetails ={true}
 96 |                 autoFocus ={true}
 97 |                 styles = {autoComplete}
 98 |                 query ={{
 99 |                     key:GOOGLE_MAPS_APIKEY,
100 |                     language:"en"
101 |                 }}
102 | 
103 |                 onPress= {(data,details = null)=>{
104 |                     dispatchDestination({type:"ADD_DESTINATION",payload:{
105 |                         latitude:details.geometry.location.lat,
106 |                         longitude:details.geometry.location.lng,
107 |                         address:details.formatted_address,
108 |                         name:details.name
109 |                     }})
110 | 
111 |                     navigation.navigate("RequestScreen",{state:0})
112 |                 }}
113 | 
114 |             />
115 |             }
116 |         </>
117 |     )
118 | }
119 | 
120 | export default DestinationScreen
121 | 
122 | const styles = StyleSheet.create({
123 |     container: {
124 |         flex: 1,
125 |         backgroundColor: '#fff',
126 |         alignItems: 'center',
127 |         justifyContent: 'center',
128 |         paddingTop:parameters.statusBarHeight
129 |     },
130 |     
131 |     view1:{
132 |       position:"absolute",
133 |       top:25,
134 |       left:12,
135 |       backgroundColor:colors.white,
136 |       height:40,
137 |       width:40,
138 |       borderRadius:20,
139 |       justifyContent:"center",
140 |       alignItems:"center",
141 |       marginTop:2, 
142 |       zIndex: 10
143 |       
144 |     },
145 |     
146 |     view3:{
147 |       flexDirection:"row",
148 |       alignItems:"center",
149 |       marginTop:2,   
150 |       marginBottom:10,
151 |       backgroundColor: colors.white,
152 |       height:30,
153 |       zIndex: 10
154 |     },
155 |     
156 |     view2:{backgroundColor:colors.white,
157 |           zIndex:4,
158 |           paddingBottom:10,
159 |           
160 |         },
161 |     
162 |         view24:{
163 |           flexDirection:"row",
164 |           justifyContent:"space-between",
165 |          marginVertical:15,
166 |           paddingHorizontal:20   
167 |       }, 
168 |       
169 |       view25:{
170 |           flexDirection:'row',
171 |          alignItems:"baseline"
172 |       },
173 |       
174 |       flatlist:{
175 |           marginTop:20,
176 |           zIndex:17,
177 |           elevation:8
178 |       },    
179 |     
180 |     });
181 |     
182 |     
183 |     const autoComplete = {
184 |     
185 |         textInput:{
186 |             backgroundColor: colors.grey6,
187 |             height: 50,
188 |             borderRadius: 5,
189 |             paddingVertical: 5,
190 |             paddingHorizontal: 10,
191 |             fontSize: 15,
192 |             flex: 1,
193 |             borderWidth:1,
194 |             marginHorizontal:15,
195 |         },
196 |         container: {
197 |            paddingTop:20,
198 |           flex: 1,
199 |           backgroundColor:colors.white
200 |               },
201 |       
202 |         textInputContainer: {
203 |           flexDirection: 'row',
204 |         },
205 |   
206 |   }
207 |   


--------------------------------------------------------------------------------
/src/screens/HomeScreen.js:
--------------------------------------------------------------------------------
  1 | import { StatusBar } from 'expo-status-bar'
  2 | import React,{useState,useRef,useEffect} from 'react'
  3 | import { StyleSheet, Text, View,Dimensions ,ScrollView,Image,FlatList,TouchableOpacity} from 'react-native'
  4 | import { Icon} from 'react-native-elements'
  5 | import MapView, { PROVIDER_GOOGLE,} from 'react-native-maps'; 
  6 | import * as Location from 'expo-location';
  7 | 
  8 | const SCREEN_WIDTH = Dimensions.get('window').width
  9 | import { colors,parameters } from '../global/styles'
 10 | import { filterData,carsAround } from '../global/data'
 11 | import { mapStyle} from "../global/mapStyle"
 12 | 
 13 | const HomeScreen = ({navigation}) => {
 14 | 
 15 | 
 16 | const [latlng,setLatLng] = useState({})
 17 | 
 18 | const checkPermission =async()=>{
 19 |     const hasPermission = await Location.requestForegroundPermissionsAsync();
 20 |     if(hasPermission.status === 'granted') {
 21 |         const permission = await askPermission();
 22 |         return permission
 23 |     }
 24 |     return true
 25 | };
 26 | 
 27 | 
 28 | const askPermission = async()=>{
 29 |     const permission = await Location.requestForegroundPermissionsAsync()
 30 |     return permission.status === 'granted';
 31 | };
 32 | 
 33 | 
 34 | const getLocation = async()=>{
 35 |     try{
 36 |         const {granted} =await Location.requestForegroundPermissionsAsync();
 37 |         if(!granted)return;
 38 |         const {
 39 |             coords:{latitude,longitude},
 40 |         } = await Location.getCurrentPositionAsync();
 41 |         setLatLng({latitude:latitude,longitude:longitude})
 42 |     }catch(err){
 43 | 
 44 |     }
 45 | }
 46 | 
 47 | const _map = useRef(1);
 48 | 
 49 | 
 50 | useEffect(()=>{
 51 |     checkPermission();
 52 |     getLocation()
 53 |    // console.log(latlng)
 54 | ,[]})
 55 | 
 56 | 
 57 |     return (
 58 |         <View style ={styles.container}>
 59 |             <View style ={styles.header}>
 60 |                 <View style ={styles.icon1}>
 61 |                     <Icon type = "material-community"
 62 |                           name ="menu"
 63 |                           color = {colors.white}
 64 |                           size = {40}
 65 |                     />
 66 |                 </View>
 67 |             </View>
 68 |             <ScrollView bounces ={false}>
 69 |                 <View style ={styles.home}>
 70 |                     <Text style = {styles.text1}>Destress your commute</Text>
 71 |                     <View style ={styles.view1}>
 72 |                         <View  style ={styles.view8}>
 73 |                             <Text style ={styles.text2}>Read a book.Take a nap. Stare out the window</Text>
 74 |                             <TouchableOpacity onPress ={()=>{navigation.navigate("RequestScreen",{state:0})}}>
 75 |                                 <View style ={styles.button1}>
 76 |                                     <Text style = {styles.button1Text}>Ride with Uber</Text>
 77 |                                 </View>
 78 |                             </TouchableOpacity>
 79 |                         </View>
 80 |                         <View>
 81 |                             <Image 
 82 |                                 style ={styles.image1}
 83 |                                 source = {require('../../assets/uberCar.png')}
 84 |                             />
 85 |                         </View>
 86 |                     </View>
 87 |                 </View>
 88 | 
 89 |                 <View>
 90 |                         <FlatList 
 91 |                             numRows ={4}
 92 |                             horizontal = {true}
 93 |                             showsHorizontalScrollIndicator ={false}
 94 |                             data ={filterData}
 95 |                             keyExtractor = {(item)=>item.id}
 96 |                             renderItem = { ({item})=>(
 97 |                                 <View style = {styles.card}>
 98 |                                     <View style ={styles.view2}>
 99 |                                         <Image style ={styles.image2} source = {item.image} />
100 |                                     </View>
101 |                                     <View>
102 |                                         <Text style ={styles.title}>{item.name}</Text>
103 |                                     </View>
104 |                                 </View>
105 |                             )}
106 |                         />
107 |                     </View>
108 |                     <View style ={styles.view3}>
109 |                         <Text style ={styles.text3}> Where to ?</Text>  
110 |                         <View style ={styles.view4}>
111 |                             <Icon type = "material-community"
112 |                                 name ="clock-time-four"
113 |                                 color = {colors.grey1}
114 |                                 size = {26}
115 |                              /> 
116 |                              <Text style ={{marginLeft:5}}>Now</Text> 
117 |                              <Icon type = "material-community"
118 |                                 name ="chevron-down"
119 |                                 color = {colors.grey1}
120 |                                 size = {26}
121 |                              />  
122 |                         </View>     
123 |                     </View>
124 |                     <View style ={styles.view5}>
125 |                         <View style ={styles.view6}>
126 |                             <View style ={styles.view7}>
127 |                                 <Icon type = "material-community"
128 |                                     name ="map-marker"
129 |                                     color = {colors.black}
130 |                                     size = {22}
131 |                                 />
132 |                             </View>
133 |                             <View>
134 |                                 <Text style ={{fontSize:18,color:colors.black}}>32 Olivia Rd</Text>
135 |                                 <Text style ={{color:colors.grey3}}>Klipfontein 83-Ir, Boksburg</Text>
136 |                             </View>
137 |                         </View>
138 |                         <View>
139 |                             <Icon type = "material-community"
140 |                                         name ="chevron-right"
141 |                                         color = {colors.grey}
142 |                                         size = {26}
143 |                                     />
144 |                             </View>
145 |                     </View>
146 | 
147 |                     <View style ={{...styles.view5,borderBottomWidth:0}}>
148 |                         <View style ={styles.view6}>
149 |                             <View style ={styles.view7}>
150 |                                 <Icon type = "material-community"
151 |                                     name ="map-marker"
152 |                                     color = {colors.black}
153 |                                     size = {22}
154 |                                 />
155 |                             </View>
156 |                             <View>
157 |                                 <Text style ={{fontSize:18,color:colors.black}}>32 Olivia Rd</Text>
158 |                                 <Text style ={{color:colors.grey3}}>Klipfontein 83-Ir, Boksburg</Text>
159 |                             </View>
160 |                         </View>
161 |                         <View>
162 |                             <Icon type = "material-community"
163 |                                         name ="chevron-right"
164 |                                         color = {colors.grey}
165 |                                         size = {26}
166 |                                     />
167 |                             </View>
168 |                     </View>  
169 | 
170 |                     <Text style ={styles.text4}> Around you</Text>
171 | 
172 |                     <View style ={{alignItems:"center",justifyContent:"center"}}>
173 |                        <MapView
174 |                             ref = {_map}
175 |                             provider ={PROVIDER_GOOGLE}
176 |                             style = {styles.map}
177 |                             customMapStyle ={mapStyle}
178 |                             showsUserLocation ={true}
179 |                             followsUserLocation = {true}
180 |                             initialRegion = {{...carsAround[0],latitudeDelta:0.008,longitudeDelta:0.008}}
181 |                            
182 |                         >
183 |                             {carsAround.map((item,index)=>
184 |                             <MapView.Marker coordinate = {item} key= {index.toString()}>
185 |                                 <Image 
186 |                                     source = {require('../../assets/carMarker.png')}
187 |                                     style ={styles.carsAround}
188 |                                     resizeMode = "cover"
189 |                                 />
190 |                             </MapView.Marker>
191 |                             
192 |                             )
193 | 
194 |                             }
195 | 
196 |                        </MapView>         
197 |                     </View>
198 |             </ScrollView>
199 |             <StatusBar style ="light" backgroundColor = "#2058c0" translucent ={true} />
200 |         </View>
201 |     )
202 | }
203 | 
204 | export default HomeScreen
205 | 
206 | const styles = StyleSheet.create({
207 |     container:{
208 |         flex:1,
209 |         backgroundColor:colors.white,
210 |         paddingBottom:30,
211 |         paddingTop:parameters.statusBarHeight
212 |     },
213 |     header:{
214 |       backgroundColor:colors.blue,
215 |       height:parameters.headerHeight,
216 |       alignItems:"flex-start"
217 |      
218 |     },
219 |     
220 |     image1:{
221 |      
222 |       height:100,
223 |       width:100,
224 |     
225 |     },
226 |     
227 |     image2:{height:60,width:60,
228 |             borderRadius:30,
229 |           },
230 |     
231 |     home:{
232 |      backgroundColor:colors.blue,
233 |      paddingLeft:20,
234 |      
235 |     },
236 |     
237 |     text1:{
238 |      color:colors.white,
239 |      fontSize:21,
240 |      paddingBottom:20,
241 |      paddingTop:20
242 |     },
243 |     
244 |     text2:{
245 |      color:colors.white,
246 |      fontSize:16
247 |     },
248 |     
249 |     view1:{
250 |      flexDirection:"row",
251 |      flex:1,
252 |      paddingTop:30
253 |     },
254 |     
255 |     button1:{
256 |       height:40,
257 |       width:150,
258 |       backgroundColor:colors.black,
259 |       borderRadius:20,
260 |       alignItems:"center",
261 |       justifyContent:"center",
262 |       marginTop:20
263 |     },
264 |     
265 |     button1Text:{
266 |      color:colors.white,
267 |      fontSize:17,
268 |      marginTop:-2
269 |     
270 |     },
271 |     card:{
272 |      alignItems:"center",
273 |      margin:SCREEN_WIDTH/22
274 |     
275 |     },
276 |     
277 |     view2:{marginBottom:5,
278 |           borderRadius:15,
279 |           backgroundColor:colors.grey6
280 |         },
281 |     
282 |         title:{
283 |           color:colors.black,
284 |           fontSize:16
285 |         },
286 |     view3:{flexDirection:"row",
287 |              marginTop :5,
288 |              height:50,
289 |              backgroundColor:colors.grey6,
290 |              alignItems:"center",
291 |              justifyContent:"space-between",
292 |             marginHorizontal:15
293 |             
294 |              },
295 |     text3:{marginLeft:15,
296 |             fontSize:20,
297 |             color:colors.black
298 |       },
299 |     
300 |     view4:{ flexDirection:"row",
301 |             alignItems:"center",
302 |             marginRight:15,
303 |             backgroundColor:"white",
304 |             paddingHorizontal:10,
305 |             paddingVertical:2,
306 |             borderRadius:20
307 |             },
308 |     
309 |     view5:{ flexDirection:"row",
310 |     alignItems:"center",
311 |     backgroundColor:"white",
312 |     paddingVertical:25,
313 |     justifyContent:"space-between",
314 |     marginHorizontal:15,
315 |     borderBottomColor:colors.grey4,
316 |     borderBottomWidth:1,
317 |     flex:1
318 |     },
319 |     
320 |     view6:{
321 |     
322 |     
323 |     alignItems:"center",
324 |     flex:5,
325 |     flexDirection:"row"
326 |     },
327 |     view7:{
328 |     backgroundColor:colors.grey6,
329 |     height:40,
330 |     width:40,
331 |     borderRadius:20,
332 |     alignItems:"center",
333 |     justifyContent:"center",
334 |     marginRight:20
335 |     
336 |     },
337 |     
338 |     map:{
339 |        
340 |     height: 150,
341 |      marginVertical: 0,
342 |      width:SCREEN_WIDTH*0.92
343 |     },
344 |     
345 |     text4:{ fontSize:20,
346 |           color:colors.black,
347 |           marginLeft:20,
348 |           marginBottom:20
349 |         },
350 |     
351 |     icon1:  {marginLeft:10,
352 |            marginTop:5
353 |           },
354 | 
355 |     view8: {flex:4,
356 |           marginTop:-25
357 |         } ,
358 |     carsAround: {
359 |     width: 28,
360 |     height: 14,
361 |     
362 |     }, 
363 |     
364 |     location: {
365 |       width: 16,
366 |       height: 16,
367 |       borderRadius:8,
368 |       backgroundColor:colors.blue,
369 |       alignItems:"center",
370 |       justifyContent:"center"
371 |       
372 |       }, 
373 |       
374 |     view9:{width:4,
375 |     height:4,
376 |     borderRadius:2,
377 |     backgroundColor:"white"
378 |     }
379 | 
380 | 
381 | })
382 | 


--------------------------------------------------------------------------------
/src/screens/RequestScreen.js:
--------------------------------------------------------------------------------
  1 | import React,{useState,useContext,useEffect,useRef,useMemo,useCallback} from 'react'
  2 | import { StyleSheet, Image,View,Text,Dimensions,TouchableOpacity} from 'react-native'
  3 | import BottomSheet, { BottomSheetFlatList,BottomSheetSectionList } from '@gorhom/bottom-sheet';
  4 | import { Avatar,Icon} from 'react-native-elements';
  5 | import MapComponent from '../components/MapComponent'
  6 | import { colors,parameters } from '../global/styles'
  7 | import { rideData } from '../global/data';
  8 | import { OriginContext,DestinationContext } from '../contexts/contexts';
  9 | 
 10 | const SCREEN_HEIGHT = Dimensions.get('window').height;
 11 | const SCREEN_WIDTH = Dimensions.get('window').width;
 12 | 
 13 | 
 14 | export default function RequestScreen({navigation,route}) {
 15 |     const {origin,dispatchOrigin} = useContext(OriginContext)
 16 |     const [userOrigin,setUserOrigin] = useState({latitude:origin.latitude,
 17 |                                                   longitude:origin.longitude})
 18 |     const {destination,dispatchDestination} = useContext(DestinationContext)
 19 |     const [userDestination,setUserDestination] = useState({latitude:destination.latitude,
 20 |                                                 longitude:destination.longitude}) 
 21 |                                                 
 22 |    const bottomsheet1 =useRef(1)  ;  
 23 |    
 24 |    const snapPoints1 = useMemo(()=>['70%'],[])
 25 |    const handleSheetChange1  = useCallback((index)=>{},[])
 26 | 
 27 | useEffect(()=>{
 28 |     setUserOrigin({latitude:origin.latitude,
 29 |         longitude:origin.longitude});
 30 |     setUserDestination({latitude:destination.latitude,
 31 |         longitude:destination.longitude})    
 32 | },[origin,destination])
 33 | 
 34 | 
 35 | const renderFlatListItems = useCallback(({item})=>(
 36 |     <View>
 37 |           <View style ={styles.view10}>
 38 |             <View style ={styles.view11}>
 39 |             <Icon 
 40 |                     type ="material-community"
 41 |                     name ="clock-time-four"
 42 |                     color ={colors.white}
 43 |                     size ={18}
 44 |                     />
 45 |             </View>
 46 |             <View>
 47 |                 <Text style ={{fontSize:15,color:colors.grey1}}>{item.street}</Text> 
 48 |                 <Text style ={{color:colors.grey4}}>{item.area}</Text> 
 49 |             </View>
 50 |         </View>
 51 |     </View>
 52 | ),[])
 53 | 
 54 | 
 55 |     return (
 56 |         <View style ={styles.container}>
 57 |             <View style ={styles.view1}> 
 58 |                 <Icon 
 59 |                     type ="material-community"
 60 |                     name ="arrow-left"
 61 |                     color ={colors.grey1}
 62 |                     size ={32} 
 63 |                 />
 64 |             </View>
 65 |             <View style = {styles.view2}>
 66 |                 <TouchableOpacity>
 67 |                     <View style ={styles.view3}>
 68 |                         <Avatar 
 69 |                             rounded
 70 |                             avatarStyle ={{}}
 71 |                             size ={30}
 72 |                             source = {require('../../assets/blankProfilePic.jpg')}
 73 |                             />
 74 |                           <Text style ={{marginLeft:5}}>For Someone</Text>
 75 |                           <Icon 
 76 |                               type ="material-community"
 77 |                               name ="chevron-down"
 78 |                               color ={colors.grey1}
 79 |                               size ={26}
 80 |                             />
 81 |                     </View>
 82 |                 </TouchableOpacity>
 83 |                 <View style ={styles.view4}>
 84 |                     <View>
 85 |                         <Image 
 86 |                             style = {styles.image1}
 87 |                             source ={require("../../assets/transit.png")}
 88 |                         />
 89 |                     </View>
 90 |                     <View>
 91 |                         <TouchableOpacity onPress ={()=>navigation.navigate("DestinationScreen")}>
 92 |                             <View style = {styles.view6}>
 93 |                                 <Text style ={styles.text1}>From where</Text>
 94 |                             </View>
 95 |                         </TouchableOpacity>
 96 |                         <View style ={styles.view7}>
 97 |                         <TouchableOpacity>
 98 |                             <View style ={styles.view5}>
 99 |                                 <Text style ={styles.text10}>...</Text>
100 |                             </View>
101 |                         </TouchableOpacity>
102 |                         <View style ={styles.view8}>
103 |                             <Icon 
104 |                                 type ="material-community"
105 |                                 name ="plus-thick"
106 |                                 color ={colors.black}
107 |                                 size ={25}
108 |                                 />   
109 |                         </View>
110 |                     </View>
111 |                     </View>
112 |                    
113 |                 </View>
114 |             </View>
115 |             <MapComponent userOrigin ={userOrigin} userDestination = {userDestination} />
116 |             <BottomSheet
117 |                 ref={bottomsheet1}
118 |                 index={route.params.state}
119 |                 snapPoints = {snapPoints1}
120 |                 onChange={handleSheetChange1}
121 | 
122 |                 >
123 |                 <BottomSheetFlatList 
124 |                   keyboardShouldPersistTaps = 'always'  
125 |                   data={rideData}
126 |                   keyExtractor = {item=>item.id}
127 |                   renderItem={renderFlatListItems}
128 |                   contentContainerStyle ={styles.contentContainer}
129 |                   ListHeaderComponent={<View style ={styles.view10}>
130 |                                 <View style ={styles.view11}>
131 |                                     <Icon 
132 |                                         type ="material-community"
133 |                                         name ="star"
134 |                                         color ={colors.white}
135 |                                         size ={20}
136 |                                         />
137 |                                 </View>
138 |                                 <View>
139 |                                    <Text style ={styles.text9}>Saved Places</Text> 
140 |                                 </View>
141 |                         </View>}
142 |                 ListFooterComponent={
143 |                     <View>
144 |                         <View style ={styles.view10}>
145 |                             <View style ={styles.view11}>
146 |                             <Icon 
147 |                                     type ="material-community"
148 |                                     name ="map-marker"
149 |                                     color ={colors.white}
150 |                                     size ={20}
151 |                                     />
152 |                             </View>
153 |                             <View>
154 |                                 <Text style ={styles.text9}>Set location on map</Text> 
155 |                             </View>
156 |                         </View>
157 |                         <View style ={styles.view10}>
158 |                             <View style ={styles.view11}>
159 |                             <Icon 
160 |                                     type ="material-community"
161 |                                     name ="skip-next"
162 |                                     color ={colors.white}
163 |                                     size ={20}
164 |                                     />
165 |                             </View>
166 |                             <View>
167 |                                 <Text style ={styles.text9}>Enter destination later</Text> 
168 |                             </View>
169 |                         </View>
170 |                     </View> 
171 |                 }        
172 |                 />
173 |             </BottomSheet>
174 |         </View>
175 |     )
176 | }
177 | 
178 | 
179 | 
180 | 
181 | 
182 | 
183 | const styles = StyleSheet.create({
184 |     container1:{flex:1,
185 |         paddingTop:parameters.statusBarHeight,
186 |         
187 |     },
188 | 
189 |     container: {
190 |         flex: 1,
191 |         paddingTop:parameters.statusBarHeight
192 |        
193 |       },
194 |       contentContainer: {
195 |         flex: 1,
196 |         alignItems: 'center',
197 |        
198 |       },
199 | 
200 |       view1:{
201 |         position:"absolute",
202 |         top:25,
203 |         left:12,
204 |         backgroundColor:colors.white,
205 |         height:40,
206 |         width:40,
207 |         borderRadius:20,
208 |         justifyContent:"center",
209 |         alignItems:"center",
210 |         marginTop:2, 
211 |         zIndex: 8
212 |         
213 |       },
214 | 
215 |       view2:{
216 |         height:SCREEN_HEIGHT*0.21,
217 |         alignItems:"center",
218 |         zIndex: 5,
219 |         backgroundColor:colors.white
220 |       },
221 |       
222 |       view3:{
223 |           flexDirection:"row",
224 |           alignItems:"center",
225 |           marginTop:2,   
226 |           marginBottom:10,
227 |           backgroundColor: colors.white,
228 |           //height:30,
229 |           zIndex:10,
230 |            
231 |         
232 |       },
233 |       view4:{
234 |             flexDirection:"row",
235 |             alignItems:"center",
236 |             
237 |       },
238 |       view5:{
239 |           backgroundColor:colors.grey7,
240 |           width:SCREEN_WIDTH*0.70,
241 |           height:40,
242 |           justifyContent:"center",
243 |           marginTop:10,
244 |           
245 |       },
246 |       view6:{
247 |         backgroundColor:colors.grey6,
248 |         width:SCREEN_WIDTH*0.70,
249 |         height:40,
250 |         justifyContent:"center",
251 |         marginTop:10,
252 |         paddingLeft:0
253 |     },
254 |       text1:{
255 |           marginLeft:10,
256 |           fontSize:16,
257 |           color:colors.grey1
258 |       },
259 |     
260 |       image1:{  height:70,
261 |                 width:30,
262 |                 marginRight:10,
263 |                 marginTop:10
264 |             },
265 |      view7:{
266 |          flexDirection:"row",
267 |          alignItems:"center"
268 |      },
269 |      view8:{
270 |          marginLeft:10
271 |      },
272 |      view10:{
273 |         alignItems:"center",
274 |         flex:5,
275 |         flexDirection:"row",
276 |         paddingVertical:10,
277 |         borderBottomColor:colors.grey5,
278 |         borderBottomWidth:1,
279 |         paddingHorizontal:15
280 |      },
281 |      view11:{
282 |         backgroundColor:colors.grey,
283 |         height:30,
284 |         width:30,
285 |         borderRadius:15,
286 |         alignItems:"center",
287 |         justifyContent:"center",
288 |         marginRight:15,
289 |         marginTop:15,
290 |      },
291 | 
292 |      contentContainer: {
293 |         backgroundColor: 'white',
294 |       },
295 | 
296 |     view12:{
297 |         alignItems:"center",
298 |         paddingVertical:10,
299 |         borderBottomWidth:1,
300 |         borderBottomColor:colors.grey4
301 |     },
302 | 
303 |     text2:{
304 |         fontSize:18,
305 |         color:colors.grey1
306 |     },
307 |     text3:{
308 |         fontSize:16,
309 |         color:colors.black,
310 |         fontWeight:"bold",
311 |         marginRight:5,
312 |      
313 |     },
314 | 
315 |     text4:{color:colors.grey2,
316 |         marginTop:4
317 |                 },
318 | 
319 |     view13:{
320 |         flexDirection:"row",
321 |         alignItems:"flex-start",
322 |         justifyContent:"space-between",
323 |         paddingHorizontal:15,
324 |         paddingVertical:5
325 |     },
326 | 
327 |     button1:{
328 |         height:40,
329 |         width:100,
330 |         backgroundColor:colors.grey6,
331 |         borderRadius:20,
332 |         alignItems:"center",
333 |         justifyContent:"center",
334 |         marginTop:20
335 |      },
336 | 
337 |     button2:{
338 |         height:50,
339 |         backgroundColor:colors.grey10,
340 |         alignItems:"center",
341 |         justifyContent:"center",
342 |         marginTop:20,
343 |         marginHorizontal:30
344 |      },
345 | 
346 |     
347 |   
348 |      button1Text:{
349 |        
350 |        fontSize:17,
351 |        marginTop:-2,
352 |        color:colors.black
353 |   
354 |      },
355 | 
356 |      button2Text:{
357 |         color:colors.white,
358 |         fontSize:23,
359 |         marginTop:-2,
360 |        
361 |    
362 |       },
363 | 
364 |       
365 |     view14:{
366 |      
367 |     
368 |       alignItems:"center",
369 |       flex:5,
370 |       flexDirection:"row"
371 |     },
372 |     view15:{
373 |       backgroundColor:colors.grey6,
374 |       height:40,
375 |       width:40,
376 |       borderRadius:20,
377 |       alignItems:"center",
378 |       justifyContent:"center",
379 |       marginRight:20
380 |       
381 |     },
382 | 
383 |     view16:{
384 |         flexDirection:"row",
385 |         alignItems:"baseline"
386 |     },
387 | 
388 |     text5:{
389 |         fontSize:12,
390 |         color:colors.black,
391 |         marginLeft:3,
392 |         fontWeight:"bold",
393 |         paddingBottom:1
394 |         
395 |     },
396 |     
397 |     view17:{
398 |         
399 |       },
400 | 
401 |     view18:{
402 |       
403 |     
404 | 
405 |       },
406 | 
407 |     view19:{flex:1.7,
408 |         alignItems:"flex-end",
409 |       
410 |     },
411 | 
412 |     icon:{paddingBottom:2},
413 | 
414 |     image2:{height:60,width:60 },
415 | 
416 |     view20:{marginRight:10 },
417 | 
418 |     text6:{
419 |         fontSize:15,
420 |         color:colors.black,
421 |         fontWeight:"bold", 
422 |     },
423 | 
424 |     view21:{
425 |         flexDirection:"row",
426 |         alignItems:"center",
427 |         justifyContent:"space-between",
428 |         marginHorizontal:30,
429 |         marginTop:15
430 |     },
431 | 
432 |  view22:{
433 |         alignItems:"center",
434 |         marginBottom:-20
435 |  },
436 | 
437 |  sectionHeaderContainer: {
438 |     backgroundColor: "white",
439 |     marginTop:30,
440 |     paddingLeft:15
441 |   },
442 | 
443 |  text7 : {
444 |     fontSize:28,
445 |     color:colors.black,
446 |     marginRight:5,
447 |  
448 | },
449 | 
450 | text8:{
451 |     fontSize:15,
452 |     color:colors.grey2,
453 |     textDecorationLine:"line-through"
454 |  
455 |  
456 | },
457 | 
458 | button3:{
459 |    
460 |     height:60,
461 |     backgroundColor:colors.black,
462 |     alignItems:"center",
463 |     justifyContent:"center",
464 |     width:SCREEN_WIDTH-110,
465 |     marginBottom:10
466 |  },
467 | 
468 | view23:{
469 |    flexDirection:"row", 
470 |    backgroundColor:colors.cardbackground,
471 |   // elevation:10,
472 |    justifyContent:"space-between",
473 |    alignItems:"flex-end",
474 |    paddingHorizontal:20,
475 |    height:80,
476 |   
477 | },
478 | 
479 | button2Image:{
480 |     height:55,
481 |     width:55,
482 |     alignItems:"center",
483 |     justifyContent:"center",
484 |     backgroundColor:colors.grey6,
485 |     marginBottom:10,
486 |     
487 | }
488 | ,
489 | text9:{fontSize:15,
490 |        color:colors.grey1
491 |     },
492 | 
493 | 
494 |     map:{
495 |         marginVertical: 0,
496 |         width:SCREEN_WIDTH,
497 |         zIndex: -1
498 |       }, 
499 |       
500 |       centeredView: {
501 |         zIndex:14
502 |       },
503 |       modalView: {
504 |         marginHorizontal: 20,
505 |         marginVertical:60,
506 |         backgroundColor: "white",
507 |         borderRadius: 20,
508 |         paddingHorizontal: 20,
509 |         paddingVertical:20,
510 |         shadowColor: "#000",
511 |         shadowOffset: {
512 |           width: 0,
513 |           height: 2
514 |         },
515 |         shadowOpacity: 0.25,
516 |         shadowRadius: 4,
517 |         elevation: 5,
518 |         zIndex:16
519 |       }, 
520 |       
521 |       view24:{
522 |         flexDirection:"row",
523 |         justifyContent:"space-between",
524 |        marginVertical:15,
525 |         paddingHorizontal:20   
526 |     }, 
527 |     
528 |     view25:{
529 |         flexDirection:'row',
530 |        alignItems:"baseline"
531 |     },
532 | 
533 |     flatlist:{
534 |         marginTop:20
535 |     },
536 | 
537 |    text10:{color:colors.grey2,
538 |            paddingLeft:10
539 |         }
540 |     
541 | })
542 | 
543 | 
544 | 
545 | 
546 | 


--------------------------------------------------------------------------------