Merge pull request #23 from srct/header-rework

Header rework
srct · Jan 15, 2019 · 3b6de87 · 3b6de87
2 parents 008df10 + a25b48b
commit 3b6de87
Show file tree

Hide file tree

Showing 16 changed files with 147 additions and 184 deletions.
diff --git a/App.js b/App.js
@@ -1,13 +1,13 @@
-import { createStackNavigator } from 'react-navigation';
+import { createStackNavigator, createAppContainer } from 'react-navigation';
 import { Sentry } from 'react-native-sentry';
 
 import { EventListPage, EventDetailsPage } from 'masontoday/src/components';
-
+import { Colors } from 'masontoday/src/utils';
 if (!__DEV__) {
     Sentry.config('https://4f6e0cb23ab04d5a89c5d6b99b2cb6f2@sentry.io/1279094').install();
 }
 
-const App = createStackNavigator(
+const MainNavigator = createStackNavigator(
     {
         EventList: {
             screen: EventListPage,
@@ -17,9 +17,15 @@ const App = createStackNavigator(
         },
     },
     {
-        mode: 'modal',
-        headerMode: 'none',
+        // mode: 'modal',
+        defaultNavigationOptions: {
+            headerTintColor: Colors.green1,
+            headerStyle: {
+                backgroundColor: Colors.gray1,
+            },
+        },
     }
 );
+const App = createAppContainer(MainNavigator);
 
 export default App;
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -138,6 +138,7 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-gesture-handler')
     compile project(':react-native-sentry')
     compile project(':react-native-app-settings')
     compile project(':react-native-add-calendar-event')

diff --git a/android/app/src/main/java/com/masontoday/MainApplication.java b/android/app/src/main/java/com/masontoday/MainApplication.java
@@ -3,6 +3,7 @@
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
 import io.sentry.RNSentryPackage;
 import com.krazylabs.OpenAppSettingsPackage;
 import com.vonovak.AddCalendarEventPackage;
@@ -26,6 +27,7 @@ public boolean getUseDeveloperSupport() {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new RNGestureHandlerPackage(),
             new RNSentryPackage(),
             new OpenAppSettingsPackage(),
             new AddCalendarEventPackage()

diff --git a/android/settings.gradle b/android/settings.gradle
@@ -1,4 +1,6 @@
 rootProject.name = 'masontoday'
+include ':react-native-gesture-handler'
+project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
 include ':react-native-sentry'
 project(':react-native-sentry').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sentry/android')
 include ':react-native-app-settings'

diff --git a/ios/masontoday.xcodeproj/project.pbxproj b/ios/masontoday.xcodeproj/project.pbxproj
@@ -5,7 +5,6 @@
 	};
 	objectVersion = 46;
 	objects = {
-
 /* Begin PBXBuildFile section */
 		00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
 		00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };
@@ -42,6 +41,7 @@
 		ADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */; };
 		D77F3D242EDF43EBA842EEF9 /* libz.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = A7D7F88FEA994BD78E15F0DD /* libz.tbd */; };
 		F32E18BB7AD949559315AC8B /* libRNSentry.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 0ADC2D979BD64B709A3B86DE /* libRNSentry.a */; };
