feat(ios): Share with anchor

[zhumingcheng697]

Summary

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 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

Test Plan

Tested with modified rn-tester that utilizes the anchor option on iPad simulator. Marked all 3 changes in code.

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>
  );
};

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	7,777,149	+0
android	hermes	armeabi-v7a	7,180,434	+0
android	hermes	x86	8,091,801	+0
android	hermes	x86_64	8,062,979	+0
android	jsc	arm64-v8a	9,635,938	+0
android	jsc	armeabi-v7a	8,401,130	+0
android	jsc	x86	9,585,857	+0
android	jsc	x86_64	10,179,063	+0

Base commit: a0ee6fa
Branch: main

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: 0481948
Branch: main

[skinsshark]

hey @zhumingcheng697 thank you for your PR! there are a couple CI tests failing, could you please take a look?

[zhumingcheng697]

Hi @skinsshark, the analyze_code test seems to be a dependency issue where TypeScript complains that some internal modules and/or type declarations cannot be found. The other test_windows one failed rather curiously in a test case for Interaction/InteractionManager.

I can’t figure out how my changes could have led to the failing tests. Besides, these two tests also seem to be affecting other PRs like #35000 or even latest pushes on the main branch like 0481948.

[facebook-github-bot]

@skinsshark has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[skinsshark]

i fixed the errors called out from the analyze_code test and will rebase your PR on top and land both- thanks!

[react-native-bot]

This pull request was successfully merged by @zhumingcheng697 in aeab383.

^{When will my fix make it into a release? | Upcoming Releases}