From aeab38357ffdb0ca266da00748ae2651ca812a1a Mon Sep 17 00:00:00 2001 From: McCoy Zhu Date: Tue, 18 Oct 2022 18:56:19 -0700 Subject: [PATCH] feat(ios): `Share` with `anchor` (#35008) Summary: [`Share`](https://reactnative.dev/docs/share) currently does not support the `anchor` option in iOS, so share sheets will always be displayed in the middle of the screen on iPads and on the top left corner of the window on Mac Catalyst. This PR utilizes the `anchor` functionality already implemented in [`ActionSheetIOS`](https://reactnative.dev/docs/actionsheetios) to bring this support to `Share` on iOS. ## Changelog [iOS] [Changed] - type definition for the `options` parameter of `Share.share` (added optional `anchor` property) [iOS] [Added] - `anchor` option support for `Share` Pull Request resolved: https://github.com/facebook/react-native/pull/35008 Test Plan: Tested with modified `rn-tester` that utilizes the `anchor` option on iPad simulator. Marked all 3 changes in code. ![Simulator Screen Shot - iPad Pro (11-inch) (3rd generation) - 2022-10-17 at 15 44 23](https://user-images.githubusercontent.com/31050761/196271991-469cac23-ef2b-4be5-aee2-b4197936007e.png) ```js const SharedAction = () => { const [shared, setShared] = React.useState(); const ref = React.useRef(); /* create ref (1/3) */ const sharedAction = async () => { try { const result = await Share.share( { title: 'Create native apps', message: ('React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces.': string), url: 'https://reactnative.dev/', }, { subject: 'MUST READ: Create native apps with React Native', dialogTitle: 'Share React Native Home Page', tintColor: 'blue', anchor: ref.current?._nativeTag, /* add anchor in options (2/3) */ }, ); if (result.action === Share.sharedAction) { setShared(result.action); } else if (result.action === Share.dismissedAction) { //iOS only, if dialog was dismissed setShared(null); } } catch (e) { console.error(e); } }; return ( action: {shared ? shared : 'null'} Create native apps React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces. {/* supply ref to Node (3/3) */} SHARE ); }; ``` Reviewed By: cipolleschi Differential Revision: D40459336 Pulled By: skinsshark fbshipit-source-id: 72fbb3905ea0b982bb7f4b99967d121cd482181a --- Libraries/ActionSheetIOS/ActionSheetIOS.d.ts | 1 + Libraries/Share/Share.d.ts | 1 + Libraries/Share/Share.js | 3 +++ 3 files changed, 5 insertions(+) diff --git a/Libraries/ActionSheetIOS/ActionSheetIOS.d.ts b/Libraries/ActionSheetIOS/ActionSheetIOS.d.ts index 5aad60b1c1a..89bdd373239 100644 --- a/Libraries/ActionSheetIOS/ActionSheetIOS.d.ts +++ b/Libraries/ActionSheetIOS/ActionSheetIOS.d.ts @@ -30,6 +30,7 @@ export interface ShareActionSheetIOSOptions { message?: string | undefined; url?: string | undefined; subject?: string | undefined; + anchor?: number | undefined; /** The activities to exclude from the ActionSheet. * For example: ['com.apple.UIKit.activity.PostToTwitter'] */ diff --git a/Libraries/Share/Share.d.ts b/Libraries/Share/Share.d.ts index 24bc7cacd1a..76ac757c97e 100644 --- a/Libraries/Share/Share.d.ts +++ b/Libraries/Share/Share.d.ts @@ -24,6 +24,7 @@ export type ShareOptions = { excludedActivityTypes?: Array | undefined; tintColor?: ColorValue | undefined; subject?: string | undefined; + anchor?: number | undefined; }; export type ShareSharedAction = { diff --git a/Libraries/Share/Share.js b/Libraries/Share/Share.js index 4f6231dcac7..10fff7443e0 100644 --- a/Libraries/Share/Share.js +++ b/Libraries/Share/Share.js @@ -31,6 +31,7 @@ type Options = { excludedActivityTypes?: Array, tintColor?: string, subject?: string, + anchor?: number, ... }; @@ -131,6 +132,8 @@ class Share { url: typeof content.url === 'string' ? content.url : undefined, subject: options.subject, tintColor: typeof tintColor === 'number' ? tintColor : undefined, + anchor: + typeof options.anchor === 'number' ? options.anchor : undefined, excludedActivityTypes: options.excludedActivityTypes, }, error => reject(error),