React Native Expo Image Saving Attempt: TypeError: Null is not an object

Question

I'm trying to get an image to save to my device. I am usint react-native-view-shot to capture a component and react-native-community/cameraroll to save it.

I am getting an error:

[Unhandled promise rejection: TypeError: null is not an object (evaluating '_nativeInterface.default.saveToCameraRoll')]
* http://172.16.17.76:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:152104:40 in save
* http://172.16.17.76:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:150956:45 in <unknown>
- node_modules/react-native-view-shot/src/index.js:231:31 in ViewShot#onCapture
- node_modules/react-native-view-shot/src/index.js:214:9 in firstLayoutPromise.then.then$argument_0
- node_modules/promise/setimmediate/core.js:37:14 in tryCallOne
- node_modules/promise/setimmediate/core.js:123:25 in setImmediate$argument_0
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:146:14 in _callTimer
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:194:17 in _callImmediatesPass
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:458:30 in callImmediates
* [native code]:null in callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:407:6 in __callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:143:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:142:17 in __guard$argument_0
* [native code]:null in flushedQueue
* [native code]:null in invokeCallbackAndReturnFlushedQueue

But according to the GitHub page, saveToCameraRoll is indeed a function (https://github.com/react-native-community/react-native-cameraroll). This is my code:

  import React, { Component } from 'react';
  import { ScrollView, StyleSheet} from 'react-native';
  import { ExpoLinksView } from '@expo/samples';
  import ViewShot from "react-native-view-shot";
  import CameraRoll from "@react-native-community/cameraroll";

  export default class LinksScreen extends Component {
      onCapture = uri => {
          console.log("do something with ", uri);
          CameraRoll.saveToCameraRoll(uri);
      }   
      render(){
    return (
      <ScrollView style={styles.container}>
          <ViewShot onCapture={this.onCapture} captureMode="mount">
              <ExpoLinksView />
          </ViewShot>
      </ScrollView>
    );  

   }
  }

  LinksScreen.navigationOptions = { 
    title: 'Links',
  };

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      paddingTop: 15, 
      backgroundColor: '#fff',
    },  
  });

Thanks for the help!

Answer 1

Wrap your image component in TouchableOpacity and linked a function to check platform.Make sure you are using this exact version of cameraroll. Because latest release has some issues "@react-native-community/cameraroll": "^1.0.3",

import CameraRoll from "@react-native-community/cameraroll";

 <TouchableOpacity
    style={{ flex: 1, zIndex: 1 }}
    onLongPress={this.handlerLongClick}
  >
   <CustomImage
      source={{ uri: this.props.navigation.state.params.url }}
      style={{ height: Style.DEVICE_HEIGHT, width: Style.DEVICE_WIDTH }}
  />
</TouchableOpacity>

 handlerLongClick() {
    let url = 'Your image url generated by view shot package';
    if (Platform.OS === "ios") {
      CameraRoll.saveToCameraRoll(url);
    } else {
      this.saveVideoAndroid();
    }
  }

saveVideoAndroid() {
    Permissions.request("storage").then(response => {
      if (response === "authorized") {
        this.download(
          'Your URL',
          new Date().getTime()
        );
      }
    });
  }