ShareButton

A native button component that triggers the Facebook Share Dialog

The ShareButton component provides a native Facebook-styled button that automatically triggers the share dialog when pressed.

Component

import ShareButton from 'react-native-fbsdk-next';

<ShareButton
  shareContent={shareContent}
  style={customStyle}
/>

Props

shareContent · ShareContent · required

Content to be shared when the button is pressed. Can be ShareLinkContent, SharePhotoContent, or ShareVideoContent.

style · ViewStyle

Custom style for the button. The default style has a height of 30 and width of 80.

Examples

Basic Usage

import React from 'react';
import { View } from 'react-native';
import ShareButton from 'react-native-fbsdk-next';

function MyComponent() {
  return (
    <View>
      <ShareButton
        shareContent={{
          contentType: 'link',
          contentUrl: 'https://example.com',
        }}
      />
    </View>
  );
}

Share Link with Quote

import React from 'react';
import { View } from 'react-native';
import ShareButton from 'react-native-fbsdk-next';

function MyComponent() {
  return (
    <View>
      <ShareButton
        shareContent={{
          contentType: 'link',
          contentUrl: 'https://example.com',
          quote: 'Check out this amazing content!',
          commonParameters: {
            hashtag: '#MyApp',
          },
        }}
      />
    </View>
  );
}

Custom Styled Button

import React from 'react';
import { View } from 'react-native';
import ShareButton from 'react-native-fbsdk-next';

function MyComponent() {
  return (
    <View>
      <ShareButton
        shareContent={{
          contentType: 'link',
          contentUrl: 'https://example.com',
        }}
        style={{
          height: 50,
          width: 150,
        }}
      />
    </View>
  );
}

Share Photo

import React from 'react';
import { View } from 'react-native';
import ShareButton from 'react-native-fbsdk-next';

function MyComponent() {
  return (
    <View>
      <ShareButton
        shareContent={{
          contentType: 'photo',
          photos: [
            {
              imageUrl: 'file:///path/to/photo.jpg',
              caption: 'My photo caption',
            },
          ],
        }}
      />
    </View>
  );
}

Default Styling

The default button style is:

{
  height: 30,
  width: 80,
}

You can override this with your own style using the style prop.