Facebook Sharing

The Facebook SDK provides powerful sharing capabilities that allow users to share content from your app to their Facebook timeline. The Share Dialog is the recommended way to share content. It provides a native sharing experience and doesn’t require additional permissions.

import { ShareDialog } from 'react-native-fbsdk-next';

// Build up a shareable link
const shareLinkContent = {
  contentType: 'link',
  contentUrl: "https://facebook.com",
};

// Share the link using the share dialog
async function shareLinkWithShareDialog() {
  try {
    const canShow = await ShareDialog.canShow(shareLinkContent);
    
    if (canShow) {
      const result = await ShareDialog.show(shareLinkContent);
      
      if (result.isCancelled) {
        console.log("Share cancelled");
      } else {
        console.log("Share successful with postId: " + result.postId);
      }
    }
  } catch (error) {
    console.log("Share failed with error: " + error);
  }
}

Add hashtags, quotes, and other metadata:

const shareLinkContent = {
  contentType: 'link',
  contentUrl: "https://example.com/article",
  quote: "Check out this amazing article!",
  hashtag: "#ReactNative",
  commonParameters: {
    ref: "my_campaign",
    placeId: "1234567890",
    peopleIds: ["friend_id_1", "friend_id_2"],
  },
};

ShareDialog.show(shareLinkContent);

Share photos from your app to Facebook:

import { ShareDialog } from "react-native-fbsdk-next";

const photoUri = "file://" + "/path/of/photo.png";
const sharePhotoContent = {
  contentType: "photo",
  photos: [{ imageUrl: photoUri }],
};

ShareDialog.show(sharePhotoContent);

Multiple Photos

Share multiple photos at once:

const sharePhotoContent = {
  contentType: "photo",
  photos: [
    { imageUrl: "file:///path/to/photo1.png" },
    { imageUrl: "file:///path/to/photo2.png" },
    { imageUrl: "file:///path/to/photo3.png" },
  ],
  commonParameters: {
    hashtag: "#MyApp",
  },
};

ShareDialog.show(sharePhotoContent);

Photos with User Tagging

const sharePhotoContent = {
  contentType: "photo",
  photos: [{ imageUrl: photoUri }],
  commonParameters: {
    peopleIds: ["123456789", "987654321"],
    placeId: "1234567890",
    hashtag: "#VacationTime",
  },
};

ShareDialog.show(sharePhotoContent);

Share videos with optional preview photos and metadata:

import { ShareDialog } from "react-native-fbsdk-next";

const videoUri = "file://" + "/path/of/video.mp4";
const shareVideoContent = {
  contentType: "video",
  video: { localUrl: videoUri },
};

ShareDialog.show(shareVideoContent);

Video with Metadata

const shareVideoContent = {
  contentType: "video",
  video: { localUrl: "file:///path/to/video.mp4" },
  contentTitle: "My Amazing Video",
  contentDescription: "Watch this incredible moment!",
  previewPhoto: { imageUrl: "file:///path/to/thumbnail.png" },
  commonParameters: {
    hashtag: "#VideoOfTheDay",
  },
};

ShareDialog.show(shareVideoContent);

Setting Dialog Mode

Control how the share dialog is displayed:

Automatic (Recommended)
Native
Web (Android)
Browser (iOS)

import { ShareDialog } from 'react-native-fbsdk-next';

// The SDK will choose the best available mode
ShareDialog.setMode('automatic');

import { ShareDialog } from 'react-native-fbsdk-next';

// Use native Facebook app dialog
ShareDialog.setMode('native');

import { ShareDialog } from 'react-native-fbsdk-next';

// Use web dialog (Android only)
ShareDialog.setMode('web');

import { ShareDialog } from 'react-native-fbsdk-next';

// Display in Safari (iOS only)
ShareDialog.setMode('browser');

Error Handling

Configure whether the dialog should fail on data errors:

import { ShareDialog } from 'react-native-fbsdk-next';

// Fail if there's a data error
ShareDialog.setShouldFailOnDataError(true);

// Continue even with data errors (default)
ShareDialog.setShouldFailOnDataError(false);

The Share API requires your app to have the publish_actions permission approved. For most use cases, use Share Dialogs instead for an easier and more consistent experience.

import { ShareApi } from 'react-native-fbsdk-next';

const shareLinkContent = {
  contentType: "link",
  contentUrl: "https://facebook.com",
};

// Share using the Share API
async function shareWithApi() {
  try {
    const canShare = await ShareApi.canShare(shareLinkContent);
    
    if (canShare) {
      const result = await ShareApi.share(
        shareLinkContent,
        "/me",
        "Check this out!"
      );
      console.log("Share with ShareApi success.");
    }
  } catch (error) {
    console.log("Share with ShareApi failed with error: " + error);
  }
}

Complete Examples

Link Sharing Component
Photo Sharing Component

import React, { useState } from 'react';
import { View, Button, Alert } from 'react-native';
import { ShareDialog } from 'react-native-fbsdk-next';

