Merge branch 'feature/share-button' into 'master'

Add share button to events

Closes #65

See merge request !194

__tests__/setup.js

@@ -3,3 +3,7 @@ import { NativeModules } from 'react-native';
 NativeModules.RNFirebase = {
   apps: [],
 };
+
+NativeModules.RNShare = {
+
+};

__tests__/ui/components/standardHeader/__snapshots__/StandardHeader.spec.js.snap

@@ -79,7 +79,6 @@ exports[`StandardHeader component renders correctly 1`] = `
     <View
       style={
         Object {
-          "height": 0,
           "width": 50,
         }
       }

android/app/build.gradle

@@ -153,6 +153,7 @@ dependencies {
     implementation project(':react-native-snackbar')
     implementation project(':react-native-linear-gradient')
     implementation project(':react-native-firebase')
+    implementation project(':react-native-share')
     implementation fileTree(dir: "libs", include: ["*.jar"])
     implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
     implementation "com.android.support:design:${rootProject.ext.supportLibVersion}"

android/app/src/main/AndroidManifest.xml

@@ -58,6 +58,16 @@
         <meta-data
                 android:name="android.max_aspect"
                 android:value="2.1" />
+
+        <provider
+                android:name="android.support.v4.content.FileProvider"
+                android:authorities="${applicationId}.provider"
+                android:grantUriPermissions="true"
+                android:exported="false">
+            <meta-data
+                    android:name="android.support.FILE_PROVIDER_PATHS"
+                    android:resource="@xml/filepaths" />
+        </provider>
     </application>
 
 </manifest>

android/app/src/main/java/com/thaliapp/MainApplication.java

@@ -3,6 +3,8 @@ package com.thaliapp;
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import cl.json.ShareApplication;
+import cl.json.RNSharePackage;
 
 import io.invertase.firebase.RNFirebasePackage;
 import io.invertase.firebase.messaging.RNFirebaseMessagingPackage;
@@ -21,7 +23,7 @@ import com.facebook.soloader.SoLoader;
 import java.util.Arrays;
 import java.util.List;
 
-public class MainApplication extends Application implements ReactApplication {
+public class MainApplication extends Application implements ShareApplication, ReactApplication {
 
   private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
     @Override
@@ -33,6 +35,7 @@ public class MainApplication extends Application implements ReactApplication {
     protected List<ReactPackage> getPackages() {
       return Arrays.asList(
             new MainReactPackage(),
+            new RNSharePackage(),
             new RNSentryPackage(),
             new SnackbarPackage(),
             new ReactNativeI18n(),
@@ -56,6 +59,11 @@ public class MainApplication extends Application implements ReactApplication {
     return mReactNativeHost;
   }
 
+  @Override
+  public String getFileProviderAuthority() {
+    return "com.thaliapp.provider";
+  }
+
   @Override
   public void onCreate() {
     super.onCreate();

android/app/src/main/res/xml/filepaths.xml

+<?xml version="1.0" encoding="utf-8"?>
+<paths xmlns:android="http://schemas.android.com/apk/res/android">
+</paths>
\ No newline at end of file

android/settings.gradle

 rootProject.name = 'ThaliApp'
+include ':react-native-share'
+project(':react-native-share').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-share/android')
 include ':react-native-sentry'
 project(':react-native-sentry').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sentry/android')
 include ':react-native-snackbar'

app/ui/components/standardHeader/StandardHeader.js

@@ -54,18 +54,22 @@ const StandardHeader = props => (
       <Text style={styles.title}>
         {sceneToTitle(props.navigation.state.routeName, props.t)}
       </Text>
-      <View style={styles.rightView} />
+      <View style={styles.rightView}>
+        {props.rightView}
+      </View>
     </View>
   </View>
 );
 
 StandardHeader.propTypes = {
   menu: PropTypes.bool,
+  rightView: PropTypes.element,
   t: PropTypes.func.isRequired,
   navigation: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
 };
 
 StandardHeader.defaultProps = {
+  rightView: null,
   menu: false,
 };
 

app/ui/components/standardHeader/style/StandardHeader.js

@@ -65,7 +65,10 @@ const styles = StyleSheet.create({
   rightView: {
     ios: {
       width: 24 + 16 + 10,
-      height: 0,
+    },
+    android: {
+      position: 'absolute',
+      right: 0,
     },
   },
 });

app/ui/screens/events/EventScreen.js

@@ -9,21 +9,24 @@ import {
   ScrollView,
   Text,
   TouchableHighlight,
+  TouchableOpacity,
   View,
 } from 'react-native';
 import { translate } from 'react-i18next';
 import Moment from 'moment';
 import HTML from 'react-native-render-html';
+import Share from 'react-native-share';
 
+import Icon from 'react-native-vector-icons/MaterialIcons';
 import styles, { memberSize } from './style/EventScreen';
 import MemberView from '../../components/memberView/MemberViewContainer';
 import LoadingScreen from '../../components/loadingScreen/LoadingScreen';
 import ErrorScreen from '../../components/errorScreen/ErrorScreen';
 import Colors from '../../style/Colors';
 
-import { termsAndConditionsUrl } from '../../../utils/url';
+import { termsAndConditionsUrl, url as serverUrl } from '../../../utils/url';
 import Button from '../../components/button/Button';
-import { withStandardHeader } from '../../components/standardHeader/StandardHeader';
+import StandardHeader from '../../components/standardHeader/StandardHeader';
 
 class EventScreen extends Component {
   cancelPrompt = (pk) => {
@@ -352,8 +355,29 @@ Pizza:
     const {
       status, loading, openMaps, data, t,
     } = this.props;
+
+    const shareButton = (
+      <TouchableOpacity
+        onPress={() => Share.open({
+          message: this.props.data.title,
+          url: `${serverUrl}/events/${this.props.data.pk}/`,
+        })}
+      >
+        <Icon
+          name="share"
+          style={styles.shareIcon}
+          size={24}
+        />
+      </TouchableOpacity>
+    );
+
     if (status === 'initial') {
-      return <LoadingScreen />;
+      return (
+        <View style={styles.rootWrapper}>
+          <StandardHeader />
+          <LoadingScreen />
+        </View>
+      );
     }
 
     const fontStyles = {
@@ -368,9 +392,53 @@ Pizza:
 
     if (status === 'success') {
       return (
+        <View style={styles.rootWrapper}>
+          <StandardHeader rightView={shareButton} />
+          <ScrollView
+            backgroundColor={Colors.background}
+            contentContainerStyle={styles.eventView}
+            refreshControl={(
+              <RefreshControl
+                refreshing={loading}
+                onRefresh={this.handleRefresh}
+              />
+            )}
+          >
+            <TouchableHighlight
+              onPress={() => openMaps(data.map_location)}
+              style={styles.locationImageWrapper}
+            >
+              <Image
+                style={styles.locationImage}
+                source={{ uri: `https://maps.googleapis.com/maps/api/staticmap?center=${data.map_location}&zoom=13&size=450x250&markers=${data.map_location}` }}
+              />
+            </TouchableHighlight>
+            <Text style={styles.titleText}>
+              {data.title}
+            </Text>
+            {this.eventDesc()}
+            {this.eventActions()}
+            {this.eventInfo()}
+            <View style={styles.divider} />
+            <HTML
+              html={data.description}
+              onLinkPress={(event, href) => Linking.openURL(href)}
+              baseFontStyle={fontStyles}
+              tagsStyles={{
+                a: linkStyles,
+              }}
+            />
+            {this.registrationsGrid()}
+          </ScrollView>
+        </View>
+      );
+    }
+    return (
+      <View style={styles.rootWrapper}>
+        <StandardHeader />
         <ScrollView
           backgroundColor={Colors.background}
-          contentContainerStyle={styles.eventView}
+          contentContainerStyle={styles.flex}
           refreshControl={(
             <RefreshControl
               refreshing={loading}
@@ -378,47 +446,9 @@ Pizza:
             />
           )}
         >
-          <TouchableHighlight
-            onPress={() => openMaps(data.map_location)}
-            style={styles.locationImageWrapper}
-          >
-            <Image
-              style={styles.locationImage}
-              source={{ uri: `https://maps.googleapis.com/maps/api/staticmap?center=${data.map_location}&zoom=13&size=450x250&markers=${data.map_location}` }}
-            />
-          </TouchableHighlight>
-          <Text style={styles.titleText}>
-            {data.title}
-          </Text>
-          {this.eventDesc()}
-          {this.eventActions()}
-          {this.eventInfo()}
-          <View style={styles.divider} />
-          <HTML
-            html={data.description}
-            onLinkPress={(event, href) => Linking.openURL(href)}
-            baseFontStyle={fontStyles}
-            tagsStyles={{
-              a: linkStyles,
-            }}
-          />
-          {this.registrationsGrid()}
+          <ErrorScreen message={t('Could not load the event...')} />
         </ScrollView>
-      );
-    }
-    return (
-      <ScrollView
-        backgroundColor={Colors.background}
-        contentContainerStyle={styles.flex}
-        refreshControl={(
-          <RefreshControl
-            refreshing={loading}
-            onRefresh={this.handleRefresh}
-          />
-        )}
-      >
-        <ErrorScreen message={t('Could not load the event...')} />
-      </ScrollView>
+      </View>
     );
   }
 }
