React native navigation v5 shared element transition
React native navigation v5 shared element transition
by on on android

React native navigation v5 shared element transition

  1. REACT NAVIGATION V5 SHARED ELEMENT TRANSITION

Using animations on your react apps is one of the most interesting things I come to know. But shared transition make me happy, the flexibility, the smoothing animation and the configuration makes thing much more simpler than I could imagine. Here is a guide on how to use it, if you are new to using shared element transition, i would suggest you take your time and do it.

This tutorial focuses on how to use shared element transition on react navigation 5. 

create a new expo app, I have a well explained method of doing that, click this link to check it out but I will still drop the procedures we are going to make use of.

step 1: step up an expo project

expo init appname

step 2: run the following commands on your cli inside your project directory

yarn add @react-navigation/native
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

step 3:  Install these following packages, am going to drop the one is have on my package.json file

"react-native-shared-element": "^0.7.0",
"react-native-touchable-scale": "^2.1.1"
"react-navigation-shared-element": "3.0.0",
"react-navigation-stack": "^2.8.3"


step 4: create two files one is ListScreen.js and the second one is Details.js

step 5: In your App.js file paste these code inside of it

import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createSharedElementStackNavigator } from "react-navigation-shared-element";
import { enableScreens } from "react-native-screens";
import ListScreen from "./src/components/ListScreen";
import DetailScreen from "./src/components/DetailScreen"
enableScreens();

type SharedStackParams = {
  List: undefined;
};
const Stack = createSharedElementStackNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="List"
          options={{ title: "Boltskills" }}
          component={ListScreen}
        />

        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>

  );
}

step 6: paste this lines of code to the files you created respectively

import * as React from "react";
import { View, StyleSheet, Text, Image } from "react-native";
import { SharedElement } from "react-navigation-shared-element";
import TouchableScale from "react-native-touchable-scale";
const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    fontSize: 40,
  },
  caption: {
    fontSize: 20,
    opacity: 0.5,
  },
  image: {
    width: 200,
    height: 160,
    resizeMode: "contain",
  },
});
const ListScreen= ({ modal, navigation }: any) => {
  const onPress = () => {
    navigation.navigate("Detail");
  };
  const onPressModal = () => {
    navigation.navigate("Modal");
  };
  return (
    <React.Fragment>
      <TouchableScale
        style={styles.flex}
        activeScale={0.9}
        tension={50}
        friction={7}
        useNativeDriver
        onPress={modal ? onPressModal : onPress}
      >

        <View style={styles.container}>
          <SharedElement id="image">
            <Image style={styles.image} source={require("./theboys.jpg")} />
          </SharedElement>
          <SharedElement id="text">
            <Text style={styles.text}>The Boys</Text>
          </SharedElement>
          <Text style={styles.caption}>tap me</Text>
        </View>
      </TouchableScale>
    </React.Fragment>

  );
};
export default ListScreen;

for details screen

import * as React from "react";
import { View, StyleSheet, Text, Image } from "react-native";
import { SharedElement } from "react-navigation-shared-element";
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
  },
  image: {
    width: "100%",
    height: "100%",
  },
  text: {
    marginTop: 20,
    color: "white",
    fontSize: 60,
    fontWeight: "bold",
  },
});
const DetailScreen = ({ navigation }: any) => (
  <React.Fragment>
    <View style={styles.container}>
      <SharedElement id="image" style={StyleSheet.absoluteFill}>
        <Image
          style={styles.image}
          resizeMode="cover"
          source={require("./theboys.jpg")}
        />

      </SharedElement>
      <SharedElement id="text">
        <Text style={styles.text}>The Boys</Text>
      </SharedElement>
    </View>
  </React.Fragment>

);
DetailScreen.navigationOptions = {
  title: "Boys will be boys",
}; 
DetailScreen.sharedElements = (route: any, otherRoute: any, showing: any) => [
  { id: "image", animation: "move" },
  { id: "text", animation: "fade" },
];
export default DetailScreen;

Note: do not forget to add the image path perfectly
step: 7 Run your application using 
yarn start
and it should work perfectly. Now for more of the configuration I suggest that you visit the shared element documentation page to customize the way you want it to look like. This is the link to react native navigation v5 shared element transition npm page and some more settings from v4 of share transition.

Please do make sure you share this page to your friends. Thank you.