Skip to content

Commit 24b66b7

Browse files
Marc Shillingmarcshilling
Marc Shilling
authored and
marcshilling
committed
document the new way of importing
1 parent 8335560 commit 24b66b7

File tree

1 file changed

+81
-86
lines changed

1 file changed

+81
-86
lines changed

‎README.md

Lines changed: 81 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
#### *** Before you open an issue ***
1+
#### _Before you open an issue_
22
This library started as a basic bridge of the native iOS image picker, and I want to keep it that way. As such, functionality beyond what the native `UIImagePickerController` supports will not be supported here. **Multiple image selection, more control over the crop tool, and landscape support** are things missing from the native iOS functionality - **not issues with my library**. If you need these things, [react-native-image-crop-picker](https://github.com/ivpusic/react-native-image-crop-picker) might be a better choice for you.
33
As for Android, I want to keep it in parity with iOS. So while you may have better luck with cropping/landscape, we will not support multiple image selection there either.
44

@@ -87,95 +87,90 @@ public class MainActivity extends ReactActivity {
8787

8888
```
8989
## Usage
90-
1. In your React Native javascript code, bring in the native module:
91-
92-
```javascript
93-
var ImagePickerManager = require('NativeModules').ImagePickerManager;
94-
```
95-
2. Use it like so:
96-
97-
When you want to display the picker:
98-
```javascript
99-
var options = {
100-
title: 'Select Avatar', // specify null or empty string to remove the title
101-
cancelButtonTitle: 'Cancel',
102-
takePhotoButtonTitle: 'Take Photo...', // specify null or empty string to remove this button
103-
chooseFromLibraryButtonTitle: 'Choose from Library...', // specify null or empty string to remove this button
104-
customButtons: {
105-
'Choose Photo from Facebook': 'fb', // [Button Text] : [String returned upon selection]
106-
},
107-
cameraType: 'back', // 'front' or 'back'
108-
mediaType: 'photo', // 'photo' or 'video'
109-
videoQuality: 'high', // 'low', 'medium', or 'high'
110-
durationLimit: 10, // video recording max time in seconds
111-
maxWidth: 100, // photos only
112-
maxHeight: 100, // photos only
113-
aspectX: 2, // android only - aspectX:aspectY, the cropping image's ratio of width to height
114-
aspectY: 1, // android only - aspectX:aspectY, the cropping image's ratio of width to height
115-
quality: 0.2, // 0 to 1, photos only
116-
angle: 0, // android only, photos only
117-
allowsEditing: false, // Built in functionality to resize/reposition the image after selection
118-
noData: false, // photos only - disables the base64 `data` field from being generated (greatly improves performance on large photos)
119-
storageOptions: { // if this key is provided, the image will get saved in the documents directory on ios, and the pictures directory on android (rather than a temporary directory)
120-
skipBackup: true, // ios only - image will NOT be backed up to icloud
121-
path: 'images' // ios only - will save image at /Documents/images rather than the root
122-
}
123-
};
124-
125-
/**
126-
* The first arg will be the options object for customization, the second is
127-
* your callback which sends object: response.
128-
*
129-
* See the README for info about the response
130-
*/
13190

132-
ImagePickerManager.showImagePicker(options, (response) => {
133-
console.log('Response = ', response);
134-
135-
if (response.didCancel) {
136-
console.log('User cancelled image picker');
137-
}
138-
else if (response.error) {
139-
console.log('ImagePickerManager Error: ', response.error);
140-
}
141-
else if (response.customButton) {
142-
console.log('User tapped custom button: ', response.customButton);
143-
}
144-
else {
145-
// You can display the image using either data:
146-
const source = {uri: 'data:image/jpeg;base64,' + response.data, isStatic: true};
147-
148-
// uri (on iOS)
149-
const source = {uri: response.uri.replace('file://', ''), isStatic: true};
150-
// uri (on android)
151-
const source = {uri: response.uri, isStatic: true};
152-
153-
this.setState({
154-
avatarSource: source
155-
});
156-
}
157-
});
158-
```
159-
Then later, if you want to display this image in your render() method:
160-
```javascript
161-
<Image source={this.state.avatarSource} style={styles.uploadAvatar} />
162-
```
91+
```javascript
92+
var ImagePicker = require('react-native-image-picker');
93+
94+
var options = {
95+
title: 'Select Avatar', // specify null or empty string to remove the title
96+
cancelButtonTitle: 'Cancel',
97+
takePhotoButtonTitle: 'Take Photo...', // specify null or empty string to remove this button
98+
chooseFromLibraryButtonTitle: 'Choose from Library...', // specify null or empty string to remove this button
99+
customButtons: {
100+
'Choose Photo from Facebook': 'fb', // [Button Text] : [String returned upon selection]
101+
},
102+
cameraType: 'back', // 'front' or 'back'
103+
mediaType: 'photo', // 'photo' or 'video'
104+
videoQuality: 'high', // 'low', 'medium', or 'high'
105+
durationLimit: 10, // video recording max time in seconds
106+
maxWidth: 100, // photos only
107+
maxHeight: 100, // photos only
108+
aspectX: 2, // android only - aspectX:aspectY, the cropping image's ratio of width to height
109+
aspectY: 1, // android only - aspectX:aspectY, the cropping image's ratio of width to height
110+
quality: 0.2, // 0 to 1, photos only
111+
angle: 0, // android only, photos only
112+
allowsEditing: false, // Built in functionality to resize/reposition the image after selection
113+
noData: false, // photos only - disables the base64 `data` field from being generated (greatly improves performance on large photos)
114+
storageOptions: { // if this key is provided, the image will get saved in the documents directory on ios, and the pictures directory on android (rather than a temporary directory)
115+
skipBackup: true, // ios only - image will NOT be backed up to icloud
116+
path: 'images' // ios only - will save image at /Documents/images rather than the root
117+
}
118+
};
119+
120+
/**
121+
* The first arg will be the options object for customization, the second is
122+
* your callback which sends object: response.
123+
*
124+
* See the README for info about the response
125+
*/
126+
127+
ImagePicker.showImagePicker(options, (response) => {
128+
console.log('Response = ', response);
129+
130+
if (response.didCancel) {
131+
console.log('User cancelled image picker');
132+
}
133+
else if (response.error) {
134+
console.log('ImagePicker Error: ', response.error);
135+
}
136+
else if (response.customButton) {
137+
console.log('User tapped custom button: ', response.customButton);
138+
}
139+
else {
140+
// You can display the image using either data:
141+
const source = {uri: 'data:image/jpeg;base64,' + response.data, isStatic: true};
142+
143+
// uri (on iOS)
144+
const source = {uri: response.uri.replace('file://', ''), isStatic: true};
145+
// uri (on android)
146+
const source = {uri: response.uri, isStatic: true};
147+
148+
this.setState({
149+
avatarSource: source
150+
});
151+
}
152+
});
153+
```
154+
Then later, if you want to display this image in your render() method:
155+
```javascript
156+
<Image source={this.state.avatarSource} style={styles.uploadAvatar} />
157+
```
163158

164159
### Directly Launching the Camera or Image Library
165160

166-
To Launch the Camera or Image Library directly (skipping the alert dialog) you can
167-
do the following:
168-
```javascript
169-
// Launch Camera:
170-
ImagePickerManager.launchCamera(options, (response) => {
171-
// Same code as in above section!
172-
});
173-
174-
// Open Image Library:
175-
ImagePickerManager.launchImageLibrary(options, (response) => {
176-
// Same code as in above section!
177-
});
178-
```
161+
To Launch the Camera or Image Library directly (skipping the alert dialog) you can
162+
do the following:
163+
```javascript
164+
// Launch Camera:
165+
ImagePicker.launchCamera(options, (response) => {
166+
// Same code as in above section!
167+
});
168+
169+
// Open Image Library:
170+
ImagePicker.launchImageLibrary(options, (response) => {
171+
// Same code as in above section!
172+
});
173+
```
179174

180175

181176
#### Note

0 commit comments

Comments
 (0)