➕ Added react-native-share

URL share support for android, better share previews on iOS
better-rail · May 3, 2021 · d1345c5 · d1345c5
1 parent 1128ca5
commit d1345c5
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 18 deletions.
diff --git a/app/i18n/en.json b/app/i18n/en.json
@@ -36,7 +36,9 @@
     "title": "Settings",
     "language": "App Language",
     "share": "Share App",
-    "rate": "Rate Better Rail",
+    "shareMessage": "The Israel Railways alternative app",
+    "rateIOS": "Rate Better Rail",
+    "rateAndroid": "Rate Better Rail",
     "imageAttribution": "Image Attributions",
     "privacyPolicy": "Privacy Policy",
     "feedback": "Send Feedback",

diff --git a/app/i18n/he.json b/app/i18n/he.json
@@ -38,7 +38,9 @@
     "title": "הגדרות",
     "language": "שפה",
     "share": "שתפו את Better Rail",
-    "rate": "דרגו ב- App Store",
+    "shareMessage": "האלטרנטיבה לאפליקציית רכבת ישראל",
+    "rateIOS": "דרגו ב- App Store",
+    "rateAndroid": "דרגו ב- Play Store",
     "imageAttribution": "קרדיט תמונות",
     "privacyPolicy": "מדיניות פרטיות",
     "feedback": "שליחת פידבק",

diff --git a/app/screens/settings/settings-screen.tsx b/app/screens/settings/settings-screen.tsx
@@ -1,6 +1,7 @@
 import React from "react"
 import { observer } from "mobx-react-lite"
-import { Linking, Share, Platform, TextStyle, View, ViewStyle } from "react-native"
+import { Linking, Platform, TextStyle, View, ViewStyle } from "react-native"
+import Share from "react-native-share"
 import { Screen, Text } from "../../components"
 import { SettingBox } from "./components/settings-box"
 import { getVersion } from "react-native-device-info"
@@ -33,7 +34,40 @@ const VERSION_TEXT: TextStyle = {
   color: color.dim,
 }
 
-const storeLink = Platform.select({ ios: "https://apps.apple.com/app/better-rail/id1562982976?action=write-review" })
+function shareApp() {
+  const url = "https://better-rail.co.il/"
+  const title = "Better Rail"
+  const message = translate("settings.shareMessage")
+
+  const shareOptions = Platform.select({
+    ios: {
+      activityItemSources: [
+        {
+          placeholderItem: { type: "url", content: url },
+          item: {
+            default: { type: "text", content: `${message} ${url}` },
+          },
+          subject: {
+            default: title,
+          },
+          linkMetadata: { title: message },
+        },
+      ],
+    },
+    default: {
+      title,
+      subject: title,
+      message: `${message} ${url}`,
+    },
+  })
+
+  Share.open(shareOptions)
+}
+
+const storeLink = Platform.select({
+  ios: "https://apps.apple.com/app/better-rail/id1562982976?action=write-review",
+  android: "market://details?id=com.betterrail",
+})
 
 export const SettingsScreen = observer(function SettingsScreen({ navigation }: SettingsScreenProps) {
   return (
@@ -49,20 +83,15 @@ export const SettingsScreen = observer(function SettingsScreen({ navigation }: S
         />
       </View>
 
-      {Platform.OS === "ios" && (
-        <View style={SETTING_GROUP}>
-          <SettingBox
-            first
-            last={Platform.select({ ios: false, android: true })}
-            title={translate("settings.share")}
-            icon="🕺"
-            onPress={() =>
-              Share.share({ message: "Better Rail - האלטרנטיבה לאפליקציית רכבת ישראל", url: "https://better-rail.co.il" })
-            }
-          />
-          <SettingBox title={translate("settings.rate")} icon="⭐️" last onPress={() => Linking.openURL(storeLink)} />
-        </View>
-      )}
+      <View style={SETTING_GROUP}>
+        <SettingBox first title={translate("settings.share")} icon="🕺" onPress={shareApp} />
+        <SettingBox
+          last
+          title={Platform.select({ ios: translate("settings.rateIOS"), android: translate("settings.rateAndroid") })}
+          icon="⭐️"
+          onPress={() => Linking.openURL(storeLink)}
+        />
+      </View>
 
       <View style={SETTING_GROUP}>
         <SettingBox

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -342,6 +342,8 @@ PODS:
     - React-Core
   - RNScreens (2.13.0):
     - React-Core
+  - RNShare (6.0.1):
+    - React-Core
   - RNSharedElement (0.7.0):
     - React
   - RNSVG (12.1.0):
@@ -430,6 +432,7 @@ DEPENDENCIES:
   - RNInAppBrowser (from `../node_modules/react-native-inappbrowser-reborn`)
   - RNReactNativeHapticFeedback (from `../node_modules/react-native-haptic-feedback`)
   - RNScreens (from `../node_modules/react-native-screens`)
+  - RNShare (from `../node_modules/react-native-share`)
   - RNSharedElement (from `../node_modules/react-native-shared-element`)
   - RNSVG (from `../node_modules/react-native-svg`)
   - UMAppLoader (from `../node_modules/unimodules-app-loader/ios`)
@@ -545,6 +548,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-haptic-feedback"
   RNScreens:
     :path: "../node_modules/react-native-screens"
+  RNShare:
+    :path: "../node_modules/react-native-share"
   RNSharedElement:
     :path: "../node_modules/react-native-shared-element"
   RNSVG:
@@ -631,6 +636,7 @@ SPEC CHECKSUMS:
   RNInAppBrowser: 48b95ba7a4eaff5cc223bca338d3e319561dbd1b
   RNReactNativeHapticFeedback: 653a8c126a0f5e88ce15ffe280b3ff37e1fbb285
   RNScreens: 13f23e5498fb4aa749d19a5eda7f8792fbb9d01f
+  RNShare: 755de6bac084428f8fd8fb54c376f126f40e560c
   RNSharedElement: 00b1a1420d213a34459bb9a5aacabb38107d7948
   RNSVG: ce9d996113475209013317e48b05c21ee988d42e
   UMAppLoader: 5db5dc03176c6238da9c8b3657a370137882a4ad

diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
     "react-native-restart": "^0.0.22",
     "react-native-safe-area-context": "3.2.0",
     "react-native-screens": "2.13.0",
+    "react-native-share": "^6.0.1",
     "react-native-shared-element": "^0.7.0",
     "react-native-svg": "^12.1.0",
     "react-native-touchable-scale": "^2.1.2",

diff --git a/yarn.lock b/yarn.lock
@@ -12949,6 +12949,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.13.0.tgz#6360dfd65d51f73479bea14373a8e289cd58a327"
   integrity sha512-B0kPYq5ZK/2G7pPhcAFLflDfm+HXktdVEeLFHnP/+oPnao+b28hXsOBCi0IgK72gxbdPtnpZME8KONRIKOBDug==
 
+react-native-share@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/react-native-share/-/react-native-share-6.0.1.tgz#e982be50e33490dbd953ec26375230df1188770a"
+  integrity sha512-K7mw2ep4cg++K6GUab32Kic3DeDUveonsQhTElwb6pZyjp0R/TLGQ11+pxcZBVlTiZhdOttyrLdCA6TsMX1lzg==
+
 react-native-shared-element@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/react-native-shared-element/-/react-native-shared-element-0.7.0.tgz#c5e02eb372f6e38e48eb1030fd59be8f3d8c7a1f"