react-native-share

What is react-native-share?

The react-native-share package allows you to share content such as text, images, and files from your React Native app to other apps on the user's device. It supports both Android and iOS platforms.

What are react-native-share's main functionalities?

Share Text

This feature allows you to share plain text messages. The code sample demonstrates how to share a simple text message using the react-native-share package.

import Share from 'react-native-share';

const shareText = async () => {
  const shareOptions = {
    message: 'Hello, this is a text message!',
  };
  try {
    await Share.open(shareOptions);
  } catch (error) {
    console.log('Error =>', error);
  }
};

Share Image

This feature allows you to share images. The code sample demonstrates how to share an image using a base64 encoded string.

import Share from 'react-native-share';

const shareImage = async () => {
  const shareOptions = {
    url: 'data:image/png;base64,<base64_encoded_image>',
  };
  try {
    await Share.open(shareOptions);
  } catch (error) {
    console.log('Error =>', error);
  }
};

Share File

This feature allows you to share files. The code sample demonstrates how to share a file from a given file path.

import Share from 'react-native-share';

const shareFile = async () => {
  const shareOptions = {
    url: 'file://path/to/your/file.pdf',
  };
  try {
    await Share.open(shareOptions);
  } catch (error) {
    console.log('Error =>', error);
  }
};

Share with Social Media

This feature allows you to share content directly to specific social media apps. The code sample demonstrates how to share a message directly to WhatsApp.

import Share from 'react-native-share';

const shareToWhatsApp = async () => {
  const shareOptions = {
    message: 'Hello, sharing this via WhatsApp!',
    social: Share.Social.WHATSAPP,
  };
  try {
    await Share.shareSingle(shareOptions);
  } catch (error) {
    console.log('Error =>', error);
  }
};

Other packages similar to react-native-share

react-native-social-share

The react-native-social-share package allows you to share content to social media platforms like Facebook, Twitter, and WhatsApp. It is more focused on social media sharing compared to react-native-share, which offers a broader range of sharing options.

react-native-share-menu

The react-native-share-menu package allows your app to receive content shared from other apps. While react-native-share focuses on sharing content from your app, react-native-share-menu is designed to handle incoming shared content.

expo-sharing

The expo-sharing package is part of the Expo ecosystem and allows you to share files with other apps. It is simpler to use within Expo-managed projects but may not offer as many customization options as react-native-share.

README

react-native-share

Share Social , Sending Simple Data to Other Apps

Installation

npm i --save react-native-share

Add to your Android project

• In android/setting.gradle

...
include ':react-native-share', ':app'
project(':react-native-share').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-share/android')

• In android/app/build.gradle

...
dependencies {
    ...
    compile project(':react-native-share')
}

• register module (in MainActivity.java)

import cl.json.RNSharePackage;  // <--- import

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
  ......

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mReactRootView = new ReactRootView(this);

    mReactInstanceManager = ReactInstanceManager.builder()
      .setApplication(getApplication())
      .setBundleAssetName("index.android.bundle")
      .setJSMainModuleName("index.android")
      .addPackage(new MainReactPackage())
      .addPackage(new RNSharePackage())              // <------ add here
      .setUseDeveloperSupport(BuildConfig.DEBUG)
      .setInitialLifecycleState(LifecycleState.RESUMED)
      .build();

    mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);

    setContentView(mReactRootView);
  }

  ......

}

Example

var React = require('react-native');
var Share = require('react-native-share');
var TouchableHighlight = require('TouchableHighlight');
var MailExampleApp = React.createClass({
  onShare: function() {
    Share.open({
      share_text: "Hola mundo",
      share_URL: "http://google.cl",
      title: "Share Link"
    },function(e) {
      console.log(e);
    });
  },  
  render: function() {
    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={this.onShare}>
          <Text  style={styles.instructions}>
            Share
          </Text>
        </TouchableHighlight>
      </View>
    );
  }
});
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
AppRegistry.registerComponent('example', () => example);