Add more method?

[NgKhanh]

Can you please add more method : clear(), saveToImg()..

[jayeszee]

Hi, those are work in progress right now. I work on this project on my free time. Should be coming soon!

[clarksandholtz]

Would you be interested in any help with the saveToImg() ?

It would prove very useful in a project I'm currently working on, so I've got motivation haha

[clarksandholtz]

I found a workaround for the saveToImg() that could probably just be implemented within this package itself.

Expo has a takeSnapshotAsync method that takes in a view and spits out a shot of it. Docs are here.

Here's my example code:

import React from "react";
import { Button, View } from "react-native";
import ScreenContainer from "../elements/screen-container";
import RNDraw from "rn-draw";
import { FileSystem, takeSnapshotAsync } from "expo";

export default class DrawingScreen extends React.Component {
  componentDidMount() {
    FileSystem.makeDirectoryAsync(
      FileSystem.documentDirectory + "photos"
    ).catch(e => {
      console.log(e, "Directory exists");
    });
  }

  saveDrawingToImage = async () => {
    const img = await takeSnapshotAsync(this.drawingView, {
      format: "png",
      result: "base64",
      width: 100,
      height: 100
    });
    console.log(img); // spits out the base 64 of the image
  };

  render() {
    return (
      <ScreenContainer>
        <Button
          style={{ position: "absolute", top: 20, left: 20 }}
          onPress={this.saveDrawingToImage}
          title="SAVE DRAWING"
        />
        <View
          style={{ flex: 1, backgroundColor: "rgba(0,0,0,0)" }}
          ref={view => (this.drawingView = view)}
        >
          <RNDraw
            containerStyle={{ backgroundColor: "rgba(0,0,0,0)" }}
            color={"#000000"}
            strokeWidth={4}
          />
        </View>
      </ScreenContainer>
    );
  }
}

[clarksandholtz]

@jayeszee thoughts about embedding something like this in rn-draw itself? Would you want any help with that?

[jayeszee]

@clarksandholtz I actually don't think I will be adding that functionality mainly because I would like to add functionality that are supported by both expo and non expo applications. I actually use takeSnapshotAsync on my expo applications too. Clear and image background support however, I will be adding soon.

[jayeszee]

@NgKhanh https://github.com/jayeszee/rn-draw/pull/6 should introduce clear functionality. It will be in the 0.0.6 release. As for saving images, you can use @clarksandholtz 's solution with takeSnapshotAsync! Good luck!