https://github.com/malsapp/react-native-photo-upload
Cross platform photo upload component for react native
https://github.com/malsapp/react-native-photo-upload
photos react react-native react-native-fs react-native-image-picker react-native-image-resizer reactjs
Last synced: 14 days ago
JSON representation
Cross platform photo upload component for react native
- Host: GitHub
- URL: https://github.com/malsapp/react-native-photo-upload
- Owner: malsapp
- License: mit
- Created: 2017-06-03T12:05:05.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-02-10T15:33:51.000Z (over 3 years ago)
- Last Synced: 2025-05-05T03:04:49.322Z (23 days ago)
- Topics: photos, react, react-native, react-native-fs, react-native-image-picker, react-native-image-resizer, reactjs
- Language: JavaScript
- Size: 83 KB
- Stars: 206
- Watchers: 8
- Forks: 87
- Open Issues: 51
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-photo-upload
This component handles all the hassle in dealing with photos in react native, it's built on top of `react-native-image-picker`, `react-native-image-resizer` and `react-native-fs`
it takes an image component and upon click, you get the image picker prompt, get the base64 string of the image and the image source changes to whatever image was picked.
## Installing
npm or yarn install
```
npm install react-native-photo-upload --save
```
or
```
yarn add react-native-photo-upload
```
## Automatic Installation
link `react-native-image-picker`, `react-native-image-resizer` and `react-native-fs` which the component depends on
```
react-native link react-native-image-picker
react-native link react-native-image-resizer
react-native link react-native-fs
```
#### The following steps are required by `react-native-image-picker` for both Android and IOS even with automatic linking
### Android
* Update the android build tools version to `2.2.+` in `android/build.gradle` (required step by `react-native-image-picker):
```gradle
buildscript {
...
dependencies {
classpath 'com.android.tools.build:gradle:2.2.+' // <- USE 2.2.+ version
}
...
}
...
```
* Update the gradle version to `2.14.1` in `android/gradle/wrapper/gradle-wrapper.properties`:
```
...
distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip
```
* Add the required permissions in `AndroidManifest.xml`:
```xml
```
### IOS
For iOS 10+, Add the `NSPhotoLibraryUsageDescription`, `NSCameraUsageDescription`, and `NSMicrophoneUsageDescription` (if allowing video) keys to your `Info.plist` with strings describing why your app needs these permissions. **Note: You will get a SIGABRT crash if you don't complete this step**
```
...
NSPhotoLibraryUsageDescription
YOUR_REASON_FOR_USING_USER_PHOTOS_HERE
NSCameraUsageDescription
YOUR_REASON_FOR_USING_USER_CAMERA_HERE
```
## Manual Installation
check the docs of each library on how to link manually.
* [react-native-image-picker](https://github.com/react-community/react-native-image-picker)
* [react-native-image-resizer](https://github.com/bamlab/react-native-image-resizer)
* [react-native-fs](https://github.com/itinance/react-native-fs)
## Usage
Wrap your default image inside the PhotoUpload component, the component wraps the image with TouchableOpacity, on press it will trigger the image picker prompt. after selecting a new image from the picker, the image source will get replaced with the new image base64 string as uri
```
```
## Example
```
import { Image } from 'react-native'
import PhotoUpload from 'react-native-photo-upload'
{
if (avatar) {
console.log('Image base64 string: ', avatar)
}
}}
>
```
## Props
Prop | Type | Description
-----|------|------------
containerStyle | Object | Style object for the image container
photoPickerTitle | String | Title for the image picker prompt, default is 'Select Photo'
maxHeight | Number | the resized image max height, maintains aspect ratio, default is 600
maxWidth | Number | the resized image max width, maintains aspect ratio default is 600
format | String | The format desired of the resized image, 'JPEG' or 'PNG' default is 'JPEG'
quality | Number | The quality of the resized image indicated by a number between 1 and 100, default is 100
onPhotoSelect | Function | function which takes the base64 string of the new image as parameter
onError | Function | fires if any error occur with response
onTapCustomButton | Function | fires on tap custom button
onStart | Function | fires when user starts (useful for loading, etc)
onCancel | Function | fires when user cancel
onResponse | Function | fires on response exists
onRender | Function | fires after render
onResizedImageUri | Function | fires when image resized is ready
imagePickerProps | Object | Other props for react-native-image-picker