gistfile1.txt

import React, { Component } from 'react';
import {
  StyleSheet,
  View
} from 'react-native';
import GL from 'gl-react';
import { Surface, resolveAssetSource } from 'gl-react-native';
import shader from './Shader';

const shaders = GL.Shaders.create({
    feet: {
        frag: shader
    }
});

const IMAGE_SOURCE = {
    left: resolveAssetSource(require('./foot-left-mask.png')),
    right: resolveAssetSource(require('./foot-right-mask.png'))
};
const BACK_COLOR = [0, 0, 0, 255];
const WIDTH = 160;
const HEIGHT = 320;

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.row}>
          <Surface style={styles.cell} width={WIDTH} height={HEIGHT}>
            <GL.Node
              shader={shaders.feet}
              uniforms={{
                dim: [WIDTH, HEIGHT],
                backColor: BACK_COLOR,
                image: IMAGE_SOURCE.left,
                left: true,
                samples: [0, 0, 0, 0, 0, 0, 0, 0],
              }} />
          </Surface>
          <Surface style={styles.cell} width={WIDTH} height={HEIGHT}>
            <GL.Node
              shader={shaders.feet}
              uniforms={{
                dim: [WIDTH, HEIGHT],
                backColor: BACK_COLOR,
                image: IMAGE_SOURCE.right,
                left: false,
                samples: [0, 0, 0, 0, 0, 0, 0, 0],
              }} />
          </Surface>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column'
  },
  row: {
    flex: 1,
    flexDirection: 'row'
  },
  cell: {
    flex: 1
  },
});