@@ -474,4 +504,4 @@ EventScreen.propTypes = {
   t: PropTypes.func.isRequired,
 };
 
-export default translate('screens/events/Event')(withStandardHeader(EventScreen));
+export default translate('screens/events/Event')(EventScreen);

app/ui/screens/events/style/EventScreen.js

@@ -6,6 +6,9 @@ const windowWidth = Dimensions.get('window').width;
 export const memberSize = (windowWidth - 64) / 3;
 
 const styles = StyleSheet.create({
+  rootWrapper: {
+    flex: 1,
+  },
   eventView: {
     padding: 16,
     backgroundColor: Colors.background,
@@ -104,6 +107,17 @@ const styles = StyleSheet.create({
     lineHeight: 24.0,
     color: Colors.black,
   },
+  shareIcon: {
+    android: {
+      paddingLeft: 32,
+      paddingRight: 20,
+    },
+    ios: {
+      paddingLeft: 16,
+      paddingRight: 10,
+    },
+    color: Colors.white,
+  },
   registrationsTitle: {
     android: {
       fontFamily: 'sans-serif-medium',

ios/ThaliApp.xcodeproj/project.pbxproj

@@ -44,6 +44,9 @@
 		325E07382108B21800195242 /* libRNSentry.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 321550702108B1DC005FCAF5 /* libRNSentry.a */; };
 		32D3E4CE1ED98F33004F54F8 /* libBVLinearGradient.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 32D3E4871ED98796004F54F8 /* libBVLinearGradient.a */; };
 		32D3E4CF1ED98F37004F54F8 /* libRNVectorIcons.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 32D3E4A51ED98796004F54F8 /* libRNVectorIcons.a */; };
+		32F45AC8213C035200AC3D66 /* libRNShare.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 32F45AC7213C034000AC3D66 /* libRNShare.a */; };
+		32F45ACA213C037200AC3D66 /* Social.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 32F45AC9213C037200AC3D66 /* Social.framework */; };
+		32F45ACC213C037900AC3D66 /* MessageUI.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 32F45ACB213C037800AC3D66 /* MessageUI.framework */; };
 		32F7BA8C1FEADDF60071BF57 /* GoogleService-Info.plist in Resources */ = {isa = PBXBuildFile; fileRef = 32F7BA8B1FEADDF60071BF57 /* GoogleService-Info.plist */; };
 		3A593770638B4F798E132119 /* CoreText.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 947AD2AB7080D11A21D8B9ED /* CoreText.framework */; };
 		4A52BF512BF84192BF5EE374 /* MaterialIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = C18BC9778EF94FC69E1C628D /* MaterialIcons.ttf */; };
