react-native-share-modal

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!