Skip to content

🎨 iOS PencilKit Component for React Native

License

Notifications You must be signed in to change notification settings

mym0404/react-native-pencil-kit

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation


React Native Pencil Kit

NPM downloads NPM version License

iOS Easy & Robust Pencil Kit Porting

React Native Pencil Kit is a full API support iOS PencilKit framework porting.

preview

Getting Started

yarn add react-native-pencil-kit

Link PencilKit.framework in the Xcode application project settings

xcode

With Fabric, we should access c++ functions and we should use objective-c++. This prevents us from Apple SDK framework module importing and we cannot link PencilKit automatically at now. If you are using use_frameworks!(dynamic linking), this configuration is maybe not required.

Usage

import PencilKitView, { type PencilKitRef, type PencilKitTool } from 'react-native-pencil-kit';

<PencilKitView style={{ flex: 1 }} />

Note

You can explore full example! Full Example

Props

Props Description Default
alwaysBounceVertical A Boolean value that determines whether bouncing always occurs when vertical scrolling reaches the end of the content. true
alwaysBounceHorizontal A Boolean value that determines whether bouncing always occurs when horizontal scrolling reaches the end of the content view. true
isRulerActive A Boolean value that indicates whether a ruler view is visible on the canvas. false
drawingPolicy The policy that controls the types of touches allowed when drawing on the canvas. This properties can be applied from iOS 14.0 default
backgroundColor The canvas background color none
isOpaque Whether the canvas is opaque true
toolPickerVisibilityDidChange Tells the delegate that the tool picker UI changed visibility.
toolPickerIsRulerActiveDidChange Tells the delegate that the ruler active state was changed by the user.
toolPickerFramesObscuredDidChange Tells the delegate that the frames the tool picker obscures changed.
toolPickerSelectedToolDidChange Tells the delegate that the selected tool was changed by the user.
canvasViewDidBeginUsingTool Called when the user starts using a tool, eg. selecting, drawing, or erasing.
canvasViewDidEndUsingTool Called when the user stops using a tool, eg. selecting, drawing, or erasing.
canvasViewDrawingDidChange Called after the drawing on the canvas did change.
canvasViewDidFinishRendering Called after setting drawing when the entire drawing is rendered and visible.

Commands

Method Description Etc
clear(): void Clear canvas
showToolPicker(): void Show Palette
hideToolPicker(): void Hide Palette
redo(): void Redo last drawing action
undo(): void Undo last drawing action
saveDrawing(path: string): Promise<string> Save drawing data into file system, return base64 data
getBase64Data(): Promise<string> Get current drawing data as base64 string form
getBase64PngData(options: { scale?: number }): Promise<string> Get current drawing data as base64 png form scale = 0 means use default UIScreen.main.scale
getBase64JpegData(options: { scale?: number; compression?: number }): Promise<string> Get current drawing data as base64 jpeg form scale = 0 means use default UIScreen.main.scale. default compression is 0.93
loadDrawing(path: string): Promise<void> Load drawing data from file system
loadBase64Data(base64: string): Promise<void> Load base64 drawing data into canvas Use base64 get from getBase64Data()
setTool(params: { toolType: PencilKitTool; width?: number; color?: ColorValue }): void Set PencilKitTool type with width and color

Tools

- pen
- pencil
- marker
- monoline // ios 17
- fountainPen // ios 17
- watercolor // ios 17
- crayon // ios 17
- eraserVector // width is supported from 16.4
- eraserBitmap // width is supported from 16.4
- eraserFixedWidthBitmap // ios 16.4

Utils

Use PencilKitUtil for using utilty functions.

  • getAvailableTools(): string[]
  • isPencilKitAvailable(): boolean

Troubleshooting

  • Pencilkit is not rendered
    • This package supports only equal or greater than 14.0 version.
    • This package supports only Fabric.

Contributing

License


Built and maintained by MJ Studio.