The Shapes of React Native


After drawing a bit of inspiration from The Shapes of CSS I decided to see if I could remake some of these shapes with a subset of css. If you haven’t been on css-tricks check them out, Chris Coyier is fantastic!

Of course we have access to react-art here so drawing shapes is pretty simple but my goal is to see if I can just use normal Views and all of the styles I have at my exposure to make as many shapes as I can off of the Shapes of CSS list.

Some of these are obvious and some of them get a little crazy but most of them are all hacks in the first place!

I’m going on vacation for a month. So this shall be dubbed “One of the more pointless blog posts on my blog written out of sheer tiredness”.

Read on →
Tagged under css, react, react-native, shapes

React Native Periscope Hearts Animation


I was contacted asking if it was possible to recreate the periscope heart animations in react-native. I was also linked to someone rebuilding the same effect in Framer.js, you can check out the linked video here

Periscope not only has an iPhone/Android app but it also has a web app with the same heart effect. I could take a look at the animations being done on it but we’ll just eye ball it.

What we are building

Live code:

Read on →
Tagged under animation, hearts, periscope, react, react-native

React Native Youtube Animated Video Slide


I was going to spend some time digging into gl-react-native when someone asked in the slack channel how to achieve youtube like video sliding navigation. Now I won’t get into the navigation portion, just the animation part. The navigation portion can be solved by basically treating video routes as a modal. Thus they are always over the top of whatever the previous route was.

What are we building?

If you haven’t seen it, YouTube allows you to drag the current playing video down to the bottom right corner and have it continue to play while you browse the rest of the app.

Something like this.

Read on →
Tagged under animated, animation, native, react, react-native, slider, video, youtube

React-Native Animated with React-Art - Firework Tap To Shoot


This actually could be built with out react-art, but we’ll use react-art just for good measure. What are we building? A firework show. Nothing fancy. Just tap on the screen and a firework will be shot to that point and explode.


This is what we’re building

Read on →
Tagged under animated, animations, firework, react, react-art, react-native, shooter, tap

React-native press and hold button actions


Another common interaction is the press and hold to fire an action. Sometimes it’s delete, sometimes it’s save, but whatever it is you want to provide feedback to your user. React Native ships with a few Touchable components like TouchableOpacity, TouchableHighlight and also TouchableBounce that provide feedback to users but we’ll build a button that fills up over a set period of time then triggers an action.

Read on →
Tagged under actions, button, react, react-native