Native Shared Element Transition Primitives For React Native

A React Native library that provides a set of comprehensive full native building blocks for performing shared element transitions in Router- or Transition libraries.

Features:

• No flickering
• CPU & GPU friendly
• Image resizeMode transitions
• Scrollview clipping
• Border (radius, color, width) transitions
• Background color transitions
• Shadow transitions
• Cross-fade transitions
• Clipping reveal transitions

Install & Import:

# Yarn
$ yarn add react-native-shared-element

# NPM
$ npm i react-native-shared-element –save

Basic Usage:

import {  SharedElement,
  SharedElementTransition,
  nodeFromRef
} from 'react-native-shared-element';
// Scene 1
let startAncestor;
let startNode;
<View ref={ref => startAncestor = nodeFromRef(ref)}>
  ...
  <SharedElement onNode={node => startNode = node}>
    <Image style={styles.image} source={...} />
  </SharedElement>
  ...
</View>
// Scene2
let endAncestor;
let endNode;
<View ref={ref => endAncestor = nodeFromRef(ref)}>
  ...
  <SharedElement onNode={node => endNode = node}>
    <Image style={styles.image} source={...} />
  </SharedElement>
  ...
</View>
// Render overlay in front of screen
const position = new Animated.Value(0);
<View style={StyleSheet.absoluteFill}>
  <SharedElementTransition
    start={{
      node: startNode,
      ancestor: startAncestor
    }}
    end={{
      node: endNode,
      ancestor: endAncestor
    }}
    position={position}
    animation='move'
    resize='auto'
    align='auto'
     />
</View>

Previews:

Download Details:

Author: IjzerenHein

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/IjzerenHein/react-native-shared-element

License: MIT