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

React Native - Pan Responder inside of a ScrollView

Lets talk PanResponder in a ScrollView. This gets brought up frequently, so lets address it.

Scenario

You’ve got a PanResponder in your ScrollView. When you scroll you want it to scroll, when you interact with the component with the PanResponder you want it to do PanResponder things.

What happens

Things start scrolling just fine. You attemp to drag, all goes swimmingly, then the ScrollView scrolls, your drag stops working and it just sits there stuck until you go re-interact with it. Yikes. You curse the react native gods and begrudgingly start learning Objective-C.

Janky

Read on →
Tagged under panresponder, react-native, scrollview