React Native Animation Challenge #1

After I published my library react-navigation-fluid-transitions a little over a month ago I’ve been looking all over on places like Dribbble and Medium for some challenges to see what can be accomplished in React Native with the Fluid Transitions library. I got a lot of great feedback especially after I wrote an article about the library, but none of the examples I made contained anything complex and interesting — only simple transitions.

So I needed a challenge to see what I could build with react-navigation-fluid-transitions.

After a little digging I found a really nice transition by someone called Hwatery on dribbble.com showing some Nike Air Jordans being transformed in a really nice way that impressed me:

(https://dribbble.com/shots/4171226-Nike-x-Off-White)

I was especially impressed with how the red Nike Air Jordan shoe was being transitioned while the product paper moved to the bottom and the other images appeared at the bottom. I became inspired and decided to implement something similar to this transition in React Native with Fluid Transitions.

Getting started

I found a few images on Google after searching for Nike Air Jordan shoes and decided to test this out. Setting up a new project was quick and easy from my command prompt.

react-native init AnimationChallenge1
cd AnimationChallenge1
yarn add react-navigation
yarn add react-navigation-fluid-transitions

Next up I tried to build the screens with the picture of the rotated shoe and the red paper container that should be transformed. I hacked out some simple code and stylesheets to make them look ok, using a regular StackNavigator for navigation to begin with.

You can see the complete example with stylesheets and navigation code in the link at the bottom of this article.

This rendered the following results:

The two screens looking almost like the original — good enough for me as a starting point.

Note (in the full example source code) that I’m using absolutely positioned views with percentages to describe sizes and positions. This makes it easier to get the example to scale on different screens. I also cheated a little bit with the detail screen’s small images since I didn’t have the fancy border animation like in the original example.

Fluid Transitions

Now it was time to break down the different transitions in the original example. The most obvious transitions are the ones where the shoe and the red(ish) square are transformed using a shared transition when navigating between the two screens.

I started of by switching from using aStackNavigator to using aFluidNavigator to enabled transitions:

Before:

import { StackNavigator } from ‘react-navigation’;
...
const Navigator = StackNavigator({
    screen1: { screen: Screen1 },
    screen2: { screen: Screen2 },
}, { navigationOptions: { header: null } });

After:

import { FluidNavigator } from ‘react-navigation-fluid-transitions’;
...
const Navigator = FluidNavigator({
    screen1: { screen: Screen1 },
    screen2: { screen: Screen2 },
});

Note that we don’t need the navigationOptions configuration for the FluidNavigator, it doesn’t have a header.

To define a shared transition between two elements all we have to do is to wrap them in a Transition tag with the same id for the shared property.

Here is a snippet from the screen with Shared Transitions enabled for the paper element:

<Transition shared=’paper’>
   <View style={styles.paper}/>
</Transition>

As you can see, the view is wrapped in Transition element to tell the Fluid Navigator that we want it to be a part of a shared element transition with an element in the next screen. I repeated the same step for the corresponding elements in the second screen as well (full code will be revealed a little bit later).

Transitions

In addition to the shared element transitions I also added some extra markup to tell the Fluid Transitioner how to present the initial elements and how new elements in the second screen should appear by wrapping them in Transition tags — this time specifying the type of appear transition I wanted:

<Transition appear=’horizontal’> 
 <View style={styles.headerContainer}>
  <Text style={styles.header}>THE TEN</Text>
  <Text style={styles.subheader}>AIR JORDAN I</Text>
 </View>
</Transition>

This is how the source code for the first screen ended up with shared element transitions and appear transitions:

Second screen:

Note that I’ve also added the delay property to the transitions — this will start the appear transitions at different times to add the notion of a more organic buildup of the screen.

And this is how it all ended up looking:

Full source can be found in this snack:

Shoe Shop

If you see or know about other cool designs, please don’t hesitate contacting me and see if I get insipired once again :-)