I am using a Modal in my React Native app to display address selection options. The modal works fine, but when I use conditional rendering to show dropdown fields based on selected values, the modal flickers for a brief moment before closing. If I remove the conditional rendering, the issue disappears.
I tried adding a small delay using setTimeout(() => setIsModalVisible(false), 100), but it didn't work. The issue persists, and I’m unsure how to fix it. How can I prevent this flickering while keeping the conditional rendering?
import { View, Text, TextInput, Pressable, Image, Modal } from 'react-native'
import React, { useEffect, useState } from 'react'
import { useGeolocationStore, useUserStore } from '../app/stores/store.js'
import GradientButton from '../components/GradientButton'
import AddressModal from '../components/AddressModal'
const SignupPresentAddress = ({ setCurrentComponent }) => {
const { user, setSelectedAddressType, setSelectedAddressCategory } = useUserStore()
const [isModalVisible, setIsModalVisible] = useState(false)
const [isDivisionSelected, setIsDivisionSelected] = useState(false)
const [isDistrictSelected, setIsDistrictSelected] = useState(false)
const [isUpazilaSelected, setIsUpazilaSelected] = useState(false)
useEffect(() => {
if(user.presentAddress && user.presentAddress.division) {
setIsDivisionSelected(true)
}
if(user.presentAddress && user.presentAddress.district) {
setIsDistrictSelected(true)
}
if(user.presentAddress && user.presentAddress.upazila) {
setIsUpazilaSelected(true)
}
}, [user.presentAddress])
const handlePrevButtonPress = () => {
setCurrentComponent('m-verification')
}
const handleNextButtonPress = () => {
setCurrentComponent('permanent-address')
}
const handlePressDropdown = () => {
setIsModalVisible((prevState) => !prevState)
}
// set selected address type to present when the component is rendered
useEffect(() => {
setSelectedAddressType('present')
}, [])
return (
<>
<Text className='mt-4 text-2xl text-center text-white'>Present Address</Text>
<View className='w-full max-w-[360px] mt-4 gap-y-4'>
<View>
<Text className='text-white text-lg'>Division</Text>
<Pressable
onPress={() => {
handlePressDropdown()
setSelectedAddressCategory('divisions')
}}
>
<View className='relative'>
<TextInput
className='bg-white rounded-full text-lg mt-2 px-5 py-3 p-4'
value={user?.presentAddress?.division?.name}
editable={false}
/>
<Image
className='absolute w-10 h-10 right-3 top-3'
source={require('../assets/icons/expand-arrow-down.png')}
/>
</View>
</Pressable>
<AddressModal
isModalVisible={isModalVisible}
setIsModalVisible={setIsModalVisible}
/>
</View>
{isDivisionSelected && (
<View>
<Text className='text-white text-lg'>District</Text>
<Pressable
onPress={() => {
handlePressDropdown()
setSelectedAddressCategory('districts')
}}
>
<View className='relative'>
<TextInput
className='bg-white rounded-full text-lg mt-2 px-5 py-3 p-4'
value={user?.presentAddress?.district?.name}
editable={false}
/>
<Image
className='absolute w-10 h-10 right-3 top-3'
source={require('../assets/icons/expand-arrow-down.png')}
/>
</View>
</Pressable>
<AddressModal
isModalVisible={isModalVisible}
setIsModalVisible={setIsModalVisible}
/>
</View>
)}
{isDistrictSelected && (
<View>
<Text className='text-white text-lg'>Sub-district</Text>
<Pressable
onPress={() => {
handlePressDropdown()
setSelectedAddressCategory('upazilas')
}}
>
<View className='relative'>
<TextInput
className='bg-white rounded-full text-lg mt-2 px-5 py-3 p-4'
value={user?.presentAddress?.upazila?.name}
editable={false}
/>
<Image
className='absolute w-10 h-10 right-3 top-3'
source={require('../assets/icons/expand-arrow-down.png')}
/>
</View>
</Pressable>
<AddressModal
isModalVisible={isModalVisible}
setIsModalVisible={setIsModalVisible}
/>
</View>
)}
{isUpazilaSelected && (
<View>
<Text className='text-white text-lg'>Union</Text>
<Pressable
onPress={() => {
handlePressDropdown()
setSelectedAddressCategory('unions')
}}
>
<View className='relative'>
<TextInput
className='bg-white rounded-full text-lg mt-2 px-5 py-3 p-4'
value={user?.presentAddress?.union?.name}
editable={false}
/>
<Image
className='absolute w-10 h-10 right-3 top-3'
source={require('../assets/icons/expand-arrow-down.png')}
/>
</View>
</Pressable>
<AddressModal
isModalVisible={isModalVisible}
setIsModalVisible={setIsModalVisible}
/>
</View>
)}
<View>
<Text className='text-white text-lg'>Address Line 1 (e.g. House / Road / Village)</Text>
<TextInput
className='bg-white rounded-full text-lg mt-2 px-5 py-3 p-4'
placeholder='Address Line 1 (e.g. House / Road / Village)'
numberOfLines={1}
/>
</View>
<View>
<Text className='text-white text-lg'>Address Line 2 (e.g. Area / Post Office)</Text>
<TextInput
className='bg-white rounded-full text-lg mt-2 px-5 py-3 p-4'
placeholder='Address Line 2 (e.g. Area / Post Office)'
numberOfLines={1}
/>
</View>
<View className='flex-row w-full justify-between mt-4'>
<GradientButton
handlePress={handlePrevButtonPress}
>
<Text className='text-xl text-dark1 text-center'>Previous</Text>
</GradientButton>
<GradientButton
handlePress={handleNextButtonPress}
>
<Text className='text-xl text-dark1 text-center'>Next</Text>
</GradientButton>
</View>
</View>
</>
)
}
export default SignupPresentAddress
import { View, Text, Modal, TouchableOpacity, FlatList, StyleSheet } from 'react-native'
import React, { useEffect, useState } from 'react'
import { useGeolocationStore, useUserStore } from '../app/stores/store.js'
const AddressModal = ({
isModalVisible,
setIsModalVisible,
}) => {
const { divisions, districts, upazilas, unions } = useGeolocationStore()
const { user, updateUser, selectedAddressType, selectedAddressCategory } = useUserStore()
const [filteredDistricts, setFilteredDistricts] = useState([])
const [filteredUpazilas, setFilteredUpazilas] = useState([])
const [filteredUnions, setFilteredUnions] = useState([])
const handleSelect = (item) => {
if (selectedAddressType === 'present') {
if (selectedAddressCategory === 'divisions') {
updateUser({
...user,
presentAddress: {
...user.presentAddress,
division: item,
district: null,
upazila: null,
union: null,
}
})
const filtered_districts = districts.filter((district) =>
item.id === district.division_id
)
setFilteredDistricts(filtered_districts)
} else if (selectedAddressCategory === 'districts') {
updateUser({
...user,
presentAddress: {
...user.presentAddress,
district: item,
upazila: null,
union: null,
}
})
const filtered_upazila = upazilas.filter((upazila) =>
item.id === upazila.district_id
)
setFilteredUpazilas(filtered_upazila)
} else if (selectedAddressCategory === 'upazilas') {
updateUser({
...user,
presentAddress: {
...user.presentAddress,
upazila: item,
union: null,
}
})
const filtered_union = unions.filter((union) =>
item.id === union.upazilla_id
)
setFilteredUnions(filtered_union)
} else if (selectedAddressCategory === 'unions') {
updateUser({
...user,
presentAddress: {
...user.presentAddress,
union: item,
}
})
}
} else if (selectedAddressType === 'permanent') {
if (selectedAddressCategory === 'divisions') {
updateUser({
...user,
permanentAddress: {
...user.permanentAddress,
division: item,
district: null,
upazila: null,
union: null,
}
})
const filtered_districts = districts.filter((district) =>
item.id === district.division_id
)
setFilteredDistricts(filtered_districts)
} else if (selectedAddressCategory === 'districts') {
updateUser({
...user,
permanentAddress: {
...user.permanentAddress,
district: item,
upazila: null,
union: null,
}
})
const filtered_upazila = upazilas.filter((upazila) =>
item.id === upazila.district_id
)
setFilteredUpazilas(filtered_upazila)
} else if (selectedAddressCategory === 'upazilas') {
updateUser({
...user,
permanentAddress: {
...user.permanentAddress,
upazila: item,
union: null,
}
})
const filtered_union = unions.filter((union) =>
item.id === union.upazilla_id
)
setFilteredUnions(filtered_union)
} else if (selectedAddressCategory === 'unions') {
updateUser({
...user,
permanentAddress: {
...user.permanentAddress,
union: item,
}
})
}
}
setIsModalVisible(false)
}
return (
<View>
<Modal
visible={isModalVisible}
transparent
animationType="fade"
onRequestClose={() => setIsModalVisible(false)}
>
<TouchableOpacity
style={styles.modalBackground}
onPress={() => setIsModalVisible(false)}
>
<View style={styles.dropdownContainer}>
<FlatList
data={
selectedAddressCategory === 'divisions' ? divisions
: selectedAddressCategory === 'districts' ? filteredDistricts
: selectedAddressCategory === 'upazilas' ? filteredUpazilas
: selectedAddressCategory === 'unions' ? filteredUnions
: null
}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<>
<TouchableOpacity
style={styles.option}
onPress={() => handleSelect(item)}
>
<Text style={styles.optionText}>{item.name}</Text>
</TouchableOpacity>
<View style={styles.lastOption} />
</>
)}
/>
</View>
</TouchableOpacity>
</Modal>
</View>
)
}
export default AddressModal
const styles = StyleSheet.create({
container: {
padding: 16,
},
dropdownButton: {
padding: 12,
backgroundColor: '#f0f0f0',
borderRadius: 8,
borderWidth: 1,
borderColor: '#ccc',
},
buttonText: {
fontSize: 16,
},
modalBackground: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.2)',
},
dropdownContainer: {
width: '80%',
height: '80%',
backgroundColor: 'white',
borderRadius: 8,
padding: 16,
elevation: 4,
},
option: {
padding: 12,
borderTopWidth: 1,
borderTopColor: '#ddd',
},
lastOption: {
borderBottomWidth: 1,
borderBottomColor: '#ddd',
},
optionText: {
fontSize: 16,
textAlign: 'center'
},
});
I tried using conditional rendering to show and hide the modal when selecting an item. However, when I select an item, the modal briefly reappears before closing. I expected the modal to close immediately without flickering. I also attempted adding a short delay (setTimeout) before updating the state, but the issue persists.
I am using a Modal in my React Native app to display address selection options. The modal works fine, but when I use conditional rendering to show dropdown fields based on selected values, the modal flickers for a brief moment before closing. If I remove the conditional rendering, the issue disappears.
I tried adding a small delay using setTimeout(() => setIsModalVisible(false), 100), but it didn't work. The issue persists, and I’m unsure how to fix it. How can I prevent this flickering while keeping the conditional rendering?
import { View, Text, TextInput, Pressable, Image, Modal } from 'react-native'
import React, { useEffect, useState } from 'react'
import { useGeolocationStore, useUserStore } from '../app/stores/store.js'
import GradientButton from '../components/GradientButton'
import AddressModal from '../components/AddressModal'
const SignupPresentAddress = ({ setCurrentComponent }) => {
const { user, setSelectedAddressType, setSelectedAddressCategory } = useUserStore()
const [isModalVisible, setIsModalVisible] = useState(false)
const [isDivisionSelected, setIsDivisionSelected] = useState(false)
const [isDistrictSelected, setIsDistrictSelected] = useState(false)
const [isUpazilaSelected, setIsUpazilaSelected] = useState(false)
useEffect(() => {
if(user.presentAddress && user.presentAddress.division) {
setIsDivisionSelected(true)
}
if(user.presentAddress && user.presentAddress.district) {
setIsDistrictSelected(true)
}
if(user.presentAddress && user.presentAddress.upazila) {
setIsUpazilaSelected(true)
}
}, [user.presentAddress])
const handlePrevButtonPress = () => {
setCurrentComponent('m-verification')
}
const handleNextButtonPress = () => {
setCurrentComponent('permanent-address')
}
const handlePressDropdown = () => {
setIsModalVisible((prevState) => !prevState)
}
// set selected address type to present when the component is rendered
useEffect(() => {
setSelectedAddressType('present')
}, [])
return (
<>
<Text className='mt-4 text-2xl text-center text-white'>Present Address</Text>
<View className='w-full max-w-[360px] mt-4 gap-y-4'>
<View>
<Text className='text-white text-lg'>Division</Text>
<Pressable
onPress={() => {
handlePressDropdown()
setSelectedAddressCategory('divisions')
}}
>
<View className='relative'>
<TextInput
className='bg-white rounded-full text-lg mt-2 px-5 py-3 p-4'
value={user?.presentAddress?.division?.name}
editable={false}
/>
<Image
className='absolute w-10 h-10 right-3 top-3'
source={require('../assets/icons/expand-arrow-down.png')}
/>
</View>
</Pressable>
<AddressModal
isModalVisible={isModalVisible}
setIsModalVisible={setIsModalVisible}
/>
</View>
{isDivisionSelected && (
<View>
<Text className='text-white text-lg'>District</Text>
<Pressable
onPress={() => {
handlePressDropdown()
setSelectedAddressCategory('districts')
}}
>
<View className='relative'>
<TextInput
className='bg-white rounded-full text-lg mt-2 px-5 py-3 p-4'
value={user?.presentAddress?.district?.name}
editable={false}
/>
<Image
className='absolute w-10 h-10 right-3 top-3'
source={require('../assets/icons/expand-arrow-down.png')}
/>
</View>
</Pressable>
<AddressModal
isModalVisible={isModalVisible}
setIsModalVisible={setIsModalVisible}
/>
</View>
)}
{isDistrictSelected && (
<View>
<Text className='text-white text-lg'>Sub-district</Text>
<Pressable
onPress={() => {
handlePressDropdown()
setSelectedAddressCategory('upazilas')
}}
>
<View className='relative'>
<TextInput
className='bg-white rounded-full text-lg mt-2 px-5 py-3 p-4'
value={user?.presentAddress?.upazila?.name}
editable={false}
/>
<Image
className='absolute w-10 h-10 right-3 top-3'
source={require('../assets/icons/expand-arrow-down.png')}
/>
</View>
</Pressable>
<AddressModal
isModalVisible={isModalVisible}
setIsModalVisible={setIsModalVisible}
/>
</View>
)}
{isUpazilaSelected && (
<View>
<Text className='text-white text-lg'>Union</Text>
<Pressable
onPress={() => {
handlePressDropdown()
setSelectedAddressCategory('unions')
}}
>
<View className='relative'>
<TextInput
className='bg-white rounded-full text-lg mt-2 px-5 py-3 p-4'
value={user?.presentAddress?.union?.name}
editable={false}
/>
<Image
className='absolute w-10 h-10 right-3 top-3'
source={require('../assets/icons/expand-arrow-down.png')}
/>
</View>
</Pressable>
<AddressModal
isModalVisible={isModalVisible}
setIsModalVisible={setIsModalVisible}
/>
</View>
)}
<View>
<Text className='text-white text-lg'>Address Line 1 (e.g. House / Road / Village)</Text>
<TextInput
className='bg-white rounded-full text-lg mt-2 px-5 py-3 p-4'
placeholder='Address Line 1 (e.g. House / Road / Village)'
numberOfLines={1}
/>
</View>
<View>
<Text className='text-white text-lg'>Address Line 2 (e.g. Area / Post Office)</Text>
<TextInput
className='bg-white rounded-full text-lg mt-2 px-5 py-3 p-4'
placeholder='Address Line 2 (e.g. Area / Post Office)'
numberOfLines={1}
/>
</View>
<View className='flex-row w-full justify-between mt-4'>
<GradientButton
handlePress={handlePrevButtonPress}
>
<Text className='text-xl text-dark1 text-center'>Previous</Text>
</GradientButton>
<GradientButton
handlePress={handleNextButtonPress}
>
<Text className='text-xl text-dark1 text-center'>Next</Text>
</GradientButton>
</View>
</View>
</>
)
}
export default SignupPresentAddress
import { View, Text, Modal, TouchableOpacity, FlatList, StyleSheet } from 'react-native'
import React, { useEffect, useState } from 'react'
import { useGeolocationStore, useUserStore } from '../app/stores/store.js'
const AddressModal = ({
isModalVisible,
setIsModalVisible,
}) => {
const { divisions, districts, upazilas, unions } = useGeolocationStore()
const { user, updateUser, selectedAddressType, selectedAddressCategory } = useUserStore()
const [filteredDistricts, setFilteredDistricts] = useState([])
const [filteredUpazilas, setFilteredUpazilas] = useState([])
const [filteredUnions, setFilteredUnions] = useState([])
const handleSelect = (item) => {
if (selectedAddressType === 'present') {
if (selectedAddressCategory === 'divisions') {
updateUser({
...user,
presentAddress: {
...user.presentAddress,
division: item,
district: null,
upazila: null,
union: null,
}
})
const filtered_districts = districts.filter((district) =>
item.id === district.division_id
)
setFilteredDistricts(filtered_districts)
} else if (selectedAddressCategory === 'districts') {
updateUser({
...user,
presentAddress: {
...user.presentAddress,
district: item,
upazila: null,
union: null,
}
})
const filtered_upazila = upazilas.filter((upazila) =>
item.id === upazila.district_id
)
setFilteredUpazilas(filtered_upazila)
} else if (selectedAddressCategory === 'upazilas') {
updateUser({
...user,
presentAddress: {
...user.presentAddress,
upazila: item,
union: null,
}
})
const filtered_union = unions.filter((union) =>
item.id === union.upazilla_id
)
setFilteredUnions(filtered_union)
} else if (selectedAddressCategory === 'unions') {
updateUser({
...user,
presentAddress: {
...user.presentAddress,
union: item,
}
})
}
} else if (selectedAddressType === 'permanent') {
if (selectedAddressCategory === 'divisions') {
updateUser({
...user,
permanentAddress: {
...user.permanentAddress,
division: item,
district: null,
upazila: null,
union: null,
}
})
const filtered_districts = districts.filter((district) =>
item.id === district.division_id
)
setFilteredDistricts(filtered_districts)
} else if (selectedAddressCategory === 'districts') {
updateUser({
...user,
permanentAddress: {
...user.permanentAddress,
district: item,
upazila: null,
union: null,
}
})
const filtered_upazila = upazilas.filter((upazila) =>
item.id === upazila.district_id
)
setFilteredUpazilas(filtered_upazila)
} else if (selectedAddressCategory === 'upazilas') {
updateUser({
...user,
permanentAddress: {
...user.permanentAddress,
upazila: item,
union: null,
}
})
const filtered_union = unions.filter((union) =>
item.id === union.upazilla_id
)
setFilteredUnions(filtered_union)
} else if (selectedAddressCategory === 'unions') {
updateUser({
...user,
permanentAddress: {
...user.permanentAddress,
union: item,
}
})
}
}
setIsModalVisible(false)
}
return (
<View>
<Modal
visible={isModalVisible}
transparent
animationType="fade"
onRequestClose={() => setIsModalVisible(false)}
>
<TouchableOpacity
style={styles.modalBackground}
onPress={() => setIsModalVisible(false)}
>
<View style={styles.dropdownContainer}>
<FlatList
data={
selectedAddressCategory === 'divisions' ? divisions
: selectedAddressCategory === 'districts' ? filteredDistricts
: selectedAddressCategory === 'upazilas' ? filteredUpazilas
: selectedAddressCategory === 'unions' ? filteredUnions
: null
}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<>
<TouchableOpacity
style={styles.option}
onPress={() => handleSelect(item)}
>
<Text style={styles.optionText}>{item.name}</Text>
</TouchableOpacity>
<View style={styles.lastOption} />
</>
)}
/>
</View>
</TouchableOpacity>
</Modal>
</View>
)
}
export default AddressModal
const styles = StyleSheet.create({
container: {
padding: 16,
},
dropdownButton: {
padding: 12,
backgroundColor: '#f0f0f0',
borderRadius: 8,
borderWidth: 1,
borderColor: '#ccc',
},
buttonText: {
fontSize: 16,
},
modalBackground: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.2)',
},
dropdownContainer: {
width: '80%',
height: '80%',
backgroundColor: 'white',
borderRadius: 8,
padding: 16,
elevation: 4,
},
option: {
padding: 12,
borderTopWidth: 1,
borderTopColor: '#ddd',
},
lastOption: {
borderBottomWidth: 1,
borderBottomColor: '#ddd',
},
optionText: {
fontSize: 16,
textAlign: 'center'
},
});
I tried using conditional rendering to show and hide the modal when selecting an item. However, when I select an item, the modal briefly reappears before closing. I expected the modal to close immediately without flickering. I also attempted adding a short delay (setTimeout) before updating the state, but the issue persists.
1 Answer
Reset to default 0Hey! Here's a quick explanation:
The flickering issue happens because React sees functions and objects (like renderItem or inline functions) as new on every render, so it re-creates them and triggers re-renders. To fix this, you can move those functions outside the render cycle.
Also, I see you're trying to dismiss the Modal when the backdrop is pressed, consider using a Pressable instead of TouchableOpacity
e.g:
const hideModal = () => setIsModalVisible(false);
const renderItem = ({ item }) => (
<>
<TouchableOpacity
style={styles.option}
onPress={() => handleSelect(item)}>
<Text style={styles.optionText}>{item.name}</Text>
</TouchableOpacity>
<View style={styles.lastOption} />
</>
);
return (
<View>
<Modal
visible={isModalVisible}
transparent
animationType="fade"
onRequestClose={hideModal}>
<Pressable style={styles.modalBackground} onPress={hideModal}>
<View style={styles.dropdownContainer}>
<FlatList
data={data}
keyExtractor={(item) => item.id}
renderItem={renderItem} //Function now reused instead of recreated
/>
</View>
</Pressable>
</Modal>
</View>
);
Other Tips:
- If you're working with different datasets, consider using a
switchstatement to improve readability oruseMemoto avoid unnecessary calculations e.g:
const dataToDisplay = useMemo(() => {
switch (selectedCategory) {
case 'option1':
return option1Data;
case 'option2':
return option2Data;
default:
return [];
}
}, [selectedCategory, option1Data, option2Data]);
. . .
<FlatList
data={dataToDisplay}
. . .
/>
- Cleaning up the component and breaking it into smaller parts can also help readability.
- For more tips on optimizing React performance, check out this article on React Optimization Tips.
Goodluck!