jgrancher / react-native-sketch

🎨 A React Native <Sketch /> component for touch-based drawing.

Hi there 👋

My name is Jeremy (or "Jezza" 🇦🇺), and I am a freelance web developer currently helping Userkind developping fully-fledged marketing & e-commerce websites with headless CMSs like Sanity or Builder.io. I previously worked on maintaining BigW's storefront, and before that I worked @ Publicis, Nightjar, Thinkmill, ustwo).

😍 I love working with...

• TypeScript, React.js & Next.js
• SCSS, Tailwind & CSS-in-JS libraries like Emotion
• Shopify & Headless CMSs like Contentful, Sanity, Builder.io
• CSS Animations, GSAP, React-Spring & Framer Motion
• Sketch & Figma (Yes, I like design tools as well!)

✅ I have worked on these projects...

• With Marmalade: full website built with Next.js, Framer Motion and the Builder.io CMS.
• Swimming Australia: website built with Next.js & headless Wordpress using a GraphQL API.
• Semi Permanent: website built with Next.js, Emotion, Framer Motion & Contentful's GraphQL API.
• Create with Google: website built with Python & Jinja.
• Qantas Card Companion: website built with Next.js & GraphQL.
• Google Audience Connect: desktop application with Electron & Preact.js - EDIT: Now sunset by Create with Google 😔
• Blackmores: front-end revamp with HTML & SCSS.
• John Mac Foundation: website built with WordPress.

🤓 I have also done a bit of open-source...

• react-native-sketch, a React Native component for touch-based drawing (now archived)

🔭. I’m currently working on ...

• An e-commerce website for an Australian coffee roaster, built with headless Shopify & Next.js.

🌱 I’m currently learning ...

• Three.js & React-Three-Fiber

📭 You can reach out to me...

I am open to remote opportunities. Let's chat!

react-native-sketch's Issues

ios-scratch-n-see react-native

Hi guys,
Is there a way to do https://github.com/moqod/ios-scratch-n-see in React Native?
Or should I wrap this module and provide a JS bridge to use that lib?
or maybe I can use sketch to imitate the same functionality?

FYI - I'm getting like 30 errors when I try to build sketch into my react-native project after linking it.
I tried to run in on RN 0.41.2 and downgraded version of 0.40.0

with 0.41.2 there are 30 Xcode errors
with 0.40.0 there are 18 xcode errors

react-native-cli 2.0.1

Any help would be appreciated.

Is it possible to retrieve the drawing's vector values?

Hi, this library seems very good, thank's for making it happen ! I was wondering if we could save the drawing as a vector file, or just retrieve the vector values from the drawing, instead of saving the image as png or jpg?

draw on top of existing image

Hi this library looks awesome! I need the ability to draw on top of an image (photo in my case) and then save/upload the new image (like snapchat). Would be a great feature addition!

Thanks!

Not rendering properly

Hi,

Any ideas what I"m doing wrong? I have copied and pasted the example into a view and I just get a red line on the left and nowhere to write. I get the same result on an Android device and the IOS simulator.

Any help appreciated!

Thanks,

Sam

Native component for "RNSketch" does not exist

Im getting this error when I require Sketch and it doesn't seem to be working.

Is it possible to draw on a transparent background?

I am asking as I want to draw over image but do not change the existing image.
Thanks

This Lib simply DOESN'T support Android

and there is no word about it in the docs...
thanks for wasted time.
The author probably thinks that Android users are peasants and he doesn't give a fu*k... typical Apple consumer

Is it works with Expo ?

Same code with your basic example but it doesn't work. I'm using Expo now

Native component for "RNSketch" does not exist

Hi! I'm trying to test out RNS using Expo and used the following example code:
`
import React from 'react';
import { AppRegistry, Button, StyleSheet, View } from 'react-native';
import Sketch from 'react-native-sketch';

export default class LinksScreen extends React.Component {
static navigationOptions = {
title: 'Links',
};

clear = () => {
this.sketch.clear();
};

save = () => {
  this.sketch.save().then(({ path }) => {
    console.log(`The image is saved there: ${path}`); // eslint-disable-line no-console
  });
};

render() {
  return (
    <View style={styles.container}>
      <Sketch
        ref={sketch => {
          this.sketch = sketch;
        }}
      />
      <View style={styles.actionsBar}>
        <Button color="#EA212E" onPress={this.clear} title="❌ Clear" />
        <Button color="#1DBD21" onPress={this.save} title="Save  ✅" />
      </View>
    </View>
  );
}

}

const styles = StyleSheet.create({
container: {
backgroundColor: '#F5FCFF',
flex: 1,
paddingTop: 20,
},
actionsBar: {
alignItems: 'stretch',
flexDirection: 'row',
justifyContent: 'space-between',
padding: 20,
},
});`

