If you place a SketchCanvas in a ScrollView, drawing vertical lines causes problems, i.e. the canvas stops drawing your line and instead scrolls vertically.

I'm on Android 7, Samsung Galaxy A5.

addpath dosenot work in ios , can you help me ?

while drawing the initial path on an empty canvas, if your original line creates a circle, and the path crosses its origin, it can in some cases drop rendered frames when you 'release' your finger and end your current path.

however, if the canvas is re-drawn (i.e. if you begin another line), it self-corrects immediately.

in the following video demonstration, i use black for the first path, and pink for the second path: https://youtu.be/oBBSGfU941k

when i release my finger from the first path's drawing, you will see much of the drawing disappear. the moment i begin the second (pink) path, you'll notice everything re-renders as expected immediately.

Hi, thanks for this awesome library! It's got a lot of the features I need for a little project I am working on.

Would it be difficult to load an existing image to fill the canvas, which you can then draw on top of?

I've tested the addPath-function. But I'm a bit unsure how to convert an SVG to the format that function takes as a parameter.

The goal here should be to only re-render the small part of the canvas that has changed (been drawn on) between each frame.

Here are two helpful blog posts about smoothing (and other things) on Android:

https://medium.com/square-corner-blog/smooth-signatures-9d92df119ff8 (see the "Surgically Invalidate" section)

https://medium.com/square-corner-blog/smoother-signatures-be64515adb33 (see the "Responsiveness" section)

Note that the same principles apply to iOS - but the methods will differ, slightly. For example, in one project I used the UIView object's setNeedsDisplayInRect: and specified only the rect/space representing the space between the last two touches to be re-rendered.

I would like to write the image to a networked disk rather than local device. Could you expose a method to output a base64 encoded version of the image please?

How can I get the URI to the saved image?

Currently i'm using RN-sketch-canvas version 0.6.0. In the docs there are mentioned a lot of methods that can be used. Yet 'getBase64()' is missing in the index.js file, therefore I cannot use this method. I've linked the project react-native link.

RN Version: 0.55.4
RN-sketch-canvas version: 0.6.0

Import method 1:

import Canvas from '@terrylinla/react-native-sketch-canvas';

Import method 2:

import { SketchCanvas } from '@terrylinla/react-native-sketch-canvas';

Am I missing something?

I do not know why this issue is coming when I open android studio.

But when I run the app it works fine. Why am I seeing this error ??

¿It's possible start component with something printed?
For example, when componentdidmount you put some references, and then, the component appears with something draw.

You understand me?

Thank you for this awesome library. It works perfectly on Android.

On iOS simulator, it crashes when I try to save the SketchCanvas using save() method and returns an empty canvas base64 with getBase64 callback function. Both these features work on android though. I am not getting any other error message in the debugger.

I am using react-native 0.52.0

Using the following component on React Native 0.52:

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

Tapping on the canvas does not draw a dot. Instead, nothing is drawn at all.

The project name '@terrylinla/react-native-sketch-canvas' contains at least one of the following characters: [ , /, , :, <, >, ", ?, *, |]. This has been deprecated and is scheduled to be removed in Gradle 5.0. Set the 'rootProject.name' or adjust the 'include' statement (see https://docs.gradle.org/4.4/dsl/org.gradle.api.initialization.Settings.html#org.gradle.api.initialization.Settings:include(java.lang.String[]) for more details).

I was forced to update Gradle to version 4.4 due to breaking changes in react-native-firebase (a very popular project).

i want to use it on the photo, but i can't figure out how to add a background map for the canvas. How can i make it? Thx.

Using an empty React Native project (0.52 or 0.51), this code will not allow you to draw in the canvas:

// DOES NOT WORK
export default class App extends Component<{}> {
  render() {
    return (
      <TouchableWithoutFeedback style={{flex: 1}}>
        <View style={{flex: 1}}>
          <SketchCanvas
            style={{ flex: 1}}
            strokeColor={'red'}
            strokeWidth={7}
          />
        </View>
      </TouchableWithoutFeedback>
    );
  }
}

It isn't clear to me exactly why, but I suspect the SketchCanvas is not receiving touches at all - or else perhaps evaluating them and rejecting them.

Interestingly, removing the child of the TouchableWithoutFeedback Component fixes the problem. See:

// WORKS
export default class App extends Component<{}> {
  render() {
    return (
      <TouchableWithoutFeedback style={{flex: 1}}>
        {/* <View style={{flex: 1}}> */}
          <SketchCanvas
            style={{ flex: 1}}
            strokeColor={'red'}
            strokeWidth={7}
          />
        {/* </View> */}
      </TouchableWithoutFeedback>
    );
  }
}

Excellent project otherwise! Excited to understand this behavior (or see a fix) and start using it. :)

