Instagram like filters using React Native

Question

I have been looking for a way to develop Instagram like filters using React-Native. I have created filters using another mobile framework called Ionic which uses the webview to create apps, but the filters are much too slow. How could I manipulate images to create such filtered effects using react-native.

Cheers

Answer 1

You can check my react-native-image-filter-kit module. It contains an Instagram like set of filters ported from CSSGram project.

Usage example:

import { Image } from 'react-native'
import { ToasterCompat } from 'react-native-image-filter-kit'

const imageStyle = { width: 320, height: 320 }

const atx = (
  <Image
    style={imageStyle}
    source={{ uri: 'https://una.im/CSSgram/img/atx.jpg' }}
    resizeMode={'contain'}
  />
)

const toasted = <ToasterCompat image={atx} />

Answer 2

我在https://medium.com/@wcandillon/instagram-filter-63e169a54ce3的中等故事中使用 gl-react 编写了用于在 React Native 中实现 instagram 样式过滤器的配方。

Answer 3

I think you'd need to look at implementing an OpenGl view to get good performance. If you're doing it on the device then the filters should probably be done using GLSL shaders. I was hoping to find a polyfill-type component for WebGL, but haven't found one yet.

The react-canvas project is quite interesting (even though it's about canvas, not webGL) - and might be worth exploring.

EDIT: it's a long time after, but there is gl-react for exactly the purpose of doing advanced effects like Instagram filters over images.