React Native Share Modal

A bottomsheet modal that offers sharing between multiple mainstream social media applications.

Peer Dependencies

This packages depends on the below packages to function properly:

• React Native Modal - Act as backdrop and container for the share modal
• React Native Clipboard - For copy link and copy info purposes
• React Native Simple Toast - For toast dialog purposes

Installation

Install the dependencies at the root of your React Native project

$ npm install --save react-native-share-modal

Additional Configurations

iOS

To enable facebook's sharing functionality you'll have to first setup and register your app on Facebook's Developer console following this guide https://developers.facebook.com/docs/sharing/ios/

In your Info.plist file in your Project.xcworkspace/Project.xcodeproj add the below block of code:-

<key>LSApplicationQueriesSchemes</key>
<array>
	<string>whatsapp</string>
	<string>fb-messenger</string>
	<string>tg</string>
	<string>mailto</string>
	<string>message</string>
	<string>twitter</string>
	<string>fb</string>
	<string>fb-messenger-share-api</string>
	<string>fbauth2</string>
	<string>fbapi</string>
	<string>fbshareextension</string>
</array>
<key>CFBundleURLTypes</key>
<array>
	<dict>
		<key>CFBundleURLSchemes</key>
		<array>
			<string>fb[appID]</string>
		</array>
	</dict>
</array>
<key>FacebookAppID</key>
<string>[appID]</string>
<key>FacebookDisplayName</key>
<string>[YourAppName]</string>

Basic Usage

import ShareModal from "react-native-share-modal";

<ShareModal
    visible={modalVisible}
    closeModal={() => setModalVisible(false)}
    data={{
      subject: "Something cool just launched !",
      message: "Come check this out !",
      url: "https://www.google.com",
      image: "file:///storage/emulated/0/Android/data/com.app_name/files/test.jpg"
    }}
/>

Props

| Property | Type | Default | Descrption | | ------ | ------ | ----- | ------ | | visible | boolean | false | Toggle modal using state | | closeModal | Callback Function | null | When the ShareModal's backdrop is clicked and callback to change the visible state | | data | object | {} | Data that is required for sharing through native side | | locale | string | en | Language to translate for library side (Check "Supported Locales" section for more info) | | exclude | array | [] | Add app names that you do not wish the include it in the sharing modal (See "Supported Apps" Section) |

Supported Locales (11/8/2020)

| Language | Locale Code | | ------ | ------ | | English | en | | Malay | my | | Chinese | zh | | Thai | th | | Vietnamese | vn | | Indonesian | id |

Supported Apps

| App | Name | iOS | Android | | ------ | ------ | ------ | ----- | | Email | email | ✔ (Default App) | ✔ (Gmail App) | | SMS | sms | ✔ | ✔ | | Whatsapp | whatsapp | ✔ | ✔ | | Twitter | twitter | ✔ | ✔ | | Facebook | facebook | ✔ | ✔ | | FB Messenger | messenger | ✔ | ✔ | | Telegram | telegram | ✔ | ✔ |

Todos

• Add in more social app support

License

MIT

Free Software, Hell Yeah!