Gathering detailed insights and metrics for @alliance-software-development/asd-media-react-native
Gathering detailed insights and metrics for @alliance-software-development/asd-media-react-native
Installations
npm install @alliance-software-development/asd-media-react-nativeDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
16.14.0
NPM Version
8.3.1
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
5
Package Meta Information
Latest Version
1.0.2
Package Id
@alliance-software-development/asd-media-react-native@1.0.2
Unpacked Size
43.55 kB
Size
9.19 kB
File Count
9
NPM Version
8.3.1
Node Version
16.14.0
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
4
Dev Dependencies
21
@commitlint/config-conventional@react-native-community/eslint-config@release-it/conventional-changelog@types/jest@types/react@types/react-nativecommitlinteslinteslint-config-prettiereslint-plugin-prettierhuskyjestpod-installprettierreactreact-nativereact-native-builder-bobreact-native-image-pickerreact-native-blob-utilrelease-ittypescript
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.
1npm install @alliance-software-development/asd-media-react-native
OR
1yarn add @alliance-software-development/asd-media-react-native
Usage
1import React from 'react'; 2import { View, Image, Button, StyleSheet } from 'react-native'; 3import { ASDMedia } from '@alliance-software-development/asd-media-react-native'; 4 5// ... 6 7const App = () => { 8 const asdMediaRef = React.useRef() 9 const [selectedImage, setSelectedImage] = React.useState() 10 11 const handleOnImageUpload = (data) => { 12 alert(JSON.stringify(data)); 13 }; 14 15 const handleOnImageChange = (data) => { 16 setSelectedImage(data.uri) 17 }; 18 19 return ( 20 <View style={styles.container}> 21 22 <View style={{ margin: 10 }}> 23 <ASDMedia 24 ref={asdMediaRef} 25 publicKey="UPLOADCARE_PUBLIC_KEY" 26 onImageUpload={handleOnImageUpload} 27 onImageChange={handleOnImageChange} 28 /> 29 </View> 30 <Image source={{uri: selectedImage }} style={{width: 100, height: 100}}> 31 <Button title="Upload" onPress={asdMediaRef.current?.handleUpload} /> 32 </View> 33 ); 34}; 35 36const styles = StyleSheet.create({ 37 container: { 38 flex: 1, 39 flexDirection: "row", 40 justifyContent: "center", 41 alignItems: "center" 42 } 43})
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 isChoose 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
No vulnerabilities found.
No security vulnerabilities found.