React Native - How to make Instagram

OUTDATED

This blog is a bit outdated, and uses gl-react-native 1.3. I highly recommend checking out https://github.com/gre/gl-react-image-effects which was inspired by this post and uses gl-react-native 2.*!

Intro

Instagram is a fantastic app and a great concept to model after for learning fragment shaders. We won’t get too deep into fragment shaders but I’ll take a little bit about what they are and point you to some resources.

We’ll take advantage of the awesome gl-react-native component library by Gaëtan Renaudeau.

There are some fantastic resources on basic concepts of fragment shaders, check them out below. Much of the fragment shader code we’ll write is taken from there and or slightly modified! I am not an expert on this stuff, I’m just playing around.

What are we building

Read on →
Tagged under gl, gl-react-native, instagram, react, react-native

React Native - Recreating the Apple TV Icons

I had attempted to recreate this in the past but could never come up with anything elegant. I saw this post not too long ago Recreating the Apple TV icons in JavaScript and CSS by Nash Vail.

He then went on to create a jQuery plugin to accomplish the effect. After reading the source and viewing the demos, it turns out re-making this in React Native is trivial.

So read the article, check out the live demo here and then we’ll continue on.

What are we building

Read on →
Tagged under apple, icons, react, react-native, tv, tvos

React Native - Easy Overlay Modal with Navigator

It pays to have the Navigator at the root of your application. This allows you to tunnel back and render something at the root. In our case a custom Modal overlay component. You can pass anything on the route object, and anytime you render the same component at the same place it will just re-render that same component. So lets use the power of React to solve our problems.

What are we making

Read on →
Tagged under modal, navigator, overlay, react, react-native

React Native - Morphing SVG Paths with React Art

More paths, more React Art, and more animations. What else have you come to expect of me. A question was posed on Reactiflux about morphing one path to another with React Art. Of course I took this as a “challenge”.

I say “challenge” because it took all of a few moments to check out the ART repo and see the Morph Demo which links to art/morph/path. That’s of course what this all about, morphing a path. Sebastian Markbåge has thought of everything.

On Reactiflux the demo of morphing batman logos was proposed and linked to. You can read the orignal source with the linked SVG at http://tavmjong.free.fr/blog/?p=741.

What are we building

Read on →
Tagged under animation, art, batman, morph, path, paths, react-art, react-native

React Native - How to make Facebook Reactions

Facebook reactions is a new liking system that Facebook is trialing on a limited basis. Why wait for them to roll it out when we can roll it out ourselves

Thanks to Engadget who created a gif of the animations from a youtube video. After a little slicing up and conversion from white to transparent we have a nice bunch of terrible animated gifs… but they’re animated so deal with it. Like/Love aren’t transparent since imagmagick was destroying the white in them.

This code will target .12 and above, running on .11 seemed to cause some slightly different layout issues. I’ve fixed them on RNPlay, so just a heads up. The difference is add height:50 to our likeContainer

Update – Android:

Animated Gifs are coming to React Native Android in .13. Also Android does not support overflow: visible so in order to get android to work we would need to get creative. On open they sit within the overflow: hidden container, once slid in we’d have to move them outside. Although they are gifs, so you’d have to find a way to sync em up.

Maybe 2 sets, one slides in, the other is rendered but hidden, then you toggle which is hidden and slide the other up. Fun stuff!

What are we building

Read on →
Tagged under animated, facebook, gif, react, react-native, reactions