export default function ShareLinkExample() {
  const [sharing, setSharing] = useState(false);

  const shareLink = async () => {
    setSharing(true);
    
    const content = {
      contentType: 'link',
      contentUrl: 'https://example.com',
      quote: 'Check out this amazing app!',
      hashtag: '#ReactNative',
    };

    try {
      const canShow = await ShareDialog.canShow(content);
      
      if (canShow) {
        const result = await ShareDialog.show(content);
        
        if (!result.isCancelled) {
          Alert.alert('Success', 'Shared successfully!');
        }
      } else {
        Alert.alert('Error', 'Cannot show share dialog');
      }
    } catch (error) {
      Alert.alert('Error', error.message);
    } finally {
      setSharing(false);
    }
  };

  return (
    <View>
      <Button
        title="Share to Facebook"
        onPress={shareLink}
        disabled={sharing}
      />
    </View>
  );
}

import React from 'react';
import { View, Button, Alert } from 'react-native';
import { ShareDialog } from 'react-native-fbsdk-next';
import { launchImageLibrary } from 'react-native-image-picker';

export default function SharePhotoExample() {
  const sharePhoto = async () => {
    // Pick an image
    const result = await launchImageLibrary({ mediaType: 'photo' });
    
    if (result.assets && result.assets[0]) {
      const photoUri = result.assets[0].uri;
      
      const content = {
        contentType: 'photo',
        photos: [{ imageUrl: photoUri }],
        commonParameters: {
          hashtag: '#MyApp',
        },
      };

      try {
        const canShow = await ShareDialog.canShow(content);
        
        if (canShow) {
          const shareResult = await ShareDialog.show(content);
          
          if (!shareResult.isCancelled) {
            Alert.alert('Success', 'Photo shared!');
          }
        }
      } catch (error) {
        Alert.alert('Error', error.message);
      }
    }
  };

  return (
    <View>
      <Button title="Share Photo" onPress={sharePhoto} />
    </View>
  );
}

ShareContent Types

ShareLinkContent

type ShareLinkContent = {
  contentType: 'link';
  contentUrl: string;
  quote?: string;
  hashtag?: string;
  commonParameters?: ShareContentCommonParameters;
};

SharePhotoContent

type SharePhotoContent = {
  contentType: 'photo';
  photos: Array<{ imageUrl: string }>;
  contentUrl?: string;
  commonParameters?: ShareContentCommonParameters;
};

ShareVideoContent

type ShareVideoContent = {
  contentType: 'video';
  video: { localUrl: string };
  contentTitle?: string;
  contentDescription?: string;
  previewPhoto?: { imageUrl: string };
  contentUrl?: string;
  commonParameters?: ShareContentCommonParameters;
};

Common Parameters

type ShareContentCommonParameters = {
  peopleIds?: Array<string>;  // IDs of people to tag
  placeId?: string;            // ID of place to tag
  ref?: string;                // Referrer parameter
  hashtag?: string;            // Hashtag (max 32 chars)
};

API Reference

ShareDialog Methods

Method	Description
`canShow(shareContent)`	Check if the dialog can be shown
`show(shareContent)`	Show the dialog with content
`setMode(mode)`	Set the dialog display mode
`setShouldFailOnDataError(shouldFail)`	Configure error handling

ShareDialogResult

Property	Type	Description
`isCancelled`	boolean	Whether the share was cancelled
`postId`	string	ID of the created post (if successful)

Best Practices

Always check canShow() before attempting to show the share dialog
Use ShareDialog instead of ShareApi for better user experience and no permission requirements
Keep hashtags under 32 characters or they will be truncated
Provide high-quality images for better engagement
Test on both platforms as some features behave differently on iOS vs Android

Get Started

Platform Setup

Core Concepts

Features

Guides

Multiple Photos

Photos with User Tagging

Video with Metadata

Setting Dialog Mode

Error Handling

Complete Examples

ShareContent Types

ShareLinkContent

SharePhotoContent

ShareVideoContent

Common Parameters

API Reference

ShareDialog Methods

ShareDialogResult

Best Practices

Build docs developers (and LLMs) love

Get Started

Platform Setup

Core Concepts

Features

Guides

​Share Dialog

​Sharing Links

​Advanced Link Sharing

​Sharing Photos

​Multiple Photos

​Photos with User Tagging

​Sharing Videos

​Video with Metadata

​Share Dialog Configuration

​Setting Dialog Mode

​Error Handling

​Share API

​Complete Examples

​ShareContent Types

​ShareLinkContent

​SharePhotoContent

​ShareVideoContent

​Common Parameters

​API Reference

​ShareDialog Methods

​ShareDialogResult

​Best Practices

Build docs developers (and LLMs) love

Share Dialog

Sharing Links

Advanced Link Sharing

Sharing Photos

Multiple Photos

Photos with User Tagging

Sharing Videos

Video with Metadata

Share Dialog Configuration

Setting Dialog Mode

Error Handling

Share API

Complete Examples

ShareContent Types

ShareLinkContent

SharePhotoContent

ShareVideoContent

Common Parameters

API Reference

ShareDialog Methods

ShareDialogResult

Best Practices