and this error got thrown:
`[exp] Warning: Native component for "RNSketch" does not exist

• node_modules/react-native/node_modules/fbjs/lib/warning.js:35:20 in printWarning
• node_modules/react-native/node_modules/fbjs/lib/warning.js:59:25 in warning
• node_modules/react-native/Libraries/ReactNative/requireNativeComponent.js:52:12 in requireNativeComponent
• node_modules/react-native-sketch/index.ios.js:75:40 in
• node_modules/metro-bundler/src/Resolver/polyfills/require.js:178:12 in loadModuleImplementation

• screens/LinksScreen.js:3:0 in

• node_modules/metro-bundler/src/Resolver/polyfills/require.js:178:12 in loadModuleImplementation

• navigation/MainTabNavigator.js:9:0 in

• node_modules/metro-bundler/src/Resolver/polyfills/require.js:178:12 in loadModuleImplementation

• navigation/RootNavigation.js:5:0 in

• node_modules/metro-bundler/src/Resolver/polyfills/require.js:178:12 in loadModuleImplementation

• App.js:5:0 in

• node_modules/metro-bundler/src/Resolver/polyfills/require.js:178:12 in loadModuleImplementation
• node_modules/expo/AppEntry.js:2:0 in
• ... 3 more stack frames from framework internals
  `

No update for this package?

Support for an eraser?

Are there any plans on adding eraser functionality? If not I'll take a look at contributing :)

Import function

Hello, how can I import base64 string to board? ( wanna create Gallery)

Exposing clearDrawing

I've successfully exposed the clearDrawing method for external components to clear the current drawing, but before I send my pull request, I was wondering how you want to handle the current clear button?

If we expose the clearDrawing method, the button becomes obsolete.. Maybe activate it through props?

I'm also working on an undo/redo method, but it's kind of going beyond the scope of a simple sketch component..

Can you add types for it?

Would be sweet, if there were type to have them in Typescript.

Changing container size causes bottom half of sketch to be black

Sketch works well initially in both landscape and portrait. However if the container size changes (e.g. display rotation), anything drawn on it is stretched, then when more is drawn on the sketch, the bottom half turns black. This can happen when the container is set to flex:1, even if the Sketch component has fixed width & height.

onUpdate() called on tap despite no image changes

repro:

1. display a Sketch
2. tap the canvas (do not drag)

expected:
Either 1) a point drawn on the screen and onUpdate() called (preferred), or 2) (based on the explanation below) no point drawn on the screen and onUpdate() not called.

actual:
No point drawn on the screen and onUpdate() called.

description:
From the linked docs on smooth freehand drawing at https://code.tutsplus.com/tutorials/smooth-freehand-drawing-on-ios--mobile-13164:

Another case I neglected is handling a touch sequence that consists of the user touching the view with their finger and then lifting it without having moved it -effectively a tap on the screen. The user would probably expect to draw a point or small squiggle on the view this way, but with our current implementation nothing happens because our drawing code doesn't kick in unless our view receives the -touchesMoved:WithEvent: message.

Given that I'd expect onUpdate() to not be called on a tap -- but it is.

Coordinates

How can i get an array of
coordinates before saving to images ?

Circle

I have:
var color1 = "rgb(" + this.state.red * 255 + ",0,0)" var color2 = "rgb(0," + this.state.green * 255 + ",0)" var color3 = "rgb(0,0," + this.state.blue * 255 + ")" var red = this.state.red * 255 var blue = this.state.blue * 255 var green = this.state.green * 255 var stroke = "rgb(" + this.state.red * 255 + "," + this.state.green * 255 + "," + this.state.blue * 255 + ")"
<Slider value={this.state.red} thumbTintColor = {color1} onValueChange={(red) => this.setState({red})} />

how can I change slider to circle?
<Circle value={this.state.red} thumbTintColor = {Pink} onValueChange={(red) => this.setState({red})} />

would this work?

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

Hi! Maybe there is something wrong with my app, since I've tried a few other ways to daw an image / capture a signature and have been getting the same error.

Here's my system info:
Environment:
OS: macOS High Sierra 10.13.4
Node: 9.5.0
Yarn: 1.3.2
npm: 5.6.0
Watchman: Not Found
Xcode: Xcode 9.3.1 Build version 9E501
Android Studio: 3.1 AI-173.4720617

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: ^0.55.4 => 0.55.4

And full rundown of the error I am getting:
Invariant Violation: Native component for "RNSketch" does not exist

