DOCSEARCHbyAlgolia
Submit Docs

react-native-share-menu

repository·master·Indexed 20 days ago

https://github.com/expensify/react-native-share-menu

A React Native library that allows applications to act as targets for sharing content from other apps. It supports receiving shared text, images, and files on Android and iOS, and provides the ShareMenuReactView component to build custom iOS Share Extensions.

Tokens
6.1K
Snippets
21
Records
25
Agent score
72%

What's inside react-native-share-menu

  1. Create a Bridging Header for the iOS Share Extension

    master

    To allow the Share Extension to interact with React Native, you must create an Objective-C bridging header.

    1. Right-click your Share Extension folder in Xcode and select New File....
    2. Select Objective-C and ensure the target is set to your Share Extension.
    3. When prompted, allow Xcode to create a Bridging Header.
    4. Delete the automatically created .m file.
    5. Add the following imports to your new Bridging-Header.h file:
    #import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTBridgeDelegate.h>
#import <React/RCTRootView.h>

  2. Add Intent Filter to AndroidManifest.xml

    master

    To allow your application to receive shared content (like text or images) from other apps, you must add an <intent-filter> to the main <activity> tag in your android/app/src/main/AndroidManifest.xml.

    Ensure android:documentLaunchMode="never" is set on the activity to prevent multiple instances of the app from being created when receiving shares.

    <activity
  ...
  android:documentLaunchMode="never">
  ...
  <intent-filter>
    <action android:name="android.intent.action.SEND" />
    <category android:name="android.intent.category.DEFAULT" />
    <data android:mimeType="text/plain" />
    <data android:mimeType="image/*" />
    <!-- Add any other mime types you want to support here -->
  </intent-filter>
</activity>

  3. Create a Bridging Header (React Native < 0.62 only)

    master

    If you are using a version of React Native older than 0.62, you must manually create a Swift bridging header:

    1. Right-click your project folder in Xcode and select New File....
    2. Choose Swift.
    3. Ensure the main app target is selected.
    4. When prompted, select Yes to create a Bridging Header file.
    5. Delete the contents of the generated Swift file, but keep the file in your project.

  5. Bundle JS code and assets in the iOS Share Extension

    master

    To ensure your Share Extension works in Release builds or on physical devices, you must add a build script phase to bundle the React Native code.

    1. In your Share Extension target, go to Build Phases.
    2. Click the + icon and select New Run Script Phase.
    3. Rename the phase to Bundle React Native code and images.
    4. Set the shell to /bin/sh.
    5. Paste the script below into the script area.
    6. Drag this new phase so it sits behind [CP] Copy Pods Resources.
    export NODE_BINARY=node
export ENTRY_FILE=index.share.js
../node_modules/react-native/scripts/react-native-xcode.sh

  6. Create a Share Extension for iOS

    master

    To use react-native-share-menu on iOS, you must create a new Share Extension target in Xcode:

    1. In Xcode project settings, create a new target and select Share Extension.
    2. Name the extension and select Swift as the language.
    3. In the extension's Build Settings, ensure the iOS Deployment Target matches your main app's target (e.g., iOS 10.0 for RN 0.63).
    4. Delete the default ShareViewController.swift file generated by Xcode in the extension folder.
    5. Right-click your project folder and select Add Files to "ProjectName".
    6. Select node_modules/react-native-share-menu/ios/ShareViewController.swift.
    7. Crucial: Ensure Copy items if needed is NOT selected and that the target for this file is your newly created Share Extension.

  7. Run the example project on Android

    master

    To run the example application on Android, ensure you have an Android emulator running or a physical device connected, then execute:

    yarn react-native run-android

    If the application fails to connect to the development server, you may need to run yarn start in a separate terminal.

    yarn react-native run-android

  8. Handle URL opening in AppDelegate.m

    master

    To allow your app to receive data from the Share Extension, you must implement the openURL method in your AppDelegate.m using ShareMenuManager.

    #import <RNShareMenu/ShareMenuManager.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)app
        openURL:(NSURL *)url
        options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [ShareMenuManager application:app openURL:url options:options];
}

@end

  9. Manually install react-native-share-menu on Android

    master

    If automatic linking is not working, follow these steps to manually link the module in your Android project:

    1. Update android/settings.gradle: Include the project and set its directory to the node_modules path.
    2. Update android/app/build.gradle: Add the project to your dependencies.
    3. Register the module in MainApplication.java: Import com.meedan.ShareMenuPackage and add new ShareMenuPackage() to the list returned by getPackages().
    // android/settings.gradle
include ':react-native-share-menu', ':app'
project(':react-native-share-menu').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-share-menu/android')

// android/app/build.gradle
dependencies {
    compile project(':react-native-share-menu')
}

// MainApplication.java
import com.meedan.ShareMenuPackage;

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
    new MainReactPackage(),
    new ShareMenuPackage()
  );
}

  10. Register a component for the iOS Share Extension

    master

    Create an index.share.js file to define the entry point for your Share Extension. You must register the component you want to render using AppRegistry with the specific component name ShareMenuModuleComponent.

    import { AppRegistry } from "react-native";

AppRegistry.registerComponent(
  "ShareMenuModuleComponent",
  () => MyShareComponent
);

  11. Configure Podfile for iOS Share Extension

    master

    Update your ios/Podfile to include the Share Extension target and the RNShareMenu pod. You must also add a post_install hook to ensure the extension can access necessary APIs.

    Note: If you use use_frameworks!, you should disable the Flipper lines.

    After editing, run pod install in your ios/ directory.

    target '<PROJECT_NAME>' do
  config = use_native_modules!

  use_react_native!(:path => config["reactNativePath"])

  target '<PROJECT_NAME>Tests' do
    inherit! :complete
  end

  use_flipper!
  post_install do |installer|
    flipper_post_install(installer)
    installer.pods_project.targets.each do |target|
      target.build_configurations.each do |config|
        config.build_settings['APPLICATION_EXTENSION_API_ONLY'] = 'NO'
      end
    end
  end
end

target '<SHARE_EXTENSION_NAME>' do
  use_react_native!

  pod 'RNShareMenu', :path => '../node_modules/react-native-share-menu'
end

  12. Link react-native-share-menu

    master

    Depending on your React Native version, follow the appropriate linking steps:

    Automatic Linking (React Native 0.60+)

    Run the following command in your ios directory:

    cd ios && pod install

    Manual Linking (React Native 0.36+)

    Run the following command in your project directory:

    react-native link
    # For React Native 0.60+
cd ios && pod install

# For React Native 0.36+
react-native link