Approach to create Image/Video Gallery App

• The application will be single page app.
• It will contain two types, image and video so we used useState hook with default value of image.
• Using the FlatList component, we load the assets from MediaLibrary. It gets the permission from user in the device.
• On getting the assets, we display the image and videos in different tabs using Buttons.
• We wrap the images with Pressable. On clicking, we set the file location .
• The Modal component becomes visible on setting the imageName variable. Here we check if image, we display an image, else video.

An Image/Video Gallery is a common feature in mobile applications. This article will guide you for creating an Image/Video Gallery using React Native.We will learn to build an Image/Video Gallery app using React-Native. In this app, we will display the images and videos in the form of a grid, and on clicking, we can view them. If an image is clicked, the image viewer is opened, similarly, if a video is clicked, a video player is launched. By the end of this tutorial, you will have solid understanding of MediaLibrary usage in React Native.

Preview of final output: Let us have a look at how the final output will look like