Search code examples
javascriptreact-nativeconsole.logreact-native-image-pickerreact-native-image

Selected image update on Avatar R.N Image Picker


Hello guys I'm Using React native Image Picker I able to select image from android library but after selection Im not able to update on my Avatar profile[Image]

After select Image here is my console.log

responseponse = {"assets": [{"fileName": "rn_image_picker_lib_temp_01a3684e-c92d-47af-957a-d81ded046c65.png", "fileSize": 22968, "height": 2340, "type": "image/png", "uri": "file:///data/user/0/com.testappimagepicker/cache/rn_image_picker_lib_temp_01a3684e-c92d-47af-957a-d81ded046c65.png", "width": 1080}]}

App.js

import { Icon, Avatar } from "@rneui/themed";
import React, { useState, useEffect } from "react";
import { launchImageLibrary } from "react-native-image-picker";
import {
  Button,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  View,
  KeyboardAvoidingView,
} from "react-native";

export default function ImagePickerExample(props) {
  const [image, setImage] = useState("../../assets/image/xyz.png");

  openImageGallery = () => {
    launchImageLibrary({ noData: false }, (response) => {
      console.log('responseponse = ', response);
    });
  }
  return (
    <SafeAreaView>
      <ScrollView>
        <View style={styles.container}>
          <KeyboardAvoidingView>
            <View>
              <View
                style={{
                  flexDirection: "row",
                  justifyContent: "space-around",
                  marginBottom: 20,
                }}
              >
                <Avatar
                  size={150}
                  rounded
                  source={{ uri: image }}
                  containerStyle={{ backgroundColor: "grey" }}
                >
                  <Avatar.Accessory size={30}
                    onPress={() => { openImageGallery() }}
                  />
                </Avatar>
              </View>
            </View>
          </KeyboardAvoidingView>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({

});

Solution

  • Try this,

      const openImageGallery = () => {
        launchImageLibrary({ noData: false }, (response) => {
          setImage(response.assets[0].uri);
        });
      }