# @alliance-software-development/asd-media-react-native

> React Native Module for ASD Media built on top UploadCare API

Latest version **1.0.2** (published 2022-02-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @alliance-software-development/asd-media-react-native
pnpm add @alliance-software-development/asd-media-react-native
yarn add @alliance-software-development/asd-media-react-native
bun add @alliance-software-development/asd-media-react-native
```

## Health

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

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

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2022-02-22 |
| First published | 2022-02-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 43.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ASD Developer |
| Maintainers | blvckleumas, kelvin_img, abdulsamadola, gabrielquiksession, asddev |
| Keywords | react-native, ios, android |

## Links

- npm: https://www.npmjs.com/package/@alliance-software-development/asd-media-react-native
- Repository: https://github.com/imaginationeverywhere/asd-media-react-native
- Homepage: https://github.com/imaginationeverywhere/asd-media-react-native#readme
- Issues: https://github.com/imaginationeverywhere/asd-media-react-native/issues
- npm.io page: https://npm.io/package/@alliance-software-development/asd-media-react-native

## 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

- 1.0.2 (latest) — 2022-02-22
- 1.0.1 — 2022-02-13
- 0.1.2 — 2022-02-13
- 0.1.1 — 2022-02-12

## README

# asd-media-react-native

React Native Module for ASD Media built on top of UploadCare API

## Prequisites

- This library relies on [react-native-image-picker](https://www.npmjs.com/package/react-native-image-picker). Please follow [this guide](https://www.npmjs.com/package/react-native-image-picker) to install in your project first.
  And [react-native-blob-util](https://www.npmjs.com/package/react-native-blob-util). Please follow [this guide](https://www.npmjs.com/package/react-native-blob-util#user-content-installation) to install.

## Installation

- Ensure you've completed the setps in [prequisites.](#prequisites)

```sh
npm install @alliance-software-development/asd-media-react-native
```

OR

```sh
yarn add @alliance-software-development/asd-media-react-native
```

## Usage

```js
import React from 'react';
import { View, Image, Button, StyleSheet } from 'react-native';
import { ASDMedia } from '@alliance-software-development/asd-media-react-native';

// ...

const App = () => {
  const asdMediaRef = React.useRef()
  const [selectedImage, setSelectedImage] = React.useState()

  const handleOnImageUpload = (data) => {
    alert(JSON.stringify(data));
  };

  const handleOnImageChange = (data) => {
    setSelectedImage(data.uri)
  };

  return (
    <View style={styles.container}>

      <View style={{ margin: 10 }}>
    <ASDMedia
      ref={asdMediaRef}
      publicKey="UPLOADCARE_PUBLIC_KEY"
      onImageUpload={handleOnImageUpload}
      onImageChange={handleOnImageChange}
    />
    </View>
    <Image source={{uri: selectedImage }} style={{width: 100, height: 100}}>
    <Button title="Upload" onPress={asdMediaRef.current?.handleUpload} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
        flex: 1,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center"
        }
})
```

## Props

ASDMedia component accepts following props.

| Name                 | Type   | Default        | Is Required |
| -------------------- | ------ | -------------- | ----------- |
| publicKey            | string | -              | Yes         |
| onImageUpload        | Func   | -              | Yes         |
| onImageChange        | Func   | -              | No          |
| buttonText           | string | Choose a photo | No          |
| buttonContainerStyle | {}     | -              | No          |
| buttonStyle          | {}     | -              | No          |
| buttonTextStyle      | {}     | -              | No          |

## Props Explanation

- `publicKey` (String) - UploadCare public key of your project [Doc here](https://uploadcare.com/docs/start/settings/).
- `onImageUpload` (?=Function) - Called upon success or failure of the upload session with `{ ...props }`
- `onImageChange` (?=Function) - Called when the image selection changes with `{ uri: `imagepath` }`
- `buttonText` (?String) - Button text, default is `Choose a photo`.
- `buttonContainerStyle` (?Object) - Styling to be spread to the view wrapping the button Component.
- `buttonStyle` (?Object) - Styling to be spread to the default button component style.
- `buttonTextStyle` (?Object) - Button text styling

---
_Source: https://npm.io/package/@alliance-software-development/asd-media-react-native · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._