How to Share Text Messages to Other Apps in React Native

In this world of social media, the importance of sharing data or information is at the peak. So, let’s check how to share text messages across other apps in React Native.

The sharing across other apps is done by using React Native Share API. You can simply use Share API as given below.

Share.share({
        message:
          'Let me share this text with other apps',
      });

Following is the complete react native example where the share actions are initiated when the button is pressed.

Class Component

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

export default class App extends Component {

  onShare = async () => {
    try {
      await Share.share({
        title: 'React Native Share',
        message:
          'Let me share this text with other apps',
      });

    } catch (error) {
      console.log(error.message);
    }
  };

  render() {
    return (
      <View style={styles.container}>
        <Button
        title="Share"
         onPress={()=>this.onShare()}/>
      </View>
    );
  }
}

// define your styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Function Component

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

const App = () => {
  const onShare = async () => {
    try {
      await Share.share({
        title: 'React Native Share',
        message: 'Let me share this text with other apps',
      });
    } catch (error) {
      console.log(error.message);
    }
  };

  return (
    <View style={styles.container}>
      <Button title="Share" onPress={() => onShare()} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Thank you for visiting my blog!