Merge pull request #4027 from StoDevX/fix-4026-link-highlight

Replace ActionSheetIOS usage with cross-platform library

Author: rye

modules/markdown/link.js

@@ -1,9 +1,10 @@
 // @flow
 
 import * as React from 'react'
-import {ActionSheetIOS, Clipboard} from 'react-native'
+import {Clipboard} from 'react-native'
 import glamorous from 'glamorous-native'
 import {openUrl} from '@frogpond/open-url'
+import {connectActionSheet} from '@expo/react-native-action-sheet'
 
 import * as c from '@frogpond/colors'
 
@@ -17,27 +18,20 @@ type Props = {
 	href: string,
 	title?: string,
 	children: React.ChildrenArray<string>,
+	showShareActionSheetWithOptions: any,
+	showActionSheetWithOptions: any,
 }
 
 type Callback = ({title?: string, href: string}) => any
 
-export class Link extends React.PureComponent<Props> {
+class Link extends React.PureComponent<Props> {
 	options: Array<[string, Callback]> = [
 		['Open', ({href}: {href: string}) => openUrl(href)],
 		[
 			'Copy',
 			({title, href}: {href: string, title?: string}) =>
 				Clipboard.setString(`${href}${title ? ' ' + title : ''}`),
 		],
-		[
-			'Share…',
-			({href}: {href: string}) =>
-				ActionSheetIOS.showShareActionSheetWithOptions(
-					{url: href},
-					this.onShareFailure,
-					this.onShareSuccess,
-				),
-		],
 		['Cancel', () => {}],
 	]
 
@@ -46,7 +40,7 @@ export class Link extends React.PureComponent<Props> {
 	}
 
 	onLongPress = () => {
-		return ActionSheetIOS.showActionSheetWithOptions(
+		return this.props.showActionSheetWithOptions(
 			{
 				options: this.options.map(([name]) => name),
 				title: this.props.title,
@@ -74,3 +68,7 @@ export class Link extends React.PureComponent<Props> {
 		)
 	}
 }
+
+const ConnectedLink = connectActionSheet(Link)
+
+export {ConnectedLink as Link}

modules/markdown/package.json

@@ -9,6 +9,7 @@
     "test": "jest"
   },
   "peerDependencies": {
+    "@expo/react-native-action-sheet": "3.0.3",
     "glamorous-native": "^2.0.0",
     "react": "^16.0.0",
     "react-native": "^0.60.0"

package.json

@@ -92,6 +92,7 @@
   },
   "dependencies": {
     "@callstack/react-theme-provider": "3.0.3",
+    "@expo/react-native-action-sheet": "3.0.3",
     "@frogpond/titlecase": "1.0.0",
     "@hawkrives/react-native-alternate-icons": "0.4.7",
     "@mapbox/react-native-mapbox-gl": "6.1.3",

source/app.js

@@ -15,6 +15,7 @@ import {Provider as PaperProvider} from 'react-native-paper'
 import {makeStore, initRedux} from './redux'
 import * as navigation from './navigation'
 import {ThemeProvider} from '@frogpond/app-theme'
+import {ActionSheetProvider} from '@expo/react-native-action-sheet'
 
 const store = makeStore()
 initRedux(store)
@@ -27,10 +28,12 @@ export default class App extends React.Component<Props> {
 			<ReduxProvider store={store}>
 				<PaperProvider>
 					<ThemeProvider>
-						<navigation.AppNavigator
-							onNavigationStateChange={navigation.trackScreenChanges}
-							persistenceKey={navigation.persistenceKey}
-						/>
+						<ActionSheetProvider>
+							<navigation.AppNavigator
+								onNavigationStateChange={navigation.trackScreenChanges}
+								persistenceKey={navigation.persistenceKey}
+							/>
+						</ActionSheetProvider>
 					</ThemeProvider>
 				</PaperProvider>
 			</ReduxProvider>

yarn.lock

@@ -685,6 +685,11 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
+"@expo/[email protected]":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@expo/react-native-action-sheet/-/react-native-action-sheet-3.0.3.tgz#1d69a2668784961c6d458babe52e9a02893936a2"
+  integrity sha512-MsVDCDQwJthoolqUqbg1nF8hmzA2gYfvnUV6j/h4gXPSKsrLqdaQz+Vi5onCB18oxmUZbYQ1+QNU+n1PwTp0Zw==
+
 "@frogpond/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@frogpond/titlecase/-/titlecase-1.0.0.tgz#993e5371c31b58a839e76fdc531053c55b1a2736"