# React Native Share Modal
[![Build Status](https://travis-ci.org/joemccann/dillinger.svg?branch=master)](https://travis-ci.org/joemccann/dillinger)

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](https://github.com/react-native-community/react-native-modal) - Act as backdrop and container for the share modal
* [React Native Clipboard](https://github.com/react-native-community/clipboard) - For copy link and copy info purposes
* [React Native Simple Toast](https://www.npmjs.com/package/react-native-simple-toast) - For toast dialog purposes

### Installation
Install the dependencies at the root of your React Native project
```sh
$ 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:-
```sh
<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
```sh
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!**

[//]: # (These are reference links used in the body of this note and get stripped out when the markdown processor does its job. There is no need to format nicely because it shouldn't be seen. Thanks SO - http://stackoverflow.com/questions/4823468/store-comments-in-markdown-syntax)


   [dill]: <https://github.com/joemccann/dillinger>
   [git-repo-url]: <https://github.com/joemccann/dillinger.git>
   [john gruber]: <http://daringfireball.net>
   [df1]: <http://daringfireball.net/projects/markdown/>
   [markdown-it]: <https://github.com/markdown-it/markdown-it>
   [Ace Editor]: <http://ace.ajax.org>
   [node.js]: <http://nodejs.org>
   [Twitter Bootstrap]: <http://twitter.github.com/bootstrap/>
   [jQuery]: <http://jquery.com>
   [@tjholowaychuk]: <http://twitter.com/tjholowaychuk>
   [express]: <http://expressjs.com>
   [AngularJS]: <http://angularjs.org>
   [Gulp]: <http://gulpjs.com>

   [PlDb]: <https://github.com/joemccann/dillinger/tree/master/plugins/dropbox/README.md>
   [PlGh]: <https://github.com/joemccann/dillinger/tree/master/plugins/github/README.md>
   [PlGd]: <https://github.com/joemccann/dillinger/tree/master/plugins/googledrive/README.md>
   [PlOd]: <https://github.com/joemccann/dillinger/tree/master/plugins/onedrive/README.md>
   [PlMe]: <https://github.com/joemccann/dillinger/tree/master/plugins/medium/README.md>
   [PlGa]: <https://github.com/RahulHP/dillinger/blob/master/plugins/googleanalytics/README.md>