Cant get localSourceImage to load image from camera or gallery

I just ejected from Expo in order to activate this module and I can get the vanilla sketchpad example to show up in the app. Im still using ExpoKit, Using the ExpoKit image picker, and Im using the IOS emulator. I can get an image URI from the gallery or I can snap a photo from the non existant camera (produces a black image).

If I get an image from the gallery the URI is in the format “file://really/long/path/to/file.jpg” If I get an image from tha camera the URI is in the format “asset-library://asset.jpg&id=someId”

I cant get either one of these URIs to load into the sketch canvas. The sketch canvas is still functional it just does not load the image.

I have not had a chance to get this on a physical device yet, my results are through the ios emulator. To me possible issues may be:

• works on device but not emulator (havnt gotten it on a physical device yet)
• maby the expoKit URIs are different then Native URIs so it cant find the image
• my code is wrong

Any thoughts here?

Thanks, Michael

const srcImage = {
  filename: uriRetreivedFromCamera.jpg,
  directory: '', 
  mode: 'AspectFill'
}

Then somewhere in the JSX

<SketchCanvas
     style={{ flex: 1 }}
     strokeColor={'red'}
     strokeWidth={7}
     localSourceImage={srcImage}
 />

[bvodola]

@MichaelTaylor3D I was facing the same issue and maybe this will help:

Remove the file:// from your image URI retrieved from the camera:

uri.replace('file://', '')

If you take a look at the example code from this repo, https://github.com/terrylinla/react-native-sketch-canvas/blob/master/example/App.js#L37 he does exactly that.

[leonyhenn]

@maverickVision

async _pickImage() {
    let result = await ImagePicker.launchImageLibraryAsync({base64:true});
    if (!result.cancelled) {
      base64 = result.base64
      extension =  result.uri.split('.').pop();
      
      decodedImage = decode(base64);
      // console.log(decodedImage)
      var path = DocDir + '/TempFile';
      new_filename = path+"/sample_image."+extension
      console.log(new_filename)
      //write the file
      RNFS.mkdir(path).then((success) => {
        RNFS.writeFile(new_filename, base64, 'base64').then((success) => {
            if(Platform.OS == 'ios'){
              this.setState({ photoPath: new_filename });
            }else{
              this.setState({ photoPath: new_filename });  
            }
          }).catch((err) => {
            console.log(err.message);
          });
      }).catch((err) => {
        console.log(err.message);
      });
    }
  };

that was what I had. and in the Sketch section:

<View style={{ flex: 1, flexDirection: 'row' }}>
              <RNSketchCanvas
                localSourceImage={{ filename: this.state.photoPath, directory: null, mode: 'AspectFit' }}