I mean this part of RNSketchCanvasManager:

    if (!self.sketchCanvasView) {
        self.sketchCanvasView = [[RNSketchCanvas alloc] initWithEventDispatcher: self.bridge.eventDispatcher];
    }

I'd like to remove the if check, but not sure if it's good. I'll explain my use case below.

I'm utilizing the SkecthCanvas component to implement something like a sketchbook. And I may have several sketchbooks available at the same time, but only 1 of them is active on the screen. I'd like all of them to be independent and have their own strokes, of course. However, if I close number 1 and open number 2, the strokes of number 1 is still showing on number 2, obviously it's because there is only 1 true canvas. That's why I'm thinking of creating new canvas every time it's called.

So if anyone or the author would give some advice it would be appreciated, thanks.

Hi!

How can I link this library manually on iOS? It works for me in Android but not in iOS.

Thank you!

Nothing to request or complain about. :)

Hi,

I am trying to implements this library in an iOS app. I have already used it on an Android app but when i use: react-native link @terrylinla/react-native-sketch-canvas

It returns to me the next error:

rnpm-install info Android module @terrylinla/react-native-sketch-canvas is already linked
rnpm-install info Linking @terrylinla/react-native-sketch-canvas ios dependency
rnpm-install WARN ERRGROUP Group 'Libraries' does not exist in your Xcode project. We have created it automatically for you.
rnpm-install ERR! Something went wrong while linking. Error: Cannot read property 'children' of null
Please file an issue here: https://github.com/facebook/react-native/issues

Can anyone help me?

Thanks!!

I'd like to use this module for capturing signatures, but I'd like the signatures themselves to look more 'realistic'. One way is to change the stroke width based on velocity.

Is there away to achieve this with your module?

How we can save the images to FIrebase (or any external server) ?

So, I tried JSON.stringify(this.canvas.getPaths()) and then sent it to server and then storing it in the.state.checkpath.
But,

              <SketchCanvas
                ref={ref => {
                  this.canvas = ref;
                  cpath = JSON.parse(this.state.checkpath);
                  console.log(check);
                  console.log(JSON.parse(this.state.checkpath));
                  this.canvas.addPath(check);
                }}

Does not seem to work, it's giving me data.path.id error

Error in Chrome debugger when opening in React Native 0.51:

Module RNSketchCanvasManager requires main queue setup since it overrides init but doesn't implement requiresMainQueueSetup. In a future release React Native will default to initializing all native modules on a background thread unless explicitly opted-out of.

onSketchSaved can not return filepath in android and also in success it return false

onSketchSaved={(success, filePath) => {
    console.log('onSketchSaved', 'filePath: ' + filePath);
 }}

I haven't been able to get this project working in android.
On iOS I've experience no issue, however on android I simply get a red box surrounding where the canvas would be. I've tried uninstalling the library, clearing all caches, etc. I've also unlinked and re-linked the library with no luck.
Has anybody else experienced this and found a fix?

Android shows a true red, while iOS shows an odd light orange or pink.

Likewise, iOS can consume '000000' for black, but Android cannot (results in Unknown color exception)

It does appear that '#123456 hex values are consumed properly by both (note that it contains the # char)

although projects can handle this themselves by de-optimizing the default React Native Android package, this is probably best solved with a version bump on this library

i am new to this library fantastic work but when i want to load image as background is not working.

Kindly suggest if i am doing wrongly

localSourceImagePath="../assets/images/splash/splash2.png"

thanks & Regards
gmchaturvedi

Firstly, thanks for writing this component.

I'd like to control the UI side of things myself and just make use of SketchCanvas but I'm struggling to understand how I can apply previous paths.

If I store an array of paths (sketch) as described in the docs and have the following in my app:

componentDidMount() {
  sketch.map((movement) => {
    console.log('drawing', movement.path)
    this.refs.canvas.addPath(movement)
  })
}

I would expect the canvas to display them but it remains blank. It could be that I have to somehow invalidate the render so it redraws, but I'm unsure if what I'm trying to accomplish is supported.

Getting the following issue on Android, with react-native 0.65:

• drawing canvas
• saved images/data

currently does not respect higher DPI - e.g. the lines drawn are 'smaller' than they should be.

@terrylinla - This was a shortcoming of my previous 'retina' PR; I plan to fix this soon & will submit a PR to you if you don't beat me to it.

Typical implementations on iPhone use a quadratic curve implementation, which requires that the two previous points to be available (which I think we have stored in an array, fortunately!).

