keshavkaul / React Native Sketch View
Licence: mit
A React Native component for touch based drawing supporting iOS and Android.
Stars: ✭ 97
Programming Languages
javascript
184084 projects - #8 most used programming language
java
68154 projects - #9 most used programming language
Projects that are alternatives of or similar to React Native Sketch View
android-3d-model-viewer
Android app to load 3D models in obj, stl, dae & gltf format using pure OpenGL ES 2.0. Published on Play Store https://play.google.com/store/apps/details?id=org.andresoviedo.dddmodel2
Stars: ✭ 150 (+54.64%)
Mutual labels: touch, draw
Vuewordcloud
Generates a cloud out of the words.
Stars: ✭ 284 (+192.78%)
Mutual labels: draw, component
Drawingview Android
DrawingView is a simple view that lets you draw on screen using your fingers and lets you save the drawings as images.
Stars: ✭ 206 (+112.37%)
Mutual labels: sketch, draw
Isketchnfill
Software that can autocomplete sketches as the user starts drawing.
Stars: ✭ 151 (+55.67%)
Mutual labels: sketch, draw
Android 3d Model Viewer
Android OpenGL 2.0 application to view 3D models. Published on Play Store
Stars: ✭ 809 (+734.02%)
Mutual labels: draw, touch
Croppr.js
A vanilla JavaScript image cropper that's lightweight, awesome, and has absolutely zero dependencies.
Stars: ✭ 294 (+203.09%)
Mutual labels: component, touch
anki-canvas
🖌️ Drawing area widget for Anki to practice Kanji writing
Stars: ✭ 25 (-74.23%)
Mutual labels: touch, draw
System Alert Window Example
Example project showing use of SYSTEM_ALERT_WINDOW permission on Android 23+, with back button interception.
Stars: ✭ 39 (-59.79%)
Mutual labels: draw, touch
React Native Sketch
🎨 A React Native <Sketch /> component for touch-based drawing.
Stars: ✭ 627 (+546.39%)
Mutual labels: sketch, touch
React Sketch
Sketch Tool for React-based applications, backed up by FabricJS
Stars: ✭ 414 (+326.8%)
Mutual labels: sketch, draw
React Planner
✏️ A React Component for plans design. Draw a 2D floorplan and navigate it in 3D mode.
Stars: ✭ 846 (+772.16%)
Mutual labels: draw, component
React Charts
⚛️ Simple, immersive & interactive charts for React
Stars: ✭ 1,302 (+1242.27%)
Mutual labels: component
Polyfill Php54
This component provides functions unavailable in releases prior to PHP 5.4.
Stars: ✭ 93 (-4.12%)
Mutual labels: component
Sketch Dockpreview
A Sketch plugin that lets you preview your current artboard in the Dock.
Stars: ✭ 90 (-7.22%)
Mutual labels: sketch
React Native Skeleton Content Nonexpo
A customizable skeleton-like loading placeholder for react native projects not using expo.
Stars: ✭ 92 (-5.15%)
Mutual labels: component
Talquei
🤖 Vue components to build webforms looking like a conversation
Stars: ✭ 90 (-7.22%)
Mutual labels: component
Ngx Youtube Player
(ngx) A youtube component wrapped with Angular (typescript)
Stars: ✭ 89 (-8.25%)
Mutual labels: component
THIS PACKAGE IS NOT BEING MAINTAINED
You should instead use Fabricjs along with react-native-webview
react-native-sketch-view
A React Native component for touch based drawing supporting iOS and Android. Inspired by the libraries react-native-sketch, react-native-signature-capture.
This component was written to fulfill the following use cases:
- Basic Touch based drawing for both iOS and android.
- Shouldn't include any UI Elements for interaction. The UI Elements can be created and customized in react native.
- Support touch drawing, erasing of part of drawing, clearing drawing, saving of drawn images locally and opening of locally saved images.
Getting Started
-
$ npm install react-native-sketch-view --save
or$ yarn add react-native-sketch-view
$ react-native link react-native-sketch-view
- For iOS, open Application Project in Xcode and find
RNSketchView
project underLibraries
Folder.- Drag
SketchViewContainer.xib
into your application project, adding a folder reference instead of copying.
- Drag
Usage
import React, { Component } from 'react';
import {
View,
Text,
TouchableHighlight
} from 'react-native';
import SketchView from 'react-native-sketch-view';
const sketchViewConstants = SketchView.constants;
const tools = {};
tools[sketchViewConstants.toolType.pen.id] = {
id: sketchViewConstants.toolType.pen.id,
name: sketchViewConstants.toolType.pen.name,
nextId: sketchViewConstants.toolType.eraser.id
};
tools[sketchViewConstants.toolType.eraser.id] = {
id: sketchViewConstants.toolType.eraser.id,
name: sketchViewConstants.toolType.eraser.name,
nextId: sketchViewConstants.toolType.pen.id
};
class HandNote extends Component {
constructor(props) {
super(props);
this.state = {
toolSelected: sketchViewConstants.toolType.pen.id
};
}
isEraserToolSelected() {
return this.state.toolSelected === sketchViewConstants.toolType.eraser.id;
}
toolChangeClick() {
this.setState({toolSelected: tools[this.state.toolSelected].nextId});
}
getToolName() {
return tools[this.state.toolSelected].name;
}
onSketchSave(saveEvent) {
this.props.onSave && this.props.onSave(saveEvent);
}
render() {
return (
<View style={{flex: 1, flexDirection: 'column'}}>
<SketchView style={{flex: 1, backgroundColor: 'white'}} ref="sketchRef"
selectedTool={this.state.toolSelected}
onSaveSketch={this.onSketchSave.bind(this)}
localSourceImagePath={this.props.localSourceImagePath}/>
<View style={{ flexDirection: 'row', backgroundColor: '#EEE'}}>
<TouchableHighlight underlayColor={"#CCC"} style={{ flex: 1, alignItems: 'center', paddingVertical:20 }} onPress={() => { this.refs.sketchRef.clearSketch() }}>
<Text style={{color:'#888',fontWeight:'600'}}>CLEAR</Text>
</TouchableHighlight>
<TouchableHighlight underlayColor={"#CCC"} style={{ flex: 1, alignItems: 'center', paddingVertical:20, borderLeftWidth:1, borderRightWidth:1, borderColor:'#DDD' }} onPress={() => { this.refs.sketchRef.saveSketch() }}>
<Text style={{color:'#888',fontWeight:'600'}}>SAVE</Text>
</TouchableHighlight>
<TouchableHighlight underlayColor={"#CCC"} style={{ flex: 1, justifyContent:'center', alignItems: 'center', backgroundColor:this.isEraserToolSelected() ? "#CCC" : "rgba(0,0,0,0)" }} onPress={this.toolChangeClick.bind(this)}>
<Text style={{color:'#888',fontWeight:'600'}}>ERASER</Text>
</TouchableHighlight>
</View>
</View>
);
}
}
export default HandNote;
APIs and Props
APIs
-
clearSketch()
- Clears the view. -
saveSketch()
- Initiates saving of sketch. -
changeTool(toolId)
- Changes selected tool.- Tool Id can be found using SketchView tooltype constants eg.
SketchView.constants.toolType.pen.id
- Tool Id can be found using SketchView tooltype constants eg.
Tool Types
- Pen -
SketchView.constants.toolType.pen
- Eraser -
SketchView.constants.toolType.eraser
Props
-
selectedTool
- Set the tool id to be selected. -
localSourceImagePath
- Local file path of the image. -
onSaveSketch(saveArgs)
- Callback when saving is complete.-
saveArgs
Is an object having the following properties --
localFilePath
- Local file path of the saved image. -
imageWidth
- Width of the saved image. -
imageHeight
- Height of the saved image.
-
-
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].