react-native-glshaders-testing icon indicating copy to clipboard operation
react-native-glshaders-testing copied to clipboard

Just a demo app that mimic some Instagram + Snapchat features

Testing GL shaders

This project is a React Native + GLv3 alpha + Expo mashup to create a somewhat Instagram-like MVP with image filtering & stickers.

Preview:

alt text

Trying it out

To see it in action, just follow these steps

git clone https://github.com/kelset/react-native-glshaders-testing.git
cd react-native-glshaders-testing
npm i

(note: please make sure you are running npm v4)

exp start

And then scan the QR code with the Expo app.

Current issues

Hopefully step by step they will get solved.

  1. It's really slow
  2. On Android, the Save image works in a fancy way. If I add a sticker it actually shows the image.

Troubleshooting

Apparently, to make it work, there are some things to sort out:

  1. First thing to do is to follow what said in this StackOverflow answer but write this tools:overrideLibrary="fr.greweb.rngl"
  2. based on this issue here the way to fix it is to install Android's NDK r10e, downloadable from here.
  3. And also adding this is necessary.
  4. Temp fix for GL -- can't make it work anymore, I'll stick to iOS simulator atm
  5. Need to use [email protected] to make it work with Expo properly
  6. gl-react-native doesn't work when attached to the debugger

Acknowledgments

The work of this project is mostly a merge of these awesome projects by some awesome people:

  1. instagram like filters
  2. sticker fanciness, inspired by Jani's work
  3. able to save images, via react-native-view-shot
  4. this fork from Brent that managed to make it work with Expo