# 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

```javascript
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",
  },
});
```