React Native Animated Book

So I wrote a book of sorts on React Native animations. Mostly covering the animated API, and soon much much more. Check it out here http://browniefed.com/react-native-animation-book/.

I cover the API, and walk through basic animation examples, and soon advanced topics. Learn to create a fun dragging, spinning square.

This is just a quick update :)

Tagged under animated, animation, book, react-native

React Native - How to bridge a Swift View

So in my previous article we bridged an Objective-C View component, I learned a lot, and also learned that I did a few unnecessary things. No worry though, we’ll learn from that and make improvements in our Swift bridging.

First off want to give a thanks to Tony Xiao. He’s been a great help in sharing code and giving explanations to a Swift and native development novice like myself. Also Asa Miller for writing some of the original code and always collaborating on whatever we’re both working on.

What

We’re going to bridge https://github.com/soffes/GradientView. Looks pretty nifty. Now we could also just use ReactART for this but we won’t.

Read on →
Tagged under bridge, gradient, react-native, swift, swift-view-component

React Native - How to Bridge an Objective-C View Component

I am not an Objective-C developer so some of the things I say here may be wrong, so tell me if I’m wrong! React Native is young enough that some cool existing native components need to still be bridged to take advantage of. There is plenty of information out there about bridging modules, and view components.

Here are a fiew

Some of these are more up to date and in depth and others lesser so.

What?

Read on →
Tagged under bridging, objc, objective-c, react-native, view

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