React native navigation v5 shared element transition


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();
exportdefaultfunctionApp() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name=\"List\"
          options={{title: \"Boltskills\" }}
          component={ListScreen}
        />

        <Stack.Screenname=\"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}
      >

        <Viewstyle={styles.container}>
          <SharedElementid=\"image\">
            <Imagestyle={styles.image}source={require(\"./theboys.jpg\")} />
          SharedElement>

          <SharedElementid=\"text\">
            <Textstyle={styles.text}>The BoysText>
          SharedElement>
          <Textstyle={styles.caption}>tap meText>
        View>
      TouchableScale>
    React.Fragment>
  );
};
exportdefault 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>
    <Viewstyle={styles.container}>
      <SharedElementid=\"image\"style={StyleSheet.absoluteFill}>
        <Image
          style={styles.image}
          resizeMode=\"cover\"
          source={require(\"./theboys.jpg\")}
        />

      SharedElement>

      <SharedElementid=\"text\">
        <Textstyle={styles.text}>The BoysText>
      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\" },
];
exportdefault 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.