React Native Modal With Dynamic Content
Hello Guys,
Today we will learn about react native. We all know about the Modal. Modal is a beautiful and helpful component for front-end development. Sometimes we need to show the content detail in the modal view. The support we have a list of projects. We are only showing images and a short description on the list page. If we want to show all details about the project. So we need to redirect the user to a new page or we can show the details in the modal. Normally, Developers create a separate modal for each project. Suppose we have 10 projects then we need to create 10 modals for this. Which is not a good habit. It will increase the size of the code. It will also increase the duplicate content of the project.
So, Today we will learn how we can use a single modal for all projects. This means we will create the modal with the dynamic values.
Let's Start.
Project Listing
I am attaching the screenshot. Where we can see the list of projects.
Modal with Project Details
Check the screenshot of How we can show content in the modal.
Code for Dynamic Modal react native
You can use the below code to create the react native modal with dynamic content.
import { View, Text, SafeAreaView, TouchableOpacity,Image,ScrollView,Modal } from 'react-native'
import React, { useState } from 'react'
import Header from '../components/Header'
import { XMarkIcon } from 'react-native-heroicons/outline';
const ProjectScreen = () => {
const projects = [
{ title: "Project 1", description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type book 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type book 1Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type book 1Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type book 1 ...", url: "https://templatebench.com/storage/142/React-Native-Modal-With-Dynamic-Content.webp" },
{ title: "Project 2", description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type book 2 ...", url: "https://templatebench.com/storage/142/React-Native-Modal-With-Dynamic-Content.webp" },
{ title: "Project 3", description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type book 3 ...", url: "https://templatebench.com/storage/142/React-Native-Modal-With-Dynamic-Content.webp" },
{ title: "Project 4", description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type book 4 ...", url: "https://templatebench.com/storage/142/React-Native-Modal-With-Dynamic-Content.webp" },
{ title: "Project 5", description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type book 5 ...", url: "https://templatebench.com/storage/142/React-Native-Modal-With-Dynamic-Content.webp" }
];
const [openModal, setOpenModal] = useState(false);
const [projectData, setProjectData] = useState([]);
const openModel = (project) => {
setOpenModal(true)
setProjectData(project)
}
return (
<>
<SafeAreaView>
<ScrollView>
<View>
<Header />
<View className="mt-4">
{projects?.map((project,index) =>(
<TouchableOpacity
className={`bg-white border border-gray-200 p-2 `}
key={index}
onPress={()=>openModel(project)}
>
<View className="flex-row">
<View className="flex-1 pr-2">
<Text className="text-lg mb-1"> {project.title}</Text>
<Text className="text-gray-400" numberOfLines={7}> {project.description}</Text>
</View>
<View>
<Image
style={{
borderWidth:1,
borderColor:"#F3F3F4"
}}
source={{
uri : project.url
}}
className="h-40 w-40 bg-gray-300 p-4"
/>
</View>
</View>
</TouchableOpacity>
))}
</View>
<Modal
visible={openModal}
animationType="slide"
className="top-10 m-20"
>
<SafeAreaView>
<View className="flex-row items-center mx-4 space-x-2">
<Image
source={{
uri: 'https://techmarbles.com/wp-content/uploads/2022/03/final-logo.png'
}}
className="h-10 w-10 bg-gray-300 p-4 rounded-full"
/>
<View className="flex-1">
<Text className="font-bold text-xl">
We Create Websites
</Text>
<Text className="font-bold text-gray-400 text-xs">
You Deserve
</Text>
</View>
<TouchableOpacity
onPress={() => setOpenModal(false)}
>
<XMarkIcon color='#f6931d' size={36} />
</TouchableOpacity>
</View>
<View className="mt-4">
<Image
source={{
uri : projectData.url
}}
className="w-[100%] h-[200]"
/>
<View className="flex items-center p-4 bg-[#f6931d] ">
<Text className="text-white">{projectData.title}</Text>
</View>
<View className="flex-row items-center p-2 bg-gray-10 ">
<View>
<Text>{projectData.description}</Text>
</View>
</View>
</View>
</SafeAreaView>
</Modal>
</View>
</ScrollView>
</SafeAreaView>
</>
)
}
export default ProjectScreen
We can check above that, how we can use the modal with the dynamic content for the modal. Whenever any user will click on the project div. It will page the project array to modal. Where we can set the content for the modal.
If there is any confusion, You can post a comment below.
Thanks
Templatebench
We are Template bench. We love programming. We also love to share tips and tricks with you.