In this tutorial, we are going to create React Native Shared Element Transition by replicating as an example. This tutorial will address an interesting aspect of using React Animation and Dimensions to making images look cool. Here, we are not going to use any external react plugins. All the required components like Image, Animated, Dimensions are provided by the package.this tutorial inspired from React native ecommerce template Apple app of the day react-native [Read Part II here] [Read Part III here] The idea is to start with simple React Native project. Then, we are going to add images and wrap the images with different components from the react-native package and configure it to implement react-native shared element transition. So, let’s get started!! Start with an empty project First, we are going to create a starting boilerplate React Native application. For that, we need to run following commands into our desired directory: >>react-native init <example-app> After the installation of the blank react-native application is complete, we are going to run the app in our iOS emulator by using the following command: >>>react-native run-ios As a result, we will get the following result in our emulator screen: Adding Image and configuring it Now, we are going to add images to our app. For that, we need to remove all unnecessary code from our file. Then, we need to add the following code to our file. The images are imported from the image directory. We can create our own image directory into our project source directory, add our own images and then import them in an array constant as given in the code snippet below: App.js App.js React ; {View} ; images = [
  { : , : ( )},
  { : , : ( )},
  { : , : ( )},
  { : , : ( )},
]; {
  render() { ;
  }
} import from 'react' import from 'react-native' const id 1 src require './image/1.jpeg' id 2 src require './image/2.jpeg' id 3 src require './image/3.jpeg' id 4 src require './image/4.jpeg' export default . class App extends React Component return < > View </ > View In the code snippet, above we have only included the images constant and a component from the react-native package. Hence, the app will appear blank in the emulator if we re-run it. View So, in order to add the imported images into our screen, we are going to replace the component with component so that we can view the images on the screen by scrolling up and down the screen. Then, we are going to map the images on to the screen by using function which helps us iterate through the array and return the JSX elements. Here, the element we are returning from the map function is the component in which the imported images are integrated. For that, we can make use of the code provided in the following code snippet: View ScrollView map Image React ; {Image, ScrollView} ; images = [
  { : , : ( )},
  { : , : ( )},
  { : , : ( )},
  { : , : ( )},
]; {
  render() { ( <Image key={image.id} source={image.src} />;
        })}
      </ScrollView> import from 'react' import from 'react-native' const id 1 src require './image/1.jpeg' id 2 src require './image/2.jpeg' id 3 src require './image/3.jpeg' id 4 src require './image/4.jpeg' export default . class App extends React Component return {images.map(image => {
          return < = }}> ScrollView style {{flex: 1 );
  }
} As a result, we are going to get the following screen in our emulator: As we can see in the emulator simulation above, the images appear on the screen and hence, are scrollable. Wrapping the Image up The next step is to wrap the component by using and component in order to create an animation when touched. The component is used to make the images clickable without providing any kind of feedback on the screen while the component makes images animate with a proper view. Thus, the code to implement this is provided in the code snippet below: Image TouchableWithOutFeedBack Animated View TouchableWithOutFeedBack Animated View React ; {
  Image,
  ScrollView,
  TouchableWithoutFeedback,
  Animated,
} ; images = [
  { : , : ( )},
  { : , : ( )},
  { : , : ( )},
  { : , : ( )},
]; {
  render() { ( <TouchableWithoutFeedback key={image.id}>
              <Animated.View>
                <Image source={image.src} />
              </Animated.View>
            </TouchableWithoutFeedback>
          );
        })}
      </ScrollView>
    );
  }
} import from 'react' import from 'react-native' const id 1 src require './image/1.jpeg' id 2 src require './image/2.jpeg' id 3 src require './image/3.jpeg' id 4 src require './image/4.jpeg' export default . class App extends React Component return {images.map(image => {
          return ( < = }}> ScrollView style {{flex: 1 Adding Size configurations to Image with Dimensions component In this step, we are going to configure the height and width of our images on the basis of screen size. In order to get the screen height and width, we are going to make use of component provided by the react-native package. component provides function through which we can get the full-screen window width and height. Here, we are going to store those screen window height and width into two variables namely AND as shown in the code snippet below: Dimensions Dimensions get() SCREEN_WIDTH SCREEN_HEIGHT Image,
  ScrollView,
  TouchableWithoutFeedback,
  Animated,
  Dimensions,
} ; SCREEN_WIDTH = Dimensions.get( ).width; SCREEN_HEIGHT = Dimensions.get( ).height; from 'react-native' let 'window' let 'window' Then, we are going to add those size style configurations to our component with decreased by 150 as shown in the code snippet below: Animated View height <TouchableWithoutFeedback key={image.id}> <Image source={image.src} />
     </Animated.View>
</TouchableWithoutFeedback> < = , , ,
               }}> Animated.View style {{ height: SCREEN_HEIGHT - 150 width: SCREEN_WIDTH padding: 15 Therefore, we get the following result in our emulator screen: Adding styles to Image This step is pretty simple. We are just going to add some inline styles to our Image component in order to make it look more appealing. We are going to add the inline styles using style prop as shown in the code snippet below: <TouchableWithoutFeedback key={image.id}> <Image
                 source={image.src}
                 style={{
                   flex: 1,
                   height: null,
                   width: null,
                   resizeMode: 'cover',
                   borderRadius: 20,
                 }}
               />
             </Animated.View>
</TouchableWithoutFeedback> < = , , ,
               }}> Animated.View style {{ height: SCREEN_HEIGHT - 150 width: SCREEN_WIDTH padding: 15 Hence, we get the following result in our emulator screen where images appear more better than before. But, as we can see, there is an overlay of emulator’s status bar over the app’s image. So, in order to fix that we are going to add a container. The function of component is to render content within the safe area boundaries of a device. So, we are going to wrap the component with component as shown in the code snippet below: SafeAreaView SafeAreaView ScrollView SafeAreaView React ; {
  Image,
  ScrollView,
  TouchableWithoutFeedback,
  Animated,
  Dimensions,
  SafeAreaView,
} ; images = [
  { : , : ( )},
  { : , : ( )},
  { : , : ( )},
  { : , : ( )},
]; SCREEN_WIDTH = Dimensions.get( ).width; SCREEN_HEIGHT = Dimensions.get( ).height; {
  render() { ( <ScrollView style={{flex: 1}}>
          {images.map(image => {
            return (
              <TouchableWithoutFeedback key={image.id}>
                <Animated.View
                  style={{
                    height: SCREEN_HEIGHT - 150,
                    width: SCREEN_WIDTH,
                    padding: 15,
                  }}>
                  <Image
                    source={image.src}
                    style={{
                      flex: 1,
                      height: null,
                      width: null,
                      resizeMode: 'cover',
                      borderRadius: 20,
                    }}
                  />
                </Animated.View>
              </TouchableWithoutFeedback>
            );
          })}
        </ScrollView>
      </SafeAreaView>
    );
  }
} import from 'react' import from 'react-native' const id 1 src require './image/1.jpeg' id 2 src require './image/2.jpeg' id 3 src require './image/3.jpeg' id 4 src require './image/4.jpeg' let 'window' let 'window' export default . class App extends React Component return < = }}> SafeAreaView style {{flex: 1 Hence, we get the following result our emulator screen: Finally, our implementation of Shared Element Transition is successful. React Native Conclusion In this first part of the tutorial, we learned how to set up the blank react native application. We also learned how to make use of different components from the react-native package. Moreover, we also got detail guidance of how to set up image UI for Animation and make use of Dimensions, ScrollView and SafeAriaView components. Lastly, we successfully completed our implementation of React Native shared Element transitions. Credit content from #1 Apple App of the day Animation by Unsureprogrammer image from Unsplash Disclosure This post includes affiliate links; I may receive compensation if you purchase products or services from the different links provided in this article.

Apple

React Native Apple App of the Day Animation Part II : Open Image

React Native Apple App of the Day Animation Part I : Setup UI

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

10 Best React Native Chart Libraries

54 Stories To Learn About React Native Development

A Guide to Embedding and Playing YouTube Videos in React Native Apps

Amazon UI Clone with React Native #1 : Setting up Menu Bar

Amazon UI Clone with React Native #2 : Recommendations View

Checkers on React - Part 3 - Figure

10 Best React Native Chart Libraries

54 Stories To Learn About React Native Development

A Guide to Embedding and Playing YouTube Videos in React Native Apps

Amazon UI Clone with React Native #1 : Setting up Menu Bar

Amazon UI Clone with React Native #2 : Recommendations View

Checkers on React - Part 3 - Figure

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps