React native share "tintColor" property not working on iOS per docs

[ChristopherGabba]

Description

Trying to change the color of the share menu on iOS per the docs https://reactnative.dev/docs/share and the color never changes. I've tried expo snack, in my own app, etc.

React Native Version

0.72.5

Output of npx react-native info

System: OS: macOS 14.0 CPU: (10) arm64 Apple M2 Pro Memory: 718.67 MB / 16.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 20.7.0 path: /opt/homebrew/bin/node Yarn: Not Found npm: version: 10.1.0 path: /opt/homebrew/bin/npm Watchman: version: 2023.09.04.00 path: /opt/homebrew/bin/watchman Managers: CocoaPods: version: 1.12.1 path: /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms:

• DriverKit 23.0
• iOS 17.0
• macOS 14.0
• tvOS 17.0
• watchOS 10.0 Android SDK: Not Found IDEs: Android Studio: 2022.2 AI-222.4459.24.2221.9862592 Xcode: version: 15.0.1/15A507 path: /usr/bin/xcodebuild Languages: Java: Not Found Ruby: version: 2.6.10 path: /usr/bin/ruby npmPackages: "@react-native-community/cli": Not Found react: installed: 18.2.0 wanted: 18.2.0 react-native: installed: 0.72.5 wanted: 0.72.5 react-native-macos: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: Not found newArchEnabled: Not found iOS: hermesEnabled: Not found newArchEnabled: Not found

Steps to reproduce

Using exact same code in the react native share docs webpage with exception of adding tintColor:

Using iPhone 12 on iOS 16.6.1

import React from 'react';
import {Alert, Share, View, Button} from 'react-native';

const ShareExample = () => {
  const onShare = async () => {
    try {
      const result = await Share.share({
        message:
          'React Native | A framework for building native apps using React',
      }, { tintColor: "#000000" }
      );
      if (result.action === Share.sharedAction) {
        if (result.activityType) {
          // shared with activity type of result.activityType
        } else {
          // shared
        }
      } else if (result.action === Share.dismissedAction) {
        // dismissed
      }
    } catch (error: any) {
      Alert.alert(error.message);
    }
  };
  return (
    <View style={{marginTop: 50}}>
      <Button onPress={onShare} title="Share" />
    </View>
  );
};

export default ShareExample;

Snack, screenshot, or link to a repository

https://snack.expo.dev/@christophergabba/example

[github-actions[bot]]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - 0.72.7. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[ChristopherGabba]

I can confirm after updating to 0.72.7 that the tintColor prop is still not functioning.. Thanks, Chris

[jakex7]

After (too long) research, I found that tintColor was introduced a long time ago, before Apple's redesign introduced in iOS 13. It used to change the color of the Cancel button, but after Apple's redesign, it is no longer possible to change the colors there.

Image source: iOS and iPadOS 13: The MacStories Review

[ChristopherGabba]

@jakex7 Ah I see. I appreciate you digging and doing the research. It would appear that this property needs to be removed from docs. I noticed that Be.Real had a dark version of the share menu:

I was trying to replicate that in React Native... I wonder how they did it...

[jakex7]

@ChristopherGabba On the native side, it is possible to force a dark theme of Share Sheet. In fact, I believe this should be introduced in react-native, just like userInterfaceStyle is in ActionSheetIOS and I'll try to make a pull request with that

[ChristopherGabba]

@jakex7 That would be awesome! Thanks a bunch for looking into this @jakex7!

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[ChristopherGabba]

@jakex7 Did this ever get fixed?