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)

``sh
yarn add gl-react-image
`

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


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

`

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 <-

`html
source="http://i.imgur.com/tCatS2c.jpg"
resizeMode="stretch"
/>
`

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

`html
source="http://i.imgur.com/tCatS2c.jpg"
resizeMode="stretch"
/>
`

`html
source="http://i.imgur.com/tCatS2c.jpg"
resizeMode="contain"
/>
`

`html
source="http://i.imgur.com/tCatS2c.jpg"
resizeMode="cover"
/>
`

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

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

$3

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

render(

source="http://i.imgur.com/tCatS2c.jpg"
/>

, document.body
))
`

$3

`js
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 (

source={src}
/>

);
}
}
``