react-native-base-canvas

react-native-native-canvas

IOS not available

Getting started

$ npm install react-native-native-canvas --save

Mostly automatic installation

$ react-native link react-native-native-canvas

Usage

import React from "react";
import { StyleSheet, View } from "react-native";
import { Canvas, Picture } from "react-native-native-canvas";

const coin1: Picture = {
  x: 0,
  y: 0,
  width: 100,
  height: 100,
  paint: {},
  source: "https://www.spriters-resource.com/resources/sheets/63/65962.png",
  crop: [80, 112, 16, 16],
  type: "image",
};

const coin2: Picture = {
  x: 100,
  y: 100,
  width: 100,
  height: 100,
  paint: {},
  source: "https://www.spriters-resource.com/resources/sheets/63/65962.png",
  crop: [96, 112, 16, 16],
  type: "image",
};

const coin3: Picture = {
  x: 200,
  y: 200,
  width: 100,
  height: 100,
  paint: {},
  source: "https://www.spriters-resource.com/resources/sheets/63/65962.png",
  crop: [112, 112, 16, 16],
  type: "image",
};

const coin4: Picture = {
  x: 300,
  y: 300,
  width: 100,
  height: 100,
  paint: {},
  source: "https://www.spriters-resource.com/resources/sheets/63/65962.png",
  crop: [128, 112, 16, 16],
  type: "image",
};

const coin5: Picture = {
  x: 400,
  y: 400,
  width: 100,
  height: 100,
  paint: {},
  source: "https://www.spriters-resource.com/resources/sheets/63/65962.png",
  crop: [144, 112, 16, 16],
  type: "image",
};

const shapes = [coin1, coin2, coin3, coin4, coin5];
const App = () => {
  return (
    <View style={styles.container}>
      <Canvas shapes={shapes} style={styles.paper} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  paper: {
    flex: 1,
    backgroundColor: "#5DE1FF",
  },
});