'Save image to album' not working

[javfel94]

Hi, I'm testing my app on an Android device, and the functionality of saving the image to the phone's album is not working (after long-pressing the image). Is anyone else running into the same issue? In any case, is there a way of disabling the menu after long-pressing? I'm using Expo to develop the app

[ChrisLFieldsII]

I am experiencing the same on IOS

[lsirdevan]

This works just fine on iOS and Android.

The onSave prop won't automatically save the image. You'll have to import CameraRoll from react-native-community and save the image that way. Read over the following to import it correctly: https://github.com/react-native-community/react-native-cameraroll

Here's an example of how i'm using it in my app:

import React from "react";
import { ActivityIndicator, Modal, Alert } from "react-native";
import CameraRoll from "@react-native-community/cameraroll";
import ImageViewer from "react-native-image-zoom-viewer";

export default class Example extends React.Component {
    state = {
        image_index: 0,
        images: [],
        show_modal: false
    };

    constructor(props) {
        super(props);

        this._getImages();
    }

    _getImages = () => {
        // Make some external request to get images if needed... This is just an example
        let images = [
            {
                uri: "some uri",
                props: {
                    id: 1
                },
            },
            {
                uri: "some uri2",
                props: {
                    id: 2
                },
            }
        ];

        this.setState({ images });
    };

    _saveImage = uri => {
        let promise = CameraRoll.saveToCameraRoll(uri);

        promise
            .then(function(result) {
                Alert.alert(
                    "Success",
                    "Image Saved to Photo Gallery",
                    [
                        {
                            text: "OK"
                        }
                    ],
                    { cancelable: false }
                );
            })
            .catch(function(error) {
                Alert.alert(
                    "Error Saving Image",
                    error,
                    [
                        {
                            text: "OK"
                        }
                    ],
                    { cancelable: false }
                );
            });
    };

    render() {
        return (
            <Modal visible={this.state.show_modal} transparent={true}>
                <ImageViewer
                    imageUrls={this.state.images}
                    index={this.state.image_index}
                    enableSwipeDown
                    enablePreload
                    loadingRender={() => (
                        <ActivityIndicator
                            style={{
                                justifyContent: "center",
                                alignSelf: "center"
                            }}
                            size="large"
                            color="#FFFFFF"
                        />
                    )}
                    onSave={uri => this._saveImage(uri)}
                    onSwipeDown={() => this.setState({ show_modal: false })}
                    menuContext={{
                        saveToLocal: "Save Image",
                        cancel: "Cancel"
                    }}
                />
            </Modal>
        );
    }
}

[BruceSuperProgramer]

const saveImage = async uri => {
  RNFetchBlob.config({
    fileCache: true,
    appendExt: 'png',
  })
    .fetch('GET', uri)
    .then(res => {
      CameraRoll.saveToCameraRoll(res.data, 'photo')
        .then(res =>
          Alert.alert(
            'Success',
            'Image Saved to Photo Gallery',
            [
              {
                text: 'OK',
              },
            ],
            {cancelable: false},
          ),
        )
        .catch(err =>
          Alert.alert(
            'Error Saving Image',
            error,
            [
              {
                text: 'OK',
              },
            ],
            {cancelable: false},
          ),
        );
    })
    .catch(error =>
      Alert.alert(
        'Error Saving Image',
        error,
        [
          {
            text: 'OK',
          },
        ],
        {cancelable: false},
      ),
    );
};

<ImageViewer
        ref={n => {
          imageViewer = n;
        }}
        enablePreload={true}
        useNativeDriver={true}
        onSave={uri => saveImage(uri)}
        imageUrls={images}
      />

onSave will let you write custom code for image store operation. For the image store operation you can use rn-fetch-blob like what I did.

[WangZiXiao-ChenDu]

因为 saveToLocal 方法中 if (!this.props.onSave) { CameraRoll.saveToCameraRoll(this.props.imageUrls[this.state.currentShowIndex || 0].url); this!.props!.onSaveToCamera!(this.state.currentShowIndex); } else { this.props.onSave(this.props.imageUrls[this.state.currentShowIndex || 0].url); } !this.props.onSave有默认值所以此条件永远不满足，导致保存失败。临时解决方案 onSave值设置null 可以正常运行