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

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. Please follow this guide to install in your project first. And react-native-blob-util. Please follow this guide to install.

Installation

• Ensure you've completed the setps in prequisites.

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

OR

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

Usage

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.
• 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