austinpoon/gl-react-image

Universal gl-react Image that implements resizeMode in OpenGL

gl-react-image

Universal gl-react module that implements resizeMode prop in OpenGL.

-> Example App <-

The library is called gl-react-image but barely anything can be the source, it can be a video, a canvas, another stack of effects,... (anything that gl-react support as a texture)

yarn add gl-react-image

import GLImage from "gl-react-image";
import {Surface} from "gl-react-dom";// or "gl-react-native" or "gl-react-expo" or ..

<Surface ...>
  <GLImage
    source="http://i.imgur.com/tCatS2c.jpg"
    resizeMode="stretch"
  />
</Surface>

GLImage Props

• source (required): the texture input. It can be an image URL or anything gl-react supports for textures.
• resizeMode: "cover" | "stretch" | "contain" : This implement the exact same React Native Image resizeMode prop in OpenGL.
• center and zoom props can be used with resizeMode=cover to define the cover crop position:
  • center, an [x,y] array, defines the gravity of the crop (x and y are in [0, 1] bound).
  • zoom should be a value in ] 0 , 1 ] bound. 1 means no zoom, more value is close to 0, more the zoom is important.
• width and height: only provide if you also want a resize. (this is feeded to the gl-react Node width/height)

Example

-> Example App <-

<GLImage
  source="http://i.imgur.com/tCatS2c.jpg"
  resizeMode="stretch"
/>

alternative syntax is to use only source via a { uri, width, height } object.

<GLImage
  source="http://i.imgur.com/tCatS2c.jpg"
  resizeMode="stretch"
/>

<GLImage
  source="http://i.imgur.com/tCatS2c.jpg"
  resizeMode="contain"
/>

<GLImage
  source="http://i.imgur.com/tCatS2c.jpg"
  resizeMode="cover"
/>

<GLImage
  source="http://i.imgur.com/tCatS2c.jpg"
  resizeMode="cover"
  zoom={0.5}
/>

<GLImage
  source="http://i.imgur.com/tCatS2c.jpg"
  resizeMode="cover"
  zoom={0.44}
  center={[ 1, 0.55 ]}
/>

Web usage example

import React from "react";
import {render} from "react-dom";
import {Surface} from "gl-react-dom";
import GLImage from "gl-react-image";

render(
  <Surface width={300} height={300}>
    <GLImage
      source="http://i.imgur.com/tCatS2c.jpg"
    />
  </Surface>
  , document.body
))

React Native usage example

import React from "react";
import {Image, View} from "react-native";
import {Surface} from "gl-react-dom";
import GLImage from "gl-react-image";

export default class Example extends Component {
  static propTypes = {
    src: PropTypes.string.isRequired,
  };
  render () {
    return (
      <Surface style={{ width: 300, height: 300 }}>
        <GLImage
          source={src}
        />
      </Surface>
    );
  }
}