This error is located at:
in RNSketch (at index.ios.js:69)
in Sketch (at SelectVehicleScreen.js:15)
in RCTView (at View.js:60)
in View (at SelectVehicleScreen.js:14)
in MyPaint (at SceneView.js:10)
in SceneView (at StackViewLayout.js:424)
in RCTView (at View.js:60)
in View (at StackViewLayout.js:423)
in RCTView (at View.js:60)
in View (at StackViewLayout.js:422)
in RCTView (at View.js:60)
in View (at createAnimatedComponent.js:154)
in AnimatedComponent (at StackViewCard.js:12)
in Card (at createPointerEventsContainer.js:28)
in Container (at StackViewLayout.js:484)
in RCTView (at View.js:60)
in View (at StackViewLayout.js:381)
in RCTView (at View.js:60)
in View (at StackViewLayout.js:380)
in StackViewLayout (at withOrientation.js:30)
in withOrientation (at StackView.js:61)
in RCTView (at View.js:60)
in View (at Transitioner.js:146)
in Transitioner (at StackView.js:22)
in StackView (at createNavigator.js:96)
in Navigator (at createKeyboardAwareNavigator.js:11)
in KeyboardAwareNavigator (at createNavigationContainer.js:366)
in NavigationContainer (at App.js:42)
in App (at registerRootComponent.js:35)
in RootErrorBoundary (at registerRootComponent.js:34)
in ExpoRootComponent (at renderApplication.js:33)
in RCTView (at View.js:60)
in View (at AppContainer.js:102)
in RCTView (at View.js:60)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:32)

Not doing any super special:

1. npm start
2. "R" to refresh
3. "a" for my android emulator
4. Expo starts up and I get the above error.

I should also note that I am using the example code in its entirety to try to minimize the possibility I am doing something silly ("Usage" @ https://github.com/jgrancher/react-native-sketch).

Any help is appreciated!

RN 0.40 compatability

Thanks for the component, it's exactly what I needed for a little project. However, I upgraded to RN 0.40 recently and it doesn't appear to be working. Not sure what the breaking change was, but wanted to let you know the community still appreciates this library! :)

Transparent background black

what can I do?

Crash if trying to save without touching the canvas?

So If I call save without drawing anything I get a crash

default	15:33:58.172747 +0100	paack	Exception '*** -[_NSPlaceholderData initWithBase64EncodedString:options:]: nil string argument' was thrown while invoking saveDrawing on target RNSketchManager with params (
    "<null>",
    png,
    2618,
    2619
)
callstack: (
	0   CoreFoundation                      0x00000001058421ab __exceptionPreprocess + 171
	1   libobjc.A.dylib                     0x0000000103d3cf41 objc_exception_throw + 48
	2   CoreFoundation                      0x00000001058b6cb5 +[NSException raise:format:] + 197
	3   Foundation                          0x00000001037612bb -[NSData(NSData) initWithBase64EncodedString:options:] + 84
	4   paack                               0x000000010323651a -[RNSketchManager saveDrawing:ofType:resolve:reject:] + 538
	5   CoreFoundation                      0x00000001057c649c __invoking___ + 140
	6   CoreFoundation                      0x00000001057c6370 -[NSInvocation invoke] + 320
	7   CoreFoundation                      0x00000001057ded56 -[NSInvocation invokeWithTarget:] + 54
	8   pa<…>

Thank you 😊

file save location

Hello, I'm currently playing around with the library for a project I'm working on.
I've noticed that saved images can be found by manually searching through the simulators directory, however the image cannot be found in the simulators gallery. Is it possible to change the save destination?

Change #import "RCTXxx.h" to <React/RCTXxx.h> to solve compile error

I'm using React Native 0.44. There are a couple of compile errors after I added this useful component.
The error said Duplicate interface definition for class 'RCTView'. It's the same with other classes like RCTBridge, RCTEventDispatcher, etc.

I found a solution and it works for me.
Just change #import "RCTXxx.h" to #import <React/RCTXxx.h>.

I'll send a PR later.

Multiple instances of Sketch component

Is it possible to have several independent sketch elements? It seems only a single Sketch component is being loaded on the screen.

To be more specific - this what I'm trying to do:

Component1 contains a single Sketch component:

<View>
     <Sketch
          style={styles.notes}
          ref={sketch => {
            this.sketch = sketch;
          }}
          strokeColor="#999999"
          strokeThickness={2}
     />
</View>

Then, I create several Component1 instances:

<View>
     <Component1 />
     <Component1 />
     <Component1 />
</View>

I expect to see 3 independent Sketch components in which user can draw different strokes. However, only a single Sketch component actually being loaded.

Android Integration

Hello, I currently need information of the API to create the Android component.
Is there any documentation?

It is not working.

I use mouse as input.
Can not draw anything on the screen.
why?

Reset

How exactly do I access onReset? It seems likes its built in to the canvas without a way to trigger it. Thanks!