Create an Image/Video Gallery using React-Native
Last Updated :
23 Jul, 2024
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
-768.jpg)
Prerequisites and Technolgies Used
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.
Steps to create the project:
Step 1: Create the project:
npx create-expo-app image-video-gallery-app
Step 2: Navigate to the project
cd image-video-gallery-app
Step 3: Install the required libraries
npx expo install expo-av
npx expo install expo-image
npx expo install expo-media-library
Step 4: Configuration in app.json/app.config.js
{
"expo": {
"plugins": [
[
"expo-media-library",
{
"photosPermission": "Allow $(name) to access your photos.",
"savePhotosPermission": "Allow $(name) to save photos.",
"videosPermission": "Allow $(name) to access your videos.",
"isAccessMediaLocationEnabled": true
}
]
]
}
}
Project Structure:

The updated dependencies in package.json file will look like:
"dependencies": {
"expo": "~49.0.15",
"expo-status-bar": "~1.6.0",
"react": "18.2.0",
"react-native": "0.72.6",
"expo-media-library": "~15.4.1",
"expo-image": "~1.3.5",
"expo-av": "~13.4.1"
},
"devDependencies": {
"@babel/core": "^7.20.0"
}
Example: In this example we are following the above-explained approach.
JavaScript
// App.js
import { StatusBar } from "expo-status-bar";
import {
Button,
FlatList,
Modal,
Pressable,
ScrollView,
StyleSheet,
Text,
View,
} from "react-native";
import * as MediaLibrary from "expo-media-library";
import { useState } from "react";
import { Image } from "expo-image";
import { Video, ResizeMode } from "expo-av";
export default function App() {
const [galleryFiles, setGalleryFiles] = useState([]);
const [currentImage, setCurrentImage] = useState("");
const [mediaType, setMediaType] = useState("image");
const fetchMedia = async (first, mediaType) => {
const { status } = await MediaLibrary.requestPermissionsAsync();
if (status === "granted") {
const media = await MediaLibrary.getAssetsAsync({
first: first + 30,
sortBy: MediaLibrary.SortBy.creationTime,
mediaType:
mediaType === "image"
? MediaLibrary.MediaType.photo
: MediaLibrary.MediaType.video,
});
setGalleryFiles(media.assets);
}
};
const renderItem = ({ item }) => (
<View style={styles.imageContainer}>
<Pressable
onPress={() => {
setCurrentImage(item.uri);
setMediaType(item.mediaType);
}}
>
<Image
source={{ uri: item.uri }}
style={{ width: 200, height: 200 }}
/>
</Pressable>
</View>
);
return (
<View style={styles.container}>
<StatusBar style="auto" />
<Text style={styles.heading}>Welcome to GeeksforGeeks</Text>
<View
style={{
flexDirection: "row",
justifyContent: "space-around",
width: "100%",
padding: 10,
}}
>
<Button
title="Images"
onPress={() => {
setMediaType("image");
fetchMedia(0, "image");
}}
/>
<Button
title="Videos"
onPress={() => {
setMediaType("video");
fetchMedia(0, "video");
}}
/>
</View>
{/* view full image in modal */}
<Modal visible={currentImage !== ""} transparent={false}>
<View style={{ flex: 1, backgroundColor: 0 }}>
<Pressable
style={{
position: "absolute",
top: 40,
zIndex: 1,
flex: 1,
alignSelf: "center",
}}
title="Close"
onPress={() => setCurrentImage("")}
>
<Text
style={{
color: "black",
fontSize: 20,
padding: 10,
backgroundColor: "white",
}}
>
Close
</Text>
</Pressable>
{mediaType === "video" ? (
<Video
style={{
width: "100%",
height: "100%",
}}
source={{
uri: currentImage,
}}
useNativeControls
resizeMode={ResizeMode.CONTAIN}
isLooping
/>
) : (
<Image
source={{ uri: currentImage }}
style={{ width: "100%", height: "100%" }}
/>
)}
</View>
</Modal>
<View style={styles.scrollContainer}>
<Text style={{ fontSize: 20, marginBottom: 20 }}>
My Gallery
</Text>
<FlatList
data={galleryFiles}
renderItem={renderItem}
keyExtractor={(item) => item.id}
numColumns={3}
onEndReached={() => {
fetchMedia(galleryFiles.length, mediaType);
}}
onLayout={() => {
fetchMedia(galleryFiles.length, mediaType);
}}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: "10%",
},
scrollContainer: {
flex: 1,
marginTop: 20,
width: "100%",
},
heading: {
color: "green",
fontSize: 30,
textAlign: "center",
fontWeight: "bold",
},
imageContainer: {
flex: 1,
margin: 1,
aspectRatio: 1, // This ensures that images maintain their aspect ratio
borderRadius: 8,
overflow: "hidden",
},
image: {},
});
Steps to run the application:
Step 1: Navigate to the terminal or command prompt and type the required command there to run the React native application.
npx expo start
Step 2: Depending on your operating system, type the following command in terminal
npx react-native run-android
npx react-native run-ios
Step optional: To run on Web, you need to install the following packages
npx expo install react-dom react-native-web @expo/webpack-config
Step 3: To run on web, press w on Terminal will application is running. For Android/IOS, install the Expo app and scan the QR code or enter the link of Metro in the Terminal.
Output:
Similar Reads
Create an Image/Video Downloader App using React-Native There are a vast amount of videos available on the internet but we are not able to download most of them. In this article, you will be guided through the step-by-step to create an Image/Video Downloader App using React-Native. Preview of final output: Let us have a look at how the final output will
3 min read
Create an Image Crop Tool using React-Native In this tutorial, we are going to build an Image crop tool using React-Native. The Image Crop tool is a very important tool for cropping the Images. It will allow the users to pick an image from storage, crop it, and later save it locally.Preview Image:Prerequisites Introduction to React NativeReact
4 min read
Create an Image Carousal using React-Native In this article, we will build the Image Carousal using React Native language. In this interactive application, we have taken some sample GFG course images which are automatically and manually scrolled. When the user clicks on the image, the additional information about that course is shown in a mod
5 min read
Create File Explorer App using React-Native Creating a File Explorer app using React Native provides a seamless way to explore and interact with the device's file system on both iOS and Android platforms. In this tutorial, we'll guide you through the process of building a simple yet functional File Explorer app.Output Preview:Prerequisites:No
3 min read
Create an Employee Management using React-Native Creating the Employee Management Application using React-Native is a skill-development project. In this project, the application administrator can manage employees by adding them dynamically, updating their details, and deleting them as needed. In this article, we will develop this Employee manageme
8 min read
Create an Image Resize and Editor using React-Native Image manipulation in mobile apps is a crucial functionality, encompassing tasks such as cropping and resizing, as well as adding filters or overlays. In this tutorial, you will learn the process of building a simple Image Resize and Editor application using React-Native. This project aims to provid
6 min read