Question 33189 in React native Question posted in
The official React Native documentation can be found here.

How can i update my existing image in react native

well first i need to display the existing image that comes from API in react native.
then i need to update the existing image and replace with new picture.

Code:

 <FlatList
              data={filePath}
              keyExtractor={(item, index) => index}
              renderItem={({item}) => {
                setImageName(item.fileName);
                setImageType(item.type);
                setImageUri(item.uri);
                return (
                  <View>
                    <Image source={{uri: item.uri}} style={styles.imageStyle} />
                  </View>
                );
              }}
            />

button where i set my new picture

<GlobalButton
            onPress={() => {
              chooseFile('photo');
            }}
            text={'Add Image'}
          />

 const chooseFile = type => {
    let options = {
      mediaType: type,
      maxWidth: 300,
      maxHeight: 550,
      quality: 1,
    };
    launchImageLibrary(options, response => {
      if (response.didCancel) {
        showError('User cancelled camera picker');
        return;
      } else if (response.errorCode == 'camera_unavailable') {
        showError('Camera not available on device');
        return;
      } else if (response.errorCode == 'permission') {
        showError('Permission not satisfied');
        return;
      } else if (response.errorCode == 'others') {
        showError(response.errorMessage);
        return;
      }
      setFilePath(response.assets);
    });
  };

i get the image uri from API . i have showed it in return but it shows me two picture the existing one and new one

Tags:

2

Answers


  1. 0

    To update your screen with your data , you need to use state

    To understand how it works first refer this link so you can understand how it works and how you can use it

    https://reactnative.dev/docs/state.html

    After that you can check how flatlist work because as per your code , you are not much aware with react native ..

    FlatList accept array as data not object

    here you can refer documentation

    https://reactnative.dev/docs/flatlist

    Login or Signup to reply.
  2. 0

    well first you need to make a state and set it to true like this one

    const [newImageSelected, setNewImageSelected] = useState(false)

    when you pick a new image from image picker then set this state to
    true

    const chooseFile = type => {
    let options = {
      mediaType: type,
      maxWidth: 500,
      maxHeight: 500,
      quality: 1,
    };
    launchImageLibrary(options, response => {
      if (response.didCancel) {
        showError('User cancelled camera picker');
        return;
      } else if (response.errorCode == 'camera_unavailable') {
        showError('Camera not available on device');
        return;
      } else if (response.errorCode == 'permission') {
        showError('Permission not satisfied');
        return;
      } else if (response.errorCode == 'others') {
        showError(response.errorMessage);
        return;
      }
      setFilePath(response.assets);
      setNewImageSelected(true);
    });
  };

    then in return write set the condition if image is already existed
    then it only shows the one picture which you are getting from the. and
    when you select the new image the existing image replaced with the new
    one check the below code maybe it helps you:

    {newImageSelected ? (
              <FlatList
                data={filePath}
                keyExtractor={(item, index) => index}
                renderItem={({item}) => {
                  setImage(item.fileName);
                  setImageUri(item.uri);
                  setImageType(item.type);
                  return (
                    <View>
                      <Image
                        source={{uri: item.uri}}
                        style={styles.imageStyle}
                      />
                    </View>
                  );
                }}
              />
            ) : (
              <Image
                source={{uri: `existing image URL`}}
                style={styles.imageStyle}
              />
            )}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search