@@ -279,6 +282,13 @@
 			remoteGlobalIDString = ADD01A681E09402E00F6D226;
 			remoteInfo = "RCTBlob-tvOS";
 		};
+		32F45AC6213C034000AC3D66 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 32F45AC2213C034000AC3D66 /* RNShare.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 134814201AA4EA6300B7C361;
+			remoteInfo = RNShare;
+		};
 		3DAD3E831DF850E9000B6D8A /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */;
@@ -440,6 +450,9 @@
 		32154FFE2108B164005FCAF5 /* libSentry.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; path = libSentry.a; sourceTree = BUILT_PRODUCTS_DIR; };
 		321550002108B164005FCAF5 /* libSentryReactNative.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; path = libSentryReactNative.a; sourceTree = BUILT_PRODUCTS_DIR; };
 		3215503F2108B1DB005FCAF5 /* RNSentry.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RNSentry.xcodeproj; path = "../node_modules/react-native-sentry/ios/RNSentry.xcodeproj"; sourceTree = "<group>"; };
+		32F45AC2213C034000AC3D66 /* RNShare.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RNShare.xcodeproj; path = "../node_modules/react-native-share/ios/RNShare.xcodeproj"; sourceTree = "<group>"; };
+		32F45AC9213C037200AC3D66 /* Social.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = Social.framework; path = System/Library/Frameworks/Social.framework; sourceTree = SDKROOT; };
+		32F45ACB213C037800AC3D66 /* MessageUI.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = MessageUI.framework; path = System/Library/Frameworks/MessageUI.framework; sourceTree = SDKROOT; };
 		32F7BA8A1FEADB6E0071BF57 /* ThaliApp.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; name = ThaliApp.entitlements; path = ThaliApp/ThaliApp.entitlements; sourceTree = "<group>"; };
 		32F7BA8B1FEADDF60071BF57 /* GoogleService-Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = "GoogleService-Info.plist"; sourceTree = "<group>"; };
 		3AF00CDF61D94356B607ED10 /* EvilIcons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = EvilIcons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf"; sourceTree = "<group>"; };
@@ -489,6 +502,9 @@
 			buildActionMask = 2147483647;
 			files = (
 				3231E953213C0CDE004AADDF /* libRNI18n.a in Frameworks */,