+		B88FF80A781049BC8023A4CC /* libRNGestureHandler.a in Frameworks */ = {isa = PBXBuildFile; fileRef = F4577E48285846519BE18129 /* libRNGestureHandler.a */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -375,6 +375,8 @@
 		A7D7F88FEA994BD78E15F0DD /* libz.tbd */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = libz.tbd; path = usr/lib/libz.tbd; sourceTree = SDKROOT; };
 		ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTBlob.xcodeproj; path = "../node_modules/react-native/Libraries/Blob/RCTBlob.xcodeproj"; sourceTree = "<group>"; };
 		F7C861F864F64E1C8BB100ED /* RNSentry.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNSentry.xcodeproj; path = "../node_modules/react-native-sentry/ios/RNSentry.xcodeproj"; sourceTree = "<group>"; };
+		4E9051F92BA9401293669CE4 /* RNGestureHandler.xcodeproj */ = {isa = PBXFileReference; name = "RNGestureHandler.xcodeproj"; path = "../node_modules/react-native-gesture-handler/ios/RNGestureHandler.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
+		F4577E48285846519BE18129 /* libRNGestureHandler.a */ = {isa = PBXFileReference; name = "libRNGestureHandler.a"; path = "libRNGestureHandler.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -407,6 +409,7 @@
 				9F775E5C174B4301A62EABFE /* libRNOpenAppSettings.a in Frameworks */,
 				F32E18BB7AD949559315AC8B /* libRNSentry.a in Frameworks */,
 				D77F3D242EDF43EBA842EEF9 /* libz.tbd in Frameworks */,
+				B88FF80A781049BC8023A4CC /* libRNGestureHandler.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -631,6 +634,7 @@
 				7ACAAF0ABE4E407986069E22 /* RNAddCalendarEvent.xcodeproj */,
 				3CAA1388F4A9492AB338D139 /* RNOpenAppSettings.xcodeproj */,
 				F7C861F864F64E1C8BB100ED /* RNSentry.xcodeproj */,
+				4E9051F92BA9401293669CE4 /* RNGestureHandler.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -1300,6 +1304,7 @@
 					"$(SRCROOT)/../node_modules/react-native-add-calendar-event/ios",
 					"$(SRCROOT)/../node_modules/react-native-app-settings/ios",
 					"$(SRCROOT)/../node_modules/react-native-sentry/ios/**",
+					"$(SRCROOT)/../node_modules/react-native-gesture-handler/ios/**",
 				);
 				INFOPLIST_FILE = masontodayTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
@@ -1309,6 +1314,7 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1329,6 +1335,7 @@
 					"$(SRCROOT)/../node_modules/react-native-add-calendar-event/ios",
 					"$(SRCROOT)/../node_modules/react-native-app-settings/ios",
 					"$(SRCROOT)/../node_modules/react-native-sentry/ios/**",
+					"$(SRCROOT)/../node_modules/react-native-gesture-handler/ios/**",
 				);
 				INFOPLIST_FILE = masontodayTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
@@ -1338,6 +1345,7 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1359,6 +1367,7 @@
 					"$(SRCROOT)/../node_modules/react-native-add-calendar-event/ios",
 					"$(SRCROOT)/../node_modules/react-native-app-settings/ios",
 					"$(SRCROOT)/../node_modules/react-native-sentry/ios/**",
+					"$(SRCROOT)/../node_modules/react-native-gesture-handler/ios/**",
 				);
 				INFOPLIST_FILE = masontoday/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1382,6 +1391,7 @@
 					"$(SRCROOT)/../node_modules/react-native-add-calendar-event/ios",
 					"$(SRCROOT)/../node_modules/react-native-app-settings/ios",
 					"$(SRCROOT)/../node_modules/react-native-sentry/ios/**",
+					"$(SRCROOT)/../node_modules/react-native-gesture-handler/ios/**",
 				);
 				INFOPLIST_FILE = masontoday/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1412,6 +1422,7 @@
 					"$(SRCROOT)/../node_modules/react-native-add-calendar-event/ios",
 					"$(SRCROOT)/../node_modules/react-native-app-settings/ios",
 					"$(SRCROOT)/../node_modules/react-native-sentry/ios/**",
+					"$(SRCROOT)/../node_modules/react-native-gesture-handler/ios/**",
 				);
 				INFOPLIST_FILE = "masontoday-tvOS/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1420,6 +1431,7 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1450,6 +1462,7 @@
 					"$(SRCROOT)/../node_modules/react-native-add-calendar-event/ios",
 					"$(SRCROOT)/../node_modules/react-native-app-settings/ios",
 					"$(SRCROOT)/../node_modules/react-native-sentry/ios/**",
+					"$(SRCROOT)/../node_modules/react-native-gesture-handler/ios/**",
 				);
 				INFOPLIST_FILE = "masontoday-tvOS/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1458,6 +1471,7 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1487,6 +1501,7 @@
 					"$(SRCROOT)/../node_modules/react-native-add-calendar-event/ios",
 					"$(SRCROOT)/../node_modules/react-native-app-settings/ios",
 					"$(SRCROOT)/../node_modules/react-native-sentry/ios/**",
+					"$(SRCROOT)/../node_modules/react-native-gesture-handler/ios/**",
 				);
 				INFOPLIST_FILE = "masontoday-tvOSTests/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
@@ -1495,6 +1510,7 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1524,6 +1540,7 @@
 					"$(SRCROOT)/../node_modules/react-native-add-calendar-event/ios",
 					"$(SRCROOT)/../node_modules/react-native-app-settings/ios",
 					"$(SRCROOT)/../node_modules/react-native-sentry/ios/**",
+					"$(SRCROOT)/../node_modules/react-native-gesture-handler/ios/**",
 				);
 				INFOPLIST_FILE = "masontoday-tvOSTests/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
@@ -1532,6 +1549,7 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",

diff --git a/package.json b/package.json
@@ -15,12 +15,13 @@
         "react-native": "0.57.8",
         "react-native-add-calendar-event": "^2.0.2",
         "react-native-app-settings": "^2.0.0",
+        "react-native-gesture-handler": "^1.0.12",
         "react-native-sentry": "^0.39.0",
-        "react-navigation": "^2.6.2"
+        "react-navigation": "^3.0.9"
     },
     "devDependencies": {
-        "jest": "23.6.0",
         "babel-jest": "23.6.0",
+        "jest": "23.6.0",
         "metro-react-native-babel-preset": "0.51.1",
         "react-test-renderer": "16.6.3"
     },

diff --git a/src/components/atoms/Button.js b/src/components/atoms/Button.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { Text, TouchableOpacity } from 'react-native';
 
 export default class Button extends React.Component {
     render() {

diff --git a/src/components/index.js b/src/components/index.js
@@ -2,7 +2,7 @@ import { Button } from './atoms';
 import { CallToAction } from './molecules';
 import { EventListPage, EventDetailsPage } from './pages';
 import { EventCard } from './organisms';
-import { HeaderTemplate, PageTemplate } from './templates';
+import { PageTemplate } from './templates';
 
 export {
     // Atoms
@@ -15,6 +15,5 @@ export {
     EventListPage,
     EventDetailsPage,
     //Templates
-    HeaderTemplate,
     PageTemplate,
 };
diff --git a/...ages/EventDetailsPage/EventDetailsPage.js → src/components/pages/EventDetailsPage.js b/...ages/EventDetailsPage/EventDetailsPage.js → src/components/pages/EventDetailsPage.js
@@ -1,28 +1,35 @@
 import React from 'react';
-import { View, StyleSheet, Text, ScrollView, Share } from 'react-native';
-import { SafeAreaView } from 'react-navigation';
+import { View, StyleSheet, Text, ScrollView, Share, Button } from 'react-native';
 
-import { CallToAction, HeaderTemplate, PageTemplate } from 'masontoday/src/components';
-import { DataManipulation } from 'masontoday/src/utils';
+import { CallToAction, PageTemplate } from 'masontoday/src/components';
+import { DataManipulation, Colors } from 'masontoday/src/utils';
 
-import TopBar from './TopBar';
+function shareEvent(eventId) {
+    Share.share({
+        message: `Check out what I found on Masontoday!\nhttps://www2.gmu.edu/today-mason?trumbaEmbed=view%3Devent%26eventid%3D${eventId}`,
+    });
+}
 
 export default class EventDetailsPage extends React.Component {
-    shareEvent(eventId) {
-        Share.share({
-            message: `Check out what I found on Masontoday!\nhttps://www2.gmu.edu/today-mason?trumbaEmbed=view%3Devent%26eventid%3D${eventId}`,
-        });
-    }
+    static navigationOptions = ({ navigation }) => {
+        return {
+            title: 'Details',
+            headerRight: (
+                <Button
+                    onPress={() => shareEvent(navigation.getParam('event').id)}
+                    title="Share"
+                    color={Colors.green1}
+                />
+            ),
+        };
+    };
 
     render() {
         const { event } = this.props.navigation.state.params;
         const { formatTime } = DataManipulation;
 
         return (
-            <PageTemplate
-                header={
-                    <TopBar goBack={() => this.props.navigation.goBack()} onShare={() => this.shareEvent(event.id)} />
-                }>
+            <PageTemplate>
                 <View style={styles.container}>
                     <ScrollView bounces={false}>
                         <View style={styles.header}>

diff --git a/src/components/pages/EventDetailsPage/TopBar.js b/src/components/pages/EventDetailsPage/TopBar.js
diff --git a/src/components/pages/EventDetailsPage/index.js b/src/components/pages/EventDetailsPage/index.js
diff --git a/src/components/pages/EventListPage.js b/src/components/pages/EventListPage.js
@@ -6,6 +6,9 @@ import { DataManipulation } from 'masontoday/src/utils';
 import { EventCard, PageTemplate } from 'masontoday/src/components';
 
 export default class EventListPage extends React.Component {
+    static navigationOptions = {
+        title: 'Events',
+    };
     state = {
         events: null,
     };

diff --git a/src/components/templates/HeaderTemplate.js b/src/components/templates/HeaderTemplate.js