react-universal-canvas v0.2.9

Under alpha version development.

react-universal-canvas

html5 canvas react component polyfill for android,ios. You can use canvas for android,ios without modification to browser code.

Usage

import Canvas from 'react-universal-canvas'

React.createClass({
	somemethod() {
		const canvas = this.refs.canvas
		const ctx = canvas.getContext()

		// You can use CanvasRenderingContext2D api.
		ctx.save()
		ctx.lineStyle = '#f00'
		ctx.lineWidth = 6
		ctx.lineCap = 'round'
		ctx.beginPath()
		ctx.moveTo(10,10)
		ctx.lineTo(100,100)
		ctx.stroke()
		ctx.restore()
	}
	render() {
		return (
			<Canvas ref='canvas' width={200} height={200} />
		)
	}
})

Install

npm install react-universal-canvas

Add it to your project

You can use rnpm to add native dependencies automatically:

$ rnpm link

or do it manually as described below:

iOS

Cocoapods

add the following line to your Podfile: pod 'UniversalCanvas', :path => '../node_modules/react-universal-canvas'

or:

Manually

1. Open your project in XCode, right click on Libraries and click Add Files to "Your Project Name" Look under node_modules/react-universal-canvas and add UniversalCanvas.xcodeproj.
2. Add libUniversalCanvas.a to Build Phases -> Link Binary With Libraries.
3. Click on UniversalCanvas.xcodeproj in Libraries and go the Build Settings tab. Double click the text to the right of Header Search Paths and verify that it has $(SRCROOT)/../react-native/React - if it isn't, then add it. This is so XCode is able to find the headers that the UniversalCanvas source files are referring to by pointing to the header files installed within the react-native node_modules directory.

Android

1. in android/settings.gradle

   ...
   include ':react-universal-canvas'
   project(':react-universal-canvas').projectDir = new File(rootProject.projectDir, '../node_modules/react-universal-canvas/android')

2. in android/app/build.gradle add:

   dependencies {
   		 ...
   		 compile project(':react-universal-canvas')
   }

3. and finally, in android/src/main/java/com/{YOUR_APP_NAME}/MainActivity.java for react-native < 0.29, or android/src/main/java/com/{YOUR_APP_NAME}/MainApplication.java for react-native >= 0.29 add:

    ```java
    //...
    import com.yusukeshibata.UniversalCanvas.UniversalCanvasPackage; // <--- This!
    //...
    @Override
    protected List<ReactPackage> getPackages() {
   	 return Arrays.<ReactPackage>asList(
   		 new MainReactPackage(),
   		 new UniversalCanvasPackage() // <---- and This!
   	 );

   }

## License

MIT