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