TakeSnapshotAsync and Invalid Filesystem URI

#1

Hi,

I would like to migrate the ReactNativeKatas repo Expo to make it easy to get started learning React Native. I’ve found the more than year old clone of ReactNativeKatas done by expo itself, but as its quite outdated, I see a lot of value in a more recent version.

Thanks to the above expo code, I managed to create the screenshots, and using the Filesystem APIs I guess my code should work, but strangely the images taken seem to be searched in some weird locations.

Here is the main code from my snapshot.js version:

export default (Subject)=>{
  return class extends Component{
    componentDidMount(){
      const reference = this.props.reference
      console.log("reference file is", reference)
      requestAnimationFrame(()=>{
        if(!reference){
          const refpath = `file://${Subject.displayName}.ref.png`
          console.log(`snapshotting ${refpath}`)
          Expo.takeSnapshotAsync(this._view, {format: 'png', result: 'file'})
          .then(path => {
              FileSystem.deleteAsync(refpath, {idempotent: true})
                  .catch(()=>{})
                  .then(FileSystem.moveAsync({from: path, to: refpath}))
                  .then((success)=>{
                    this.props.onSnapshot(refpath)
              });
          })
          .catch((err)=>{
             console.log("Error in saving reference snapshot", err)
          })
        } else {
          const targetpath = `file://${Subject.displayName}.png`
          console.log(`snapshotting ${targetpath}`)
          Expo.takeSnapshotAsync(this._view, {format: 'png', result: 'file'})
          .then(path=>FileSystem.deleteAsync(targetpath, {idempotent: true})
                          .catch(()=>{})
                          .then(FileSystem.moveAsync({from: path, to: targetpath}))
                          .then((success)=>{
                            Promise.all([
                              FileSystem.readAsStringAsync(reference),
                              FileSystem.readAsStringAsync(targetpath),
                            ]).then(([refdata, imgdata])=>{
                              this.props.onCompared(imgdata==refdata)
                            }).catch((err)=>{
                              console.log('error', err)
                            })
                          }))
          .catch((err)=>{
             console.log("Error in compare snapshot", err)
          })
        }
      })
    }
    render(){
      return (
        <View
          ref={view => { this._view = view; }}
          style={{flex: 1, backgroundColor: '#fff'}}>
          <Subject />
        </View>
      );
    }
  }
}

and the logs from XDE

00:05:08
error [Error: Invalid Filesystem URI ‘file://FillAll.ref.png’, make sure it’s in the app’s scope.]
00:05:10
Possible Unhandled Promise Rejection (id: 0):
Error: Invalid Filesystem URI ‘file:///data/user/0/host.exp.exponent/cache/ReactNative_snapshot_image_-251325252.png’, make sure it’s in the app’s scope.
createErrorFromErrorData@http:// packager.ms-y4e.nagyv.reactnativekatas.exp.direct:80/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&minify=false:1893:24
http:// packager.ms-y4e.nagyv.reactnativekatas.exp.direct:80/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&minify=false:1847:49
__invokeCallback@http:// packager.ms-y4e.nagyv.reactnativekatas.exp.direct:80/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&minify=false:2188:21
http:// packager.ms-y4e.nagyv.reactnativekatas.exp.direct:80/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&minify=false:2016:32
_guard@http:// packager.ms-y4e.nagyv.reactnativekatas.exp.direct:80/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&minify=false:2126:11
invokeCallbackAndReturnFlushedQueue@http:// packager.ms-y4e.nagyv.reactnativekatas.exp.direct:80/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&minify=false:2015:19
invokeCallbackAndReturnFlushedQueue@[native code]
00:05:10
Possible Unhandled Promise Rejection (id: 1):
Error: Invalid Filesystem URI 'file:///data/user/0/host.exp.exponent/cache/ReactNative_snapshot_image
-1129702449.png’, make sure it’s in the app’s scope.
createErrorFromErrorData@http:/ /packager.ms-y4e.nagyv.reactnativekatas.exp.direct:80/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&minify=false:1893:24
http:// packager.ms-y4e.nagyv.reactnativekatas.exp.direct:80/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&minify=false:1847:49
__invokeCallback@http:/ /packager.ms-y4e.nagyv.reactnativekatas.exp.direct:80/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&minify=false:2188:21
http:// packager.ms-y4e.nagyv.reactnativekatas.exp.direct:80/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&minify=false:2016:32
__guard@http:// packager.ms-y4e.nagyv.reactnativekatas.exp.direct:80/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&minify=false:2126:11
invokeCallbackAndReturnFlushedQueue@http:// packager.ms-y4e.nagyv.reactnativekatas.exp.direct:80/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&minify=false:2015:19
invokeCallbackAndReturnFlushedQueue@[native code]

From the logs it’s clear that the snapshot succeeded, but still there is this nasty error. Where does it come from? How could I get rid of it?