close issue #29, navigation between screens improvement

ES2-UFPI · Jun 18, 2021 · 39505cc · 39505cc
1 parent 40048bc
commit 39505cc
Show file tree

Hide file tree

Showing 7 changed files with 341 additions and 50 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -10,15 +10,20 @@
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.15.4",
     "@react-native-community/checkbox": "^0.5.8",
+    "@react-native-community/masked-view": "^0.1.11",
     "@react-navigation/material-bottom-tabs": "^5.3.15",
     "@react-navigation/native": "^5.9.4",
+    "@react-navigation/stack": "^5.14.5",
     "axios": "^0.21.1",
     "expo": "~41.0.1",
     "expo-status-bar": "~1.0.4",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
+    "react-native-gesture-handler": "^1.10.3",
     "react-native-paper": "^4.9.1",
+    "react-native-reanimated": "^2.2.0",
+    "react-native-screens": "^3.4.0",
     "react-native-vector-icons": "^8.1.0",
     "react-native-web": "~0.13.12",
     "react-redux": "^7.2.4",

diff --git a/frontend/src/components/avatar.tsx → frontend/src/components/Avatar/avatar.tsx b/frontend/src/components/avatar.tsx → frontend/src/components/Avatar/avatar.tsx
diff --git a/frontend/src/components/BottomNavigation/index.tsx b/frontend/src/components/BottomNavigation/index.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import Home from '../../views/home';
+import Profile from '../../views/profile';
+import { Dimensions } from 'react-native'
+import RecordsList from '../../views/RecordsList';
+
+const Tab = createMaterialBottomTabNavigator<RoutesList>();
+const SCREEN_WIDTH = Dimensions.get("window").width;
+const iconSize = SCREEN_WIDTH * 0.07;
+
+export default function BottomNavigation() {
+  return (
+      <Tab.Navigator
+        shifting
+        initialRouteName="Home"
+        activeColor="#E1948B"
+        inactiveColor="#292B2D"
+        barStyle={{
+          backgroundColor: '#FCFCFF',
+          position: 'absolute',
+          overflow: 'hidden',
+          borderTopLeftRadius: 30,
+          borderTopRightRadius: 30,
+
+        }}
+
+      >
+        <Tab.Screen name="Home" component={Home} options={{
+          tabBarLabel: 'Início',
+          tabBarIcon: ({ color }) => (
+            <MaterialCommunityIcons name="home-outline" color={color} size={iconSize} />
+          ),
+        }} />
+        <Tab.Screen name="History" component={RecordsList} options={{
+          tabBarLabel: 'Histórico',
+          tabBarIcon: ({ color }) => (
+            <MaterialCommunityIcons name="file-document-outline" color={color} size={iconSize} />
+          ),
+        }} />
+        <Tab.Screen name="Profile" component={Profile} options={{
+          tabBarLabel: 'Perfil',
+          tabBarIcon: ({ color }) => (
+            <MaterialCommunityIcons name="account-outline" color={color} size={iconSize} />
+          ),
+        }} />
+      </Tab.Navigator >
+  );
+}
+
+type RoutesList = {
+  Home: undefined;
+  History: undefined;
+  Profile: undefined;
+};
diff --git a/frontend/src/routes.tsx b/frontend/src/routes.tsx
@@ -1,59 +1,27 @@
 import React from 'react';
-import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import Home from './views/home'
-import Profile from './views/profile';
 import { NavigationContainer } from '@react-navigation/native';
-import { Dimensions } from 'react-native'
-import RecordsList from './views/RecordsList';
+import { createStackNavigator } from '@react-navigation/stack';
+import EditProfile from './views/editProfile';
+import BottomNavigation from './components/BottomNavigation';
 
-const Tab = createMaterialBottomTabNavigator<RoutesList>();
-const SCREEN_WIDTH = Dimensions.get("window").width;
-const iconSize = SCREEN_WIDTH * 0.07;
+const Stack = createStackNavigator<RootStackParamList>();
 
 export default function Routes() {
   return (
     <NavigationContainer>
-      <Tab.Navigator
-        shifting
-        initialRouteName="Home"
-        activeColor="#E1948B"
-        inactiveColor="#292B2D"
-        barStyle={{
-          backgroundColor: '#FCFCFF',
-          position: 'absolute',
-          overflow: 'hidden',
-          borderTopLeftRadius: 30,
-          borderTopRightRadius: 30,
-
+      <Stack.Navigator
+        screenOptions={{
+          headerShown: false
         }}
-
       >
-        <Tab.Screen name="Home" component={Home} options={{
-          tabBarLabel: 'Início',
-          tabBarIcon: ({ color }) => (
-            <MaterialCommunityIcons name="home-outline" color={color} size={iconSize} />
-          ),
-        }} />
-        <Tab.Screen name="History" component={RecordsList} options={{
-          tabBarLabel: 'Histórico',
-          tabBarIcon: ({ color }) => (
-            <MaterialCommunityIcons name="file-document-outline" color={color} size={iconSize} />
-          ),
-        }} />
-        <Tab.Screen name="Profile" component={Profile} options={{
-          tabBarLabel: 'Perfil',
-          tabBarIcon: ({ color }) => (
-            <MaterialCommunityIcons name="account-outline" color={color} size={iconSize} />
-          ),
-        }} />
-      </Tab.Navigator >
+        <Stack.Screen name='BottomNavigation' component={BottomNavigation} />
+        <Stack.Screen name='EditProfile' component={EditProfile} />
+      </Stack.Navigator>
     </NavigationContainer>
   );
 }
 
-type RoutesList = {
-  Home: undefined;
-  History: undefined;
-  Profile: undefined;
+type RootStackParamList = {
+  BottomNavigation: undefined
+  EditProfile: undefined
 };