add gif animation

Author: devrdias

README.md

@@ -2,10 +2,29 @@
 
 The main idea of this project is to show how can React Native interact with Google Maps API and Geolocation API.
 
-## React with Hooks
-
-- react 16.8.6
-- react-native 0.60.3
+Type a location on the search box and the app will determine and trace the route on the google map.
+
+
+## Dependencies
+```json
+    @react-native-community/geolocation: ^1.4.2
+    react: 16.8.6
+    react-native: 0.60.3
+    react-native-geocoding: ^0.3.0
+    react-native-gesture-handler: ^1.3.0
+    react-native-google-places-autocomplete: ^1.3.9
+    react-native-iphone-x-helper: ^1.2.1
+    react-native-loading-spinner-overlay: ^1.0.1
+    react-native-maps: ^0.25.0
+    react-native-maps-directions: ^1.7.0
+    react-native-paper: ^2.16.0
+    react-native-vector-icons: ^6.6.0
+    react-navigation: ^3.11.0
+    react-redux: ^7.1.0
+    redux: ^4.0.1
+    redux-saga: ^1.0.5
+    styled-components: ^4.3.1
+```
 
 ---
 
@@ -18,6 +37,11 @@ The main idea of this project is to show how can React Native interact with Goog
 
 ---
 
+<p align="center">
+  <img src="">
+</p>
+
+
 ## License
 
 This project is licensed under the MIT License.

src/demo/demoUber.gif

@@ -0,0 +1,94 @@
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import {
+  createAppContainer,
+  createStackNavigator,
+  SafeAreaView,
+} from 'react-navigation';
+import { useDispatch, useSelector } from 'react-redux';
+import Loading from '~/components/Loading';
+import { startup } from '../../redux/actions/startupActions';
+import NavigationService from '../../services/NavigationService';
+import Colors from '../../Theme/Colors';
+import MainScreen from '~/containers/Main';
+import SplashScreen from '../SplashScreen/SplashScreen';
+
+/**
+ * a root screen contem a navegacao do app
+ *
+ * @see https://reactnavigation.org/docs/en/hello-react-navigation.html#creating-a-stack-navigator
+ */
+
+// configuracao da Stack de navegacao
+// aplicas-se a todas as rotas
+const configureStack = {
+  // Splash screen é exibida por default durante a execucao do startup() saga
+  // ver definicao no arquivo StartupSaga.js
+  initialRouteName: 'SplashScreen',
+  // remove header de todas as telas
+  // https://reactnavigation.org/docs/en/stack-navigator.html#stacknavigatorconfig
+  headerMode: 'none',
+  navigationOptions: {
+    translucent: 'true',
+    headerStyle: {
+      backgroundColor: Colors.defaultBackground,
+      elevation: 0,
+      paddingTop: 40,
+    },
+    headerTitleStyle: {
+      textAlign: 'center',
+      fontFamily: 'Geomanist-Medium',
+      alignSelf: 'center',
+    },
+    headerTintColor: Colors.headerTintColor,
+  },
+};
+
+/**
+ * Root navigation
+ */
+const RootNavigator = createStackNavigator(
+  {
+    SplashScreen,
+    MainScreen,
+  },
+  configureStack,
+);
+
+/**
+ * Configure App Container - for react-navigation 3+
+ */
+const AppContainer = createAppContainer(RootNavigator);
+
+/**
+ * Define main RootScreen component
+ */
+const RootScreen = () => {
+  const { loading } = useSelector(state => state.api);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    // Executa startup saga quando aplicacao inicia
+    dispatch(startup());
+  }, []);
+
+  return (
+    <SafeAreaView
+      style={{ flex: 1, backgroundColor: Colors.defaultBackground }}
+    >
+      <View style={{ flex: 1 }}>
+        <Loading visible={loading} animation="fade" />
+        <AppContainer
+          // Utilizando NavigationService para permitir navegar de onde navigation props nao for acessível
+          // Permite navegar direto de um Saga, por exemplo
+          // NavigationService (https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html)
+          ref={(navigatorRef) => {
+            NavigationService.setTopLevelNavigator(navigatorRef);
+          }}
+        />
+      </View>
+    </SafeAreaView>
+  );
+};
+
+export default RootScreen;