rnc

react-native-canvas

A Canvas component for React Native

Showing:

Popularity

Downloads/wk

1.9K

GitHub Stars

805

Maintenance

Last Commit

2mos ago

Contributors

18

Package

Dependencies

1

License

MIT

Type Definitions

Tree-Shakeable

No?

Reviews

Top Feedback

1Easy to Use
1Highly Customizable

Readme

react-native-canvas

A Canvas component for React Native

npm install react-native-webview
react-native link react-native-webview
npm install react-native-canvas

Usage

import React, { Component } from 'react';
import Canvas from 'react-native-canvas';

class App extends Component {

  handleCanvas = (canvas) => {
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'purple';
    ctx.fillRect(0, 0, 100, 100);
  }

  render() {
    return (
      <Canvas ref={this.handleCanvas}/>
    )
  }
}

API

Canvas

Canvas#height

Reflects the height of the canvas in pixels

Canvas#width

Reflects the width of the canvas in pixels

Canvas#getContext()

Returns a canvas rendering context. Currently only supports 2d context.

Canvas#toDataURL()

Returns a Promise that resolves to DataURL.

CanvasRenderingContext2D

Standard CanvasRenderingContext2D. MDN. Only difference is await should be used to retrieve values from methods.

const ctx = canvas.getContext('2d');

Image

WebView Image constructor. Unlike in the browsers accepts canvas as first argument. MDN

const image = new Image(canvas, height, width);

Rate & Review

Great Documentation0
Easy to Use1
Performant0
Highly Customizable1
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
Karimov SirojiddinSeoul, South Korea2 Ratings0 Reviews
Front-end developer in Com4in. I am currently working with Javascript and its library and Frameworks, Like, React Js, Node js.
August 22, 2020
Highly Customizable
Easy to Use

Tutorials

No tutorials found
Add a tutorial