Skip to content
This repository has been archived by the owner on Nov 24, 2022. It is now read-only.

Sketch "clear" does not work #80

Open
ozziexsh opened this issue Jun 3, 2019 · 2 comments · May be fixed by #81
Open

Sketch "clear" does not work #80

ozziexsh opened this issue Jun 3, 2019 · 2 comments · May be fixed by #81

Comments

@ozziexsh
Copy link

ozziexsh commented Jun 3, 2019

Complains that this.provider.reset() is not a function

https://github.com/expo/expo-pixi/blob/master/lib/components/Sketch.js#L165

I'm guessing it is because the clear() method was copied from the signature component where this.provider is being set

@ozziexsh ozziexsh linked a pull request Jun 3, 2019 that will close this issue
@victorcabeceira
Copy link

victorcabeceira commented Aug 24, 2019

In case anyone bumps into this and want a temporary solution, here is how I did it.

First, the Sketch component with ref:

<ExpoPixi.Sketch
   ref={ref => (this.sketch = ref)}
   ...
/>

and then, use the code section that @Nehero provided (i.e. https://github.com/expo/expo-pixi/blob/master/lib/components/Sketch.js#L165) with just the part below

if (this.sketch.stage.children.length > 0) {
  this.sketch.stage.removeChildren();
  this.sketch.renderer._update();
}

That did the trick for me

@lucas-wilmart
Copy link

lucas-wilmart commented Sep 6, 2019

@victorcabeceira solution did not work for me. After further investigation, it appears that several features of this module depend on dependencies which are not compatible for the latest expo SDK versions (My app is running with expo SDK 34).

Since I only needed the clearing feature and the ability to save the result ( I used captureRef from react-native-view-shot to do this ), I came up with a temporary solution to erase the drawing with react hooks and conditional rendering to unmount the component and then remount it.

const [isSketchClearing, setIsSketchClearing] = React.useState(false)

// Gets called when a button is pressed
const onClear = () => {
   setIsSketchClearing(true)
   setTimeout(() => setIsSketchClearing(false), 50)
  }

const Sketcher = (
    <ExpoPixi.Sketch
      style={{ width: '100%', height: '100%' }}
    />
  )

The ExpoPixi.Sketch component gets unmounted for a very brief moment and then remounted.

<View collapsable={false}>
  {!isSketchClearing && Sketcher}
<View>

This solution works for Android both in dev and when testing the APK build.
I didn't test it on iOS since my project is Android only.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants