profile
viewpoint

Ask questionsCant 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}
 />
terrylinla/react-native-sketch-canvas

Answer questions leonyhenn

Ok, I figured out a solution. I ll post it here in case someone like me stuck at this step.

Remember, you have already ejected!!! which means now you have access to all the powerful library in expo community such as react-native-fs.

My solution is, get the base64 of image, then use react-native-fs to store it in a temp folder anywhere in the filesystem, then reference it use react-native-fs which gives you a path that native component can recognize.

useful!

Related questions

Feature Request: Set background image from URL on canvas. - react-native-sketch-canvas hot 1
undefined is not an object (evaluating '_reactNative.UIManager.RNSketchCanvas.Constants') hot 1
Invariant Violation: requireNativeComponent: &#34;RNSketchCanvas&#34; was not found in the UIManager hot 1
UIManager['RNSketchCanvas'] is no longer supported hot 1
Feature Request: add the complete output of `sketchCanvas.getPaths()` to the canvas at once hot 1
Invariant Violation: requireNativeComponent: "RNSketchCanvas" was not found in the UIManager hot 1
Github User Rank List