Image Picker in React-Native

Pick and Click Images easiest way possible…

Let's make it easy!

Applying image picker functionalities to your native app is a hardsome task let alone in react-native, but there are always some cool libraries to help us out and I've found one for you. So…

alright…

We're gonna use react-native-image-picker, it provides an ImagePicker component in which you can set the options like the title of the picker, Your custom Buttons(Name and title of the button) and storage options like skipBackup or path.We're gonna make it as simple as possible. First thing first let's install the library

yarn add react-native-image-picker
# or
npm install react-native-image-picker

Now comes the linking part if you're on Rn< 0.60

you're gonna have to link library just run following command on same terminal

react-native link react-native-image-picker

and if you're above 0.60 for iOS side you'll have to install pods.

cd ios && pod install && cd ..

Okay, now don't forget to re-run your project or restart your packager.

Now I'll just make an Avatar real quick

// in your return statement
<View style={{
alignSelf: 'center',
marginTop: 35,
}}>
<Image
style={{ height: 100, width: 100, borderRadius: 50, }}
source={fileUri ? { uri: fileUri } : // if clicked a new img
require('images/bg.jpg')} //else show random
/>
<TouchableOpacity style={styles.addPictureIcon} onPress={
chooseImage
}>
<Icon name="camera" size={20} />
</TouchableOpacity>
</View>
//later on in your file
const styles = StyleSheet.create({
addPictureIcon: {
height: 30,
width: 30,
backgroundColor: Color.WHITE,
borderRadius: 50,
position: 'absolute',
left: 65,
top: 75,
justifyContent: 'center',
alignItems: 'center',
alignItems: 'center',
}

We've something like this now..

Now let's make it functional

var [fileUri, SetFileuri] = useState()

above we created a state to keep uploaded URI.

//on top of your return statement somewhere add below func
const chooseImage = () => {
let options = {
title: 'Select Avatar', 
cameraType: 'front',
mediaType: 'photo' ,
storageOptions: {
skipBackup: true,
path: 'images',
},
};
ImagePicker.showImagePicker(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
alert(response.customButton);
} else {
SetFileuri(response.uri) //update state to update Image
}
});
}

This little function above handled everything for you. It'll pop a selection menu like so:

Android

On response you can get the object and do whatever you need to that in all cases.

Now to customize, you can Change title and buttons label texts and can even add a custom button to upload image from external sources like facebook and many more.

It have following props:

title?: string;

cancelButtonTitle?: string;

takePhotoButtonTitle?: string;

chooseFromLibraryButtonTitle?: string;

chooseWhichLibraryTitle?: string;

customButtons?: ImagePickerCustomButtonOptions[];

cameraType?: ‘front’ | ‘back’;

mediaType?: ‘photo’ | ‘video’ | ‘mixed’;

maxWidth?: number;

maxHeight?: number;

quality?: number;

videoQuality?: ‘low’ | ‘medium’ | ‘high’;

durationLimit?: number;

rotation?: number;

allowsEditing?: boolean;

noData?: boolean;

storageOptions?: ImagePickerStorageOptions;

permissionDenied?: ImagePickerPermissionDeniedOptions;

tintColor?: number | string;

You can customise it however you like.

Storage option further have following props:

skipBackup?: boolean;

path?: string;

cameraRoll?: boolean;

waitUntilSaved?: boolean;

privateDirectory?: boolean;

I mean that's pretty much all you can need right?

Woah man, that's all for today. If you like the article drop a clap and if you don't ping me so I can help you. :D