Skip to content

Commit

Permalink
feat(ios): Share with anchor (#35008)
Browse files Browse the repository at this point in the history
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: #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 (
    <View style={styles.container}>
      <Text>action: {shared ? shared : 'null'}</Text>
      <Text style={styles.title}>Create native apps</Text>
      <Text>
        React Native combines the best parts of native development with React, a
        best-in-class JavaScript library for building user interfaces.
      </Text>
      {/* supply ref to Node (3/3) */}
      <Text ref={ref} style={styles.button} onPress={sharedAction}>
        SHARE
      </Text>
    </View>
  );
};
```

Reviewed By: cipolleschi

Differential Revision: D40459336

Pulled By: skinsshark

fbshipit-source-id: 72fbb3905ea0b982bb7f4b99967d121cd482181a
  • Loading branch information
zhumingcheng697 authored and facebook-github-bot committed Oct 19, 2022
1 parent 42b3ab3 commit aeab383
Show file tree
Hide file tree
Showing 3 changed files with 5 additions and 0 deletions.
1 change: 1 addition & 0 deletions Libraries/ActionSheetIOS/ActionSheetIOS.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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']
*/
Expand Down
1 change: 1 addition & 0 deletions Libraries/Share/Share.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export type ShareOptions = {
excludedActivityTypes?: Array<string> | undefined;
tintColor?: ColorValue | undefined;
subject?: string | undefined;
anchor?: number | undefined;
};

export type ShareSharedAction = {
Expand Down
3 changes: 3 additions & 0 deletions Libraries/Share/Share.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ type Options = {
excludedActivityTypes?: Array<string>,
tintColor?: string,
subject?: string,
anchor?: number,
...
};

Expand Down Expand Up @@ -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),
Expand Down

0 comments on commit aeab383

Please sign in to comment.