React Native Image Picker

-

Run the following command with your project directory

npm install react-native-image-picker --save

We are using a Native API Camera and also going to choose the image from the gallery so we need to add some permission to the AndroidManifest.xml file.

<uses-permission android:name="android.permission.CAMERA"/>

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

Code for Image Picker in React Native

open App.js in any code editor and replace the code with the following code

App.js

import React,{Component} from 'react';
import {
    StyleSheet,
    View,
    Button,
    Image,
    Text
} from 'react-native';
import ImagePicker from 'react-native-image-picker';

export default class App extends Component {
    constructor(props) {
    super(props);
        this.state = {
            fileUri: ''
        };
  }

  launchImageLibrary = () => {
    let options = {
        storageOptions: {
            skipBackup: false,
            path:'images'
        }
    };
    ImagePicker.showImagePicker(options,(response) => {
        if(response.didCancel) {
            console.log('user cancelled image picker');
        } else if (response.error) {
            console.log('image picker error',response.error);
        } else if (response.customButton) {
            console.log('user tapped custom button ',response.customButton);
        } else {
            const source = { uri: response.uri};
            this.setState({fileUri: response.uri})
        }
    })
  }

  renderFileUri() {
    if(this.state.fileUri) {
        return(
        <View style={styles.imgContainer}>
            <Image
                style={styles.img}
                source={{ uri: this.state.fileUri}}
            />
        </View>
        )
    } else {
        return(
            <View style={styles.imgContainer}>
                <Image
                    style={styles.img}
                    source={require('./assets/download.png')}
                />
            </View>
          )
        }
  }

    render() {
        return (
            <View style={styles.container}>
                <Button title="select image" onPress={()=>this.launchImageLibrary()}/>
                {this.renderFileUri()}
            </View>
        );
    }
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 10
    },
    imgContainer: {
        alignItems: 'center',
        marginTop: 10
    },
    img: {
        width: 150,
        height: 150,
        borderColor: 'black',
        borderWidth: 1
    }
});    

Comments

Post a Comment

Popular posts from this blog

React Native Floating Label Textinput

-
Image
Run the following command with your project directory           npm i react-native-floating-label-input Code for  Floating   Label Text input in React Native Open App.js in any code editor and replace the code with the following code App.js import React,{Component} from 'react'; import {   StyleSheet,   View,   Button,   Image,   Text } from 'react-native'; import { FloatingLabelInput } from 'react-native-floating-label-input'; export default class App extends Component {   constructor(props) {     super(props);     this.state = {       email: ' ',        password: ' '      };   }   render() {     const {          email,          password      } = this.state;     return (       <View style={styles.container}>            <FloatingLabelInput              label="Email"               containerStyle={{margin: 5}}              value={email}             onChangeText={text => this.setState({email: text})}            />          
Read more

React Native Tab View

-
Image
 Run the following command with your project directory     npm i react-native-tab-view      npm i react-native-gesture-handler react-native-reanimated code for tab view in react native      open App.js in any code editor and replace the code with the following code App.js import React,{ Component } from 'react'; import {     StyleSheet,     View,      Dimensions } from 'react-native'; import { TabView, SceneMap } from 'react-native-tab-view'; export default class App extends Component {     constructor(props) {          super(props);          this.state = {               index: 0,               routes: [                    { key: 'first' , title: 'First' },                    { key: 'second' , title: 'Second'}               ]          }     }      renderScene = ({ route }) => {           switch (route.key) {                case 'first':                     return <View style={[styles.scene, { backgroundColor: '#f
Read more

React Native Modal box

-
Run the following command with your project directory     npm i react-native-modalbox Code for modal box      Open index.js and replace the code with the following code index.js  import React,{Component} from 'react'; import { View, Button } from "react-native"; import styles from './styles'; import ModalBox from "./ModalBox"; class Account extends Component {     closePhoto = () => {         this._modalPhoto.close();     };     openPhoto = () => {         this._modalPhoto.open();     };     render() {         return (             <View style={styles.container}>                 <Button title="open" onPress={this.openPhoto}></Button>                 <Login ref={(com) => (this._modalPhoto = com)} />             </View>         );     } } export default Account; ModalBox.js import React, { Component, useState } from "react"; import { Text, TouchableOpacity } from "react-native"; import
Read more