While a smooth line may not be desirable in all use cases, we should still have support for it (e.g. via Prop) - this is preferred certainly for any sort of 'signature'-type component, but also probably for the majority of free drawing applications.

@terrylinla - I have some experience with this on iPhone, and will submit a PR within the next few weeks if you don't beat me to it. Haven't looked into Android before.

I am trying to put multiple on the same screen, but seeing weird behavior. Does it support having multiple?

When compiling the project on React Native 0.51, I see:

/Users////node_modules/@terrylinla/react-native-sketch-canvas/ios/RNSketchCanvas/RNSketchCanvas/RNSketchCanvas.m:148:27: 'sendInputEventWithName:body:' is deprecated: Use RCTDirectEventBlock or RCTBubblingEventBlock instead [-Wdeprecated-declarations]

   [_eventDispatcher sendInputEventWithName:@"topChange"...

Can you add the eraser function，such as CGContextSetBlendMode(context, kCGBlendModeClear) in iOS

> Configure project :@terrylinla/react-native-sketch-canvas
WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation' and 'api'.
It will be removed at the end of 2018. For more information see: http://d.android.com/r/tools/update-dependency-configurations.html
WARNING: The specified Android SDK Build Tools version (25.0.0) is ignored, as it is below the minimum supported version (27.0.3) for Android Gradle Plugin 3.1.2.
Android SDK Build Tools 27.0.3 will be used.
To suppress this warning, remove "buildToolsVersion '25.0.0'" from your build.gradle file, as each version of the Android Gradle Plugin now has a default version of the build tools.

When rendering <SketchCanvas /> directly (not via RNSketchCanvas), I see the following

Invariant Violation: Native component for "RNSketchCanvas" does not exist

This error is located at:
    in RNSketchCanvas (at SketchCanvas.js:206)
    in SketchCanvas (at postSketchInput.js:45)
    in RCTView (at View.js:112)
...

Implementation code is:

...

// sketch view module
import { SketchCanvas } from '@terrylinla/react-native-sketch-canvas';

export default class PostSketchInput extends Component {

  render() {
    const width = Dimensions.get('window').width - PostInputPadding * 2
    return (
      <View style={[styles.container, styles.shadow, {
        height: width,
        width: width
      }]}>
        <SketchCanvas
          style={styles.input}
          strokeColor={'red'}
          strokeWidth={7}
        />
      </View>
    )
  }
}

...

I am trying to manage the position of the strokes but the onStrokeChanged method don't pass any value. It's just null. Is there any other way to get the drawn position?

Crash on iPhone is as follows:

*** Terminating app due to uncaught exception 'RCTFatalException: Unhandled JS Exception: undefined is not an object (evaluating 'h.View.propTypes.style')', reason: 'Unhandled JS Exception: undefined is not an object (evaluating 'h.View.prop..., stack:
<unknown>@668:5435
a@2:837
<unknown>@667:245
a@2:837
<unknown>@666:135
a@2:837
<unknown>@662:604
a@2:837
<unknown>@13:349
a@2:837
<unknown>@12:24
a@2:837
<unknown>@2:309
global code@711:9
'

...and on Android:

com.facebook.react.common.JavascriptException: undefined is not an object (evaluating 'h.View.propTypes.style'), stack:
<unknown>@664:5435
a@2:850
<unknown>@2:392
t@2:399
<unknown>@663:245
a@2:850
<unknown>@2:392
t@2:399
<unknown>@662:135
a@2:850
<unknown>@2:392
t@2:399
<unknown>@658:604
a@2:850
<unknown>@2:392
t@2:399
<unknown>@13:349
a@2:850
<unknown>@2:392
t@2:399
<unknown>@12:24
a@2:850
<unknown>@2:322
t@2:399
global code@707:9
at com.facebook.react.modules.core.ExceptionsManagerModule.showOrThrowError(ExceptionsManagerModule.java

in iOS its working but sadly not on android with "react-native run-android"

code:
...
import { SketchCanvas } from '@terrylinla/react-native-sketch-canvas';
...
render() {
...
<SketchCanvas
ref={ref => this.canvas = ref}
style={{ flex: 1 }}
strokeColor={'red'}
strokeWidth={7}
/>
...
}

forced to use the built-in Prop on the SketchCanvas component in the meantime

Use case: I have an "Undo" button, and I want to disable it when there are 0 strokes on the screen. Using onStrokeStart(), I can tell when the initial strokes begin, but if the canvas reverts to 0 strokes (via undo(), or clear() or any other similar action), there is no callback or event to monitor.

Imagine you save a drawing on a 200 x 200 pixel canvas, but you want to display it on a different device that has e.g. 500 x 500 pixels as its canvas (or 322 x 322 pixels, or any other arbitrary size). How do you achieve this without up-scaling an image?

I propose we store each line as a 'percentage' or 'proportion' of the width of the canvas.

Using this approach, each x,y coordinate is no longer stored as an actual pixel-wise coordinate, but instead as a representation of its position within the canvas where 0 is equal to the origin of each axis, and 1 is equal to the terminus of each axis (and 0.5 is equal to the mid-point).

These float or coordinate values would require a fine level of detail in practice, because of course we want to be very precise with our coordinates, e.g. imagine an x,y coordinate of 0.251123123, 0.5000000000123 - this coordinate would be located just over 1/4th of the canvas along the x axis, and just over 1/2 of the canvas on the y axis. All coordinates would then be between 0,0 and 1,1.

You might imagine a line that gos straight across the x-axis at 1/3 of the way 'down' the y-axis being represented as:

[
  {0.0, 0.333333333},
  {0.001, 0.333333333},
  {0.003, 0.333333333},
  {0.005, 0.333333333},
  {0.008, 0.333333333},
  {0.01, 0.333333333},
  {0.012, 0.333333333},
  {0.013, 0.333333333},
  {0.014, 0.333333333},
  {0.015, 0.333333333},
  {0.016, 0.333333333},
]

(These are just example values; actual snapshots of screen touches would not look like this.)

This feels (to me) like the best way to achieve a flexible, extensible coordinate system that can be used as the data source for a drawing across multiple canvas sizes while maintaining full (or very near full) fidelity. The intent for most systems would then be to store & re-render these lines instead of an actual .png or base64 representation of the lines.

Is there any way to prevent event bubbling? I am currently using this with in a ScrollView thats within a TabView so if I try and draw either vertically or horizontally it seems as if though the ScrollView/Tab takes over. Any way of preventing event bubbling so that when I am drawing within the canvas the ScrollView/Tab wont gent any events?

This is probably related to #57

In iOS, when I change the device orientation to landscape, my drawings are only visible on one half of the canvas.

I know the canvas is taking up the whole area, because I made the background colour of the SketchCanvas red.

It seems like the canvas size isn't being updated on rotation. The weird part is that if I redraw the paths from the landscape canvas onto another canvas, it shows the full drawing.

I have 3 canvas in one screen and have each ref saved in an array of canvas variable.
After drawing and clicking the "Done" button, the result of each base64 result turns out to be the same, or in my case, the last canvas that was mounted.

Example:

class CanvasExample extends Component {
    constructor(props) {
        super();
        this.state = {
            ...props,
            canvas: []
        }
    }

    HandleDone = () => {
        this.state.canvas.map(canvas => {
            canvas.getBase64('jpg', false, (err, result) => {
                if (err) {
                    return console.log(err);
                }

                return console.log(result);
            })
        });

        let canvas1 = this.getSignatureRender(this.state.canvas[0]);
        let canvas2 = this.getSignatureRender(this.state.canvas[1]);
        let canvas3 = this.getSignatureRender(this.state.canvas[2]);

        Promise.all([canvas1, canvas2, canvas3]).then(values => {
            console.log(values);
        }).catch(error => console.log(error));
    };

    getSignatureRender(canvas) {
        return new Promise((resolve, reject) => {
            canvas.getBase64('jpg', false, (err, result) => {
                if (err) {
                    return reject(err);
                }

                return resolve(result);
            })
        })
    }

    render() {
        return (
            <Container>
                <SketchCanvas
                    ref={ref => this.state.canvas[0] = ref}
                    style={{ alignItems: 'center', justifyContent: 'center', width: '100%', height: 220, backgroundColor: '#e9e9e9' }}
                    strokeColor={'black'}
                    strokeWidth={2}
                />

                <SketchCanvas
                    ref={ref => this.state.canvas[1] = ref}
                    style={{ alignItems: 'center', justifyContent: 'center', width: '100%', height: 220, backgroundColor: '#e9e9e9' }}
                    strokeColor={'black'}
                    strokeWidth={2}
                />

                <SketchCanvas
                    ref={ref => this.state.canvas[2] = ref}
                    style={{ alignItems: 'center', justifyContent: 'center', width: '100%', height: 220, backgroundColor: '#e9e9e9' }}
                    strokeColor={'black'}
                    strokeWidth={2}
                />
                <Button onPress={() => this.HandleDone()} block style={{ borderRadius: 0, backgroundColor: '#2babe2' }} />
            </Container>
        );
    }
};

Thank you!

Edit:
getPaths() returns the correct results but not getBase64