Description:
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:
