Fluid Transitions for React Navigation

Fluid Transitions for React Navigation

This project aims to implement a simple yet powerful set of constructs for building fluid transitions between elements when navigating with React Navigation.

Fluid Transitions for React Navigation

Introduction

This project aims to implement a simple yet powerful set of constructs for building fluid transitions between elements when navigating with React Navigation.

The library is JavaScript only - no linking required.

Snack

The library implements a new navigator component called FluidNavigator with the same interface and routing configuration as the StackNavigator. The library has a component called Transition which can be used to build different types of transitions that will automatically be run when navigating between screens using the regular navigation actions.

The Navigator's API is identical to the StackNavigator except that it does not support a header component. It can easily be integrated with redux and your existing navigation setups.

Medium article React Native Animation Challenge #1

Installation

To install the library into your project, run yarn or npm:

yarn add react-navigation-fluid-transitions

or

npm i -S react-navigation-fluid-transitions

Compatible versions with react-navigation:

react-navigation-fluid-transitions react-navigation
0.3.x 3.x
0.2.x 2.x
0.1.x 1.x

Future improvements and development will be on [email protected].

Examples

Examples are included in the project and should be runnable from the root of the project folder.

To start the example run the following commands from the terminal:

npm i or yarn

To start the project run

react-native run-ios or react-native run-android

Shared Element Transitions

This example shows how two elements can be set up to automatically transition between each other when navigating between screens. A more detailed edition of this example can be found in the file SharedElements.js.

Note that a shared transition happens between two elements that looks the same. The library animates position and scale between the two hence using different styles and content between the two elements will result in strange transitions.

const Screen1 = (props) => (
  <View style={styles.container}>
    <Text>Screen 1</Text>
    <View style={styles.screen1}>
      <Transition shared='circle'>
        <View style={styles.circle}/>
      </Transition>
    </View>
    <Button
      title='Next'
      onPress={() => props.navigation.navigate('screen2')}
    />
  </View>
);

const Screen2 = (props) => (
  <View style={styles.container}>
    <Text>Screen 2</Text>
    <View style={styles.screen2}>
      <Transition shared='circle'>
        <View style={styles.circle2}/>
      </Transition>
    </View>
    <Button
      title='Back'
      onPress={() => props.navigation.goBack()}
    />
  </View>
);

const Navigator = createFluidNavigator({
  screen1: { screen: Screen1 },
  screen2: { screen: Screen2 },
});

Transitions

The library also supports transitions for elements wrapped in the Transition component. You can provide appear/disappear transitions that will be animated during navigation.

The Transition element supports appear and disappear transitions (appear will be used if disappear is not set), and these can either be one of the predefined transitions - or functions where you provide your own transitions.

<Transition appear='scale' disappear='bottom'>
  <View style={styles.circle}/>
</Transition>
Transition Types
Name Description
scale Scales the element in and out
top Translates the element in/out from the top of the screen
bottom Translates the element in/out from the bottom of the screen
left Translates the element in/out from the left of the screen
right Translates the element in/out from the right of the screen
horizontal Translates the element in/out from the left/right of the screen
vertical Translates the element in/out from the top/bottom of the screen
flip Flips the element in/out
Custom transitions

It is easy to provide custom transitions - just add the transition function to your component's appear or disappear property. The following example creates a transition that will scale in from 88 times the original size of the wrapped component:

<Transition appear={myCustomTransitionFunction}>
  <View style={styles.circle}/>
</Transition>

myCustomTransitionFunction = (transitionInfo) => {
  const { progress, start, end } = transitionInfo;
  const scaleInterpolation = progress.interpolate({
    inputRange: [0, start, end, 1],
    outputRange: [88, 80, 1, 1],
  });
  return { transform: [{ scale: scaleInterpolation }] };
}

Read more about the parameters and functionality for building custom transitions.

Native driver support

For achieving the best experience it's vital to get rid of JS evaluation during animation run. React-native Animated API allows for scaling in both axis using native drivers, but it's not possible to resize width and height (which calls for a layout computation). Thus the native driver is used only when the ratio of source and target component are the same and it's recommended for the best quality of animations.

API

FluidNavigator

Transition

Credit

Some of the concepts in the library builds on ideas from @lintonye's pull request and suggestion found here: Shared element transition #941.

Download Details:

Author: fram-x

Source Code: https://github.com/fram-x/FluidTransitions

react reactjs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.

ReactJS: The Javascript Developer’s Guide

This article will walk you through the concepts you would need to know to step into the world of widely used ReactJS.