Why we use share functionality :

In this post, i am going to tell you about share functionality which is “How to implement share functionality in react-native” and it’s important feature of any app and we need this functionality to share any content on social media platforms.

By using share functionality we add sharing to our app by using use React Native Share API,  you can customise your share API dialog title on android with dialogTitle and dialog message as well.

The output of share–

Step 1: Import the share API

Firstly, it is a basic functionality which is provided by the react-native, here we are going to import the share API from react-native, so let’s start.

import {  Share } from 'react-native';

Step 2: Design the share view

Here we are going to design the view where we call the share functionality.

<TouchableOpacity onPress={() =>{this.onShare()}}>
<Text>Invite And Share</Text> </TouchableOpacity>

Step 3: Defining the share functionality

Now we are going to provide the definition of onShare function.

onShare() { 
try { 
  const result = Share.share({
  title : 'App Title',
  message: 'Message'
 });  
if (result.action === Share.sharedAction) {
 if (result.activityType) {
 console.log('shared with activity type of result.activityType') 
 else if (result.action === Share.dismissedAction) { 
 console.log('dismissed')}}
catch (error) {   alert(error.message);    
}};

Step 4: Complete code

here we merge all the code which we implement above, so you can copy all the code from one place and implement this in your app.

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

class ShareContent extends Component {
  constructor(props) {
    super(props);
    this.state = {    
    }
  }
 
onShare() { 
try { 
  const result = Share.share({
  title : 'App Title',
  message: 'Message'
 });  
if (result.action === Share.sharedAction) {
 if (result.activityType) {
 console.log('shared with activity type of result.activityType') 
 else if (result.action === Share.dismissedAction) { 
 console.log('dismissed')}}
catch (error) {   alert(error.message);    
}};

render(){
  <TouchableOpacity onPress={() =>{this.onShare()}}>
  <Text>Invite And Share</Text> </TouchableOpacity>
 }
}

So we completed the react native share functionality in this tutorial which is “How to implement share functionality in react-native“.

You can find my post on medium as well click here please follow me on medium as well.

You can find my next post here.

If have any query/issue, please feel free to ask.

Happy Coding Guys.