Activity Nav

Author: Tourniercy

App/App.js

@@ -1,8 +1,12 @@
 import React, {Component} from "react";
-import {Platform, StatusBar, StyleSheet, SafeAreaView, AppRegistry} from 'react-native';
+import {Platform, StatusBar, StyleSheet, AppRegistry} from 'react-native';
 import { createRootNavigator } from "./navigation/Navigation";
 import { isSignedIn } from "./auth/Auth";
 import { SaveCourse } from "./functions/functions";
+import { SafeAreaView } from 'react-navigation';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+
 
 export default class App extends Component {
     constructor(props) {
@@ -24,19 +28,18 @@ export default class App extends Component {
         // return (
         //     <SaveCourse/>
         // );
-        const { checkedSignIn, signedIn } = this.state;
+        let { checkedSignIn, signedIn } = this.state;
 
         // If we haven't checked AsyncStorage yet, don't render anything (better ways to do this)
         if (!checkedSignIn) {
             return null;
         }
-
+        signedIn = true;
         const Layout = createRootNavigator(signedIn);
         return (
-            <SafeAreaView style={styles.droidSafeArea}>
+                <SafeAreaProvider>
                     <Layout />
-            </SafeAreaView>
-
+                </SafeAreaProvider>
         );
     }
 }

App/navigation/Navigation.js

@@ -3,11 +3,8 @@ import { Platform, StatusBar } from "react-native";
 import { createStackNavigator } from 'react-navigation-stack';
 import { createSwitchNavigator,createAppContainer } from 'react-navigation';
 import createBottomTabNavigator from "react-navigation-tabs/src/navigators/createBottomTabNavigator";
-
-
 import LoginScreen from '../view/Login';
 import InscriptionScreen from '../view/Inscription';
-import ForgotPasswordScreen from '../view/ForgotPassword';
 import Activity from "../view/Activity";
 import Home from '../view/Home'
 import Icon from "react-native-vector-icons/FontAwesome5";
@@ -37,23 +34,23 @@ export const SignedOut = createAppContainer(createStackNavigator({
 
 export const SignedIn = createAppContainer(createBottomTabNavigator(
     {
-        Activités: {
+        Courses: {
             screen: Activity,
             navigationOptions: {
                 tabBarIcon: ({ tintColor }) => (
                     <Icon name="list" size={25} color={tintColor} />
                 )
             }
         },
-        Course: {
+        Activité: {
             screen: Home,
             navigationOptions: {
                 tabBarIcon: ({ tintColor }) => (
                     <Icon name="walking" size={25} color={tintColor} />
                 )
             }
         },
-        Profile: {
+        Profil: {
             screen: Home,
             navigationOptions: {
                 tabBarIcon: ({ tintColor }) => (
@@ -63,7 +60,7 @@ export const SignedIn = createAppContainer(createBottomTabNavigator(
         },
     },
     {
-        initialRouteName: 'Course',
+        initialRouteName: 'Activité',
         tabBarOptions: {
             style: {
                 activeTintColor: '#2C5077'

App/package.json

@@ -13,6 +13,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.27",
     "@fortawesome/free-solid-svg-icons": "^5.12.1",
     "@fortawesome/react-native-fontawesome": "^0.1.0",
+    "@react-native-community/masked-view": "0.1.5",
     "@react-navigation/material-bottom-tabs": "^5.0.0-alpha.36",
     "@react-navigation/native": "latest",
     "@react-navigation/stack": "^5.2.8",
@@ -40,6 +41,8 @@
     "react-native-material-bottom-navigation": "^1.0.5",
     "react-native-paper": "^3.5.1",
     "react-native-reanimated": "~1.4.0",
+    "react-native-safe-area-context": "^0.6.0",
+    "react-native-safe-area-view": "^1.0.0",
     "react-native-scl-alert": "^1.2.1",
     "react-native-screens": "2.0.0-alpha.12",
     "react-native-stopwatch-timer": "0.0.21",
@@ -53,9 +56,7 @@
     "react-navigation-transitions": "^1.0.12",
     "react-redux": "^7.1.3",
     "redux": "^4.0.4",
-    "yup": "^0.28.0",
-    "react-native-safe-area-context": "0.6.0",
-    "@react-native-community/masked-view": "0.1.5"
+    "yup": "^0.28.0"
   },
   "devDependencies": {
     "babel-preset-expo": "^7.1.0",

App/view/Activity.js

@@ -80,10 +80,7 @@ class ActivityScreen extends React.Component {
         const { navigation } = this.props;
         return (
             <View style={{flex: 1}}>
-                <View style={{flex: 1, flexDirection: 'row',alignContent:'stretch',paddingTop:10}}>
-                    <Text style={{fontSize: 20, fontWeight: 'bold',textAlign:'left',marginLeft: 20}}>ACTIVITÉS</Text>
-                </View>
-                <View style={{flex:12}}>
+                <View style={{flex:1}}>
                     <NavigationEvents
                         onDidFocus={() => this.refreshCourses()}
                     />
@@ -102,6 +99,7 @@ class ActivityScreen extends React.Component {
 class DetailScreen extends React.Component {
     render() {
         const { navigation } = this.props;
+        navigation.setOptions({ title:  'MAR 21/01/2020' });
         return (
             <View style={{flex:1}}>
                 <View style={{flex:1}}>
@@ -132,8 +130,13 @@ const Stack = createStackNavigator();
 function MyStack() {
     return (
         <Stack.Navigator>
-            <Stack.Screen name="ActivityScreen" component={ActivityScreen} />
-            <Stack.Screen name="DetailScreen" component={DetailScreen} />
+            <Stack.Screen name="ActivityScreen" component={ActivityScreen} options={{
+                title: 'Liste des courses',
+            }} />
+            <Stack.Screen name="DetailScreen" component={DetailScreen} options={{
+                title: 'MAR., 21/01/2020',
+            }}
+                />
         </Stack.Navigator>
     );
 }

App/view/Home.js

@@ -8,6 +8,7 @@ import * as Location from 'expo-location';
 import * as TaskManager from 'expo-task-manager';
 import { Stopwatch } from 'react-native-stopwatch-timer';
 import ViewShot from "react-native-view-shot";
+import SafeAreaView from 'react-native-safe-area-view';
 import * as geolib from 'geolib';
 
 const STORAGE_KEY_COORDINATES = 'COORDINATES';
@@ -204,6 +205,7 @@ export default class Home extends Component {
             }
         }
         return (
+            <SafeAreaView style={{ flex: 1}} forceInset={{ top: 'always' }}>
             <View style={{flex:1}}>
                 <View style={{flex:1,backgroundColor:'white', padding: 10, paddingBottom: 20}}>
                     <View style={{flex: 1, flexDirection: 'row',alignContent:'stretch',justifyContent:'center',alignItems: 'stretch',paddingTop:10}}>
@@ -302,6 +304,7 @@ export default class Home extends Component {
                 </View>
 
             </View>
+            </SafeAreaView>
         );
     }