React Native - How to create Twitter exploding hearts

So we’re going to build this exploding heart, except just know Twitter kind of cheated. Not really but they used an image and played each frame adjusting background-position so it looked animated. Okay not cheated they used a really smart technique but what’s the fun in doing that when we can build it for real!

I’ve already built a Firework concept here http://browniefed.com/blog/2015/08/29/react-native-animated-with-react-art-firework-show/ and about Hearts here http://browniefed.com/blog/2015/09/07/react-native-periscope-hearts-animation/ now we just need to bring them together.

For the record this is what theirs looks like here http://i.imgur.com/3a8PiSY.png

What are we building

Read on →
Tagged under animations, exploding, heart, react, react-art, react-native, twitter

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