React Native FlexboxFroggy

If you are in the React Native world and haven’t heard about Exponent then you’ve been living under a rock. It’s being built by James Ide, Brent Vatne, and Charlie Cheever. All who have contributed significantly to the React Native community and ecosystem.

Brent is holding a contest to win some awesome prizes, including tickets to the sold out ReactJS 2016 Conf. Check out the contest here https://gist.github.com/brentvatne/7d88f846417452355b18.

What does this have to do with flexbox? Well as my entry into the contest I converted http://flexboxfroggy.com/ to React Native.

Even adding animations was a breeze! One line of code LayoutAnimation.spring() easily makes all frogs spring into place!

You can check out the code here https://github.com/browniefed/flexboxfroggy

Or if you have Exponent installed you can run it easily on your phone by just tapping this link http:[email protected]/flexboxfroggy

If you don’t have Exponent installed I highly suggest you install it!

That’s all from me for now. Looking forward to getting back to blogging in 2016!

Tagged under exponent, flexbox, flexboxfroggy, react-native

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