# react-native-use-share

> React native javascript share sheet

Latest version **0.3.0** (published 2020-06-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-use-share
pnpm add react-native-use-share
yarn add react-native-use-share
bun add react-native-use-share
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2020-06-15 |
| First published | 2020-06-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 291.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jacob Arvidsson |
| Maintainers | jacobarvidsson |
| Keywords | react-native, ios, android |

## Links

- npm: https://www.npmjs.com/package/react-native-use-share
- Repository: https://github.com/theurbancoder/react-native-use-share
- Homepage: https://github.com/theurbancoder/react-native-use-share#readme
- Issues: https://github.com/theurbancoder/react-native-use-share/issues
- npm.io page: https://npm.io/package/react-native-use-share

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.3.0 (latest) — 2020-06-15
- 0.2.0 — 2020-06-15
- 0.1.0 — 2020-06-14

## README

# React native - Use share

React Native - Use Share is a JavaScript implementation of a share sheet.

<img src="https://github.com/theurbancoder/react-native-use-share/blob/master/assets/example.png?raw=true" width="800">

| iOS                | Android            | Web                |
| ------------------ | ------------------ | ------------------ |
| :white_check_mark: | :white_check_mark: | :white_check_mark: |

## Installation

Install the package and all the peer dependencies.

```sh
npm install react-native-use-share
```

```sh
yarn add react-native-use-share
```

## Peer dependencies

To use the library you need to install all peer dependencies.

- expo-linking
- expo-localization
- expo-mail-composer
- expo-sms
- react-native-gesture-handler
- react-native-reanimated
- react-native-safe-area-context
- react-native-redash
- react-native-svg
- react-responsive

## Usage

Wrap your main component in the share provider.

```js
import React from 'react';
import { ShareProvider } from 'react-native-use-share';
import ShareButton from './ShareButton';

const App = () => (
  <ShareProvider>
    <ShareButton />
  </ShareProvider>
);

export default App;
```

Children of the main component can then call useShare, and use the share function to display the share modal.

```js
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { useShare } from 'react-native-use-share';

const ShareButton = () => {
  const { share } = useShare();

  const onPress = () =>
    share({
      title: 'Share',
      message:
        'There is a new share sheet for react native, you should check it out: ',
      url: 'https://github.com/theurbancoder/react-native-use-share',
    });

  return (
    <TouchableOpacity onPress={onPress}>
      <Text>Share</Text>
    </TouchableOpacity>
  );
};

export default Providers;
```

## Configure

The share provider takes an options argument to configure the share dialog.

| Argument     | Value                                                  | Default                              |
| ------------ | ------------------------------------------------------ | ------------------------------------ |
| language     | language code, eg. "en"                                | Undefined, will take system language |
| defaultTypes | String array specifying which share buttons to display | ["Sms", "Mail", "Copy", "More"]      |
| theme        | 'dark' or 'light'                                      | 'light'                              |

```js
const App = () => (
  <ShareProvider options={{
    language: "en",
    defaultTypes: ["sms", "email", "twitter"]
    theme: "dark"
  }}>
    {...}
  </ShareProvider>
);
```

## Share Types

The share provider takes an options argument to configure the share dialog.

| Type      | Value                                                         | Config |
| --------- | ------------------------------------------------------------- | ------ |
| sms       | Opens sms app on a mobile device. Not supported on web.       |        |
| email     | Opens default email client                                    |        |
| twitter   | Opens twitter website, deep links to the app if installed     |        |
| whats-app | Opens Whats App's website, deep links to the app if installed |        |
| linkedin  | Opens LinkedIn's website, deep links to the app if installed  |        |
| copy      | Copies message + url to clipboard                             |        |

## Dark mode

The library uses react-native-appearance to enable dark mode. It requires some configuration to work, see more at the [expo docs](https://docs.expo.io/versions/latest/sdk/appearance/).

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---
_Source: https://npm.io/package/react-native-use-share · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._