README.md 2.3 KB
Newer Older
Gaëtan Renaudeau's avatar
Gaëtan Renaudeau committed
1
**This repository hosts the v2 of gl-react. Please also see the v3 at https://github.com/gre/gl-react**
Gaëtan Renaudeau's avatar
Gaëtan Renaudeau committed
2 3


Gaëtan Renaudeau's avatar
Gaëtan Renaudeau committed
4
**[Gitbook documentation](https://github.com/ProjectSeptemberInc/gl-react/tree/master/docs) / [Github](https://github.com/ProjectSeptemberInc/gl-react-native/) / [gl-react](https://github.com/ProjectSeptemberInc/gl-react/)** / [#gl-react on reactiflux](https://discordapp.com/channels/102860784329052160/106102146109325312)
Gaëtan Renaudeau's avatar
Gaëtan Renaudeau committed
5

Gaëtan Renaudeau's avatar
Gaëtan Renaudeau committed
6
# <img width="32" alt="icon" src="https://cloud.githubusercontent.com/assets/211411/9813786/eacfcc24-5888-11e5-8f9b-5a907a2cbb21.png"> gl-react-native ![](https://img.shields.io/badge/react--native-%200.42.x-05F561.svg) ![](https://img.shields.io/badge/gl--react-%202.2.x-05F561.svg)
7

Gaëtan Renaudeau's avatar
Gaëtan Renaudeau committed
8
OpenGL bindings for React Native to implement complex effects over images and components, in the descriptive VDOM paradigm.
9

Gaëtan Renaudeau's avatar
Gaëtan Renaudeau committed
10
**`gl-react-native` is an implementation of `gl-react` for `react-native`. Please [read the main gl-react README](https://github.com/ProjectSeptemberInc/gl-react/) for more information.**
11

Gaëtan Renaudeau's avatar
Gaëtan Renaudeau committed
12
[![](https://github.com/ProjectSeptemberInc/gl-react-native/raw/master/docs/simple.gif)](./example)[![](https://github.com/ProjectSeptemberInc/gl-react-native/raw/master/docs/advancedeffects.gif)](./example)
Gaëtan Renaudeau's avatar
Gaëtan Renaudeau committed
13

14
## Documentation
Gaëtan Renaudeau's avatar
Gaëtan Renaudeau committed
15

Gaëtan Renaudeau's avatar
Gaëtan Renaudeau committed
16
[**doc**](https://github.com/ProjectSeptemberInc/gl-react/tree/master/docs)
17

Gaëtan Renaudeau's avatar
Gaëtan Renaudeau committed
18 19 20 21 22 23
## Installation

```
npm i --save gl-react-native
```

24 25 26
### Configure your React Native Application

**on iOS:**
Gaëtan Renaudeau's avatar
Gaëtan Renaudeau committed
27

28
![](https://github.com/ProjectSeptemberInc/gl-react-native/raw/master/docs/install-steps.png)
29

Gaëtan Renaudeau's avatar
Gaëtan Renaudeau committed
30 31 32 33 34 35
or if you use Cocapods:

```ruby
pod 'RNGL', :path => './node_modules/gl-react-native'
```

36 37 38
**on Android:**

1. `android/settings.gradle`:: Add the following snippet
Gaëtan Renaudeau's avatar
Gaëtan Renaudeau committed
39 40 41 42
```gradle
include ':RNGL'
project(':RNGL').projectDir = file('../node_modules/gl-react-native/android')
```
Alex de Mulder's avatar
Alex de Mulder committed
43
2. `android/app/build.gradle`: Add in dependencies block.
Gaëtan Renaudeau's avatar
Gaëtan Renaudeau committed
44 45 46
```gradle
compile project(':RNGL')
```
Gaëtan Renaudeau's avatar
Gaëtan Renaudeau committed
47
3. in your `MainApplication` (or equivalent) the RNGLPackage needs to be added. Add the import at the top:
Gaëtan Renaudeau's avatar
Gaëtan Renaudeau committed
48 49
```java
import com.projectseptember.RNGL.RNGLPackage;
Alex de Mulder's avatar
Alex de Mulder committed
50 51 52 53 54 55
```
4. In order for React Native to use the package, add it the packages inside of the class extending ReactActivity.
```java
@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
Gaëtan Renaudeau's avatar
Gaëtan Renaudeau committed
56
	new MainReactPackage(),
Alex de Mulder's avatar
Alex de Mulder committed
57 58 59 60
	...
	new RNGLPackage()
  );
}
Gaëtan Renaudeau's avatar
Gaëtan Renaudeau committed
61
```