A Canvas component for React Native

1npm install react-native-webview
2react-native link react-native-webview
3npm install react-native-canvas

Usage

1import React, { Component } from 'react';
2import Canvas from 'react-native-canvas';
3
4class App extends Component {
5
6  handleCanvas = (canvas) => {
7    const ctx = canvas.getContext('2d');
8    ctx.fillStyle = 'purple';
9    ctx.fillRect(0, 0, 100, 100);
10  }
11
12  render() {
13    return (
14      <Canvas ref={this.handleCanvas}/>
15    )
16  }
17}

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.

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

Image

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

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