+				32F45ACC213C037900AC3D66 /* MessageUI.framework in Frameworks */,
+				32F45ACA213C037200AC3D66 /* Social.framework in Frameworks */,
+				32F45AC8213C035200AC3D66 /* libRNShare.a in Frameworks */,
 				325E07382108B21800195242 /* libRNSentry.a in Frameworks */,
 				ADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */,
 				5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */,
@@ -734,6 +750,14 @@
 			name = Pods;
 			sourceTree = "<group>";
 		};
+		32F45AC3213C034000AC3D66 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				32F45AC7213C034000AC3D66 /* libRNShare.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
 		5E91572E1DD0AC6500FF2AA8 /* Products */ = {
 			isa = PBXGroup;
 			children = (
@@ -755,6 +779,7 @@
 		832341AE1AAA6A7D00B99B32 /* Libraries */ = {
 			isa = PBXGroup;
 			children = (
+				32F45AC2213C034000AC3D66 /* RNShare.xcodeproj */,
 				3215503F2108B1DB005FCAF5 /* RNSentry.xcodeproj */,
 				5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */,
 				146833FF1AC3E56700842450 /* React.xcodeproj */,
@@ -817,6 +842,8 @@
 		98173993876B9C90C5E6E4F5 /* Frameworks */ = {
 			isa = PBXGroup;
 			children = (
+				32F45ACB213C037800AC3D66 /* MessageUI.framework */,
+				32F45AC9213C037200AC3D66 /* Social.framework */,
 				32154FFE2108B164005FCAF5 /* libSentry.a */,
 				321550002108B164005FCAF5 /* libSentryReactNative.a */,
 				419A54DF78ED5BAF6B5C40B7 /* libPods-ThaliApp.a */,
@@ -1056,6 +1083,10 @@
 					ProductGroup = 321550402108B1DB005FCAF5 /* Products */;
 					ProjectRef = 3215503F2108B1DB005FCAF5 /* RNSentry.xcodeproj */;
 				},
+				{
+					ProductGroup = 32F45AC3213C034000AC3D66 /* Products */;
+					ProjectRef = 32F45AC2213C034000AC3D66 /* RNShare.xcodeproj */;
+				},
 				{
 					ProductGroup = 328DFE731FEAAF8100807230 /* Products */;
 					ProjectRef = 8AB867AF03AC45AEB3C80BFA /* RNSnackbar.xcodeproj */;
@@ -1272,6 +1303,13 @@
 			remoteRef = 32D561131F7592880012EC89 /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
+		32F45AC7213C034000AC3D66 /* libRNShare.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRNShare.a;
+			remoteRef = 32F45AC6213C034000AC3D66 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
 		3DAD3E841DF850E9000B6D8A /* libRCTImage-tvOS.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;

ios/ThaliApp/Info.plist

@@ -71,5 +71,10 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
+  <key>LSApplicationQueriesSchemes</key>
+  <array>
+    <string>whatsapp</string>
+    <string>mailto</string>
+  </array>
 </dict>
 </plist>

package.json

@@ -61,6 +61,7 @@
     "react-native-locale-detector": "^1.0.1",
     "react-native-render-html": "^3.10.0",
     "react-native-sentry": "^0.39.0",
+    "react-native-share": "^1.1.1",
     "react-native-snackbar": "^0.4.7",
     "react-native-vector-icons": "^4.6.0",
     "react-navigation": "^2.9.3",

yarn.lock

@@ -5555,6 +5555,10 @@ react-native-sentry@^0.39.0:
     "@sentry/wizard" "^0.11.0"
     raven-js "^3.24.2"
 
+react-native-share@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/react-native-share/-/react-native-share-1.1.1.tgz#8c50c67c3fa519607f3352c03f56076c0481edeb"
+
 react-native-snackbar@^0.4.7:
   version "0.4.7"
   resolved "https://registry.yarnpkg.com/react-native-snackbar/-/react-native-snackbar-0.4.7.tgz#051a63da5a6dfcf9bbe3852f2165d366a42c6fb4"