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} 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 |
---|---|---|---|
✔ (Default App) | ✔ (Gmail App) | ||
SMS | sms | ✔ | ✔ |
✔ | ✔ | ||
✔ | ✔ | ||
✔ | ✔ | ||
FB Messenger | messenger | ✔ | ✔ |
Telegram | telegram | ✔ | ✔ |
Todos
- Add in more social app support
License
MIT
Free Software, Hell Yeah!