How can i update my existing image in react native-CodePudding

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

CodePudding user response：

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}
              />
            )}

CodePudding user response：

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