Popup menu design issue with react-native-modal #294
Description
Hi, I'm facing an issue while using the react-native-popup-menu with react-native-modal. The issue the menu is not positioned well when displayed on the modal. I've shared the code and also the output.
I also see the tickets based on that I updated my code but still not working properly.
#162
#152
Can you tell me how what changes I can make?
One more thing: when I place the Member at the page level, it starts working fine. I have also attached the SS.
Thanks
{/* Archive List */}
<Modal isVisible={openArchive} onBackButtonPress={() => { setOpenArchive(false); }}
avoidKeyboard={true}
backdropOpacity={0.5}
useNativeDriver={true}
hideModalContentWhileAnimating={true}
backdropTransitionOutTiming={0}
animationIn="fadeInUp"
animationOut="fadeOutDown"
>
<View className='bg-white rounded-[20px] mx-auto w-full max-w-[370px]'>
<View className="h-[50px] pl-5 pr-5 flex-row items-center border-b-4 border-[#dee2e6]" >
<Text className='font-fregular text-sm text-center w-full text-primary'>
Previous Family Members
</Text>
<TouchableOpacity
className='h-full w-[30px] justify-center items-center absolute right-3 top-[1px]'
onPress={() => { setOpenArchive(false); }}
>
<Image source={icons.closeIcon} contentFit='contain' className='h-[12px] w-[12px]' />
</TouchableOpacity>
</View>
<MenuProvider skipInstanceCheck>
<ScrollView className='max-h-[650px]'>
<View className='px-4 py-5'>
{
archiveLoading ?
<ContactListSkeleton />
:
<>
<View className='flex-row justify-between mb-3'>
<Text className='text-sm font-fmedium text-primary'>{archiveProfile?.length} Contact(s)</Text>
</View>
{
archiveProfile?.length ?
archiveProfile.map((item: any, index: number) =>
<Member
key={index}
data={item}
archiveList={true}
editCallback={() => { setPateintId(item.id); setAddPin(true); setOpenPin(true); }}
archiveCallback={() => { setPateintId(item.id); setArchive(true); setModalVisible(true); }}
unArchiveCallback={() => { setPateintId(item.id); setArchive(false); setUnlink(false); setModalVisible(true); }}
/>
)
: <Text className="text-center text-gray-500">
No data found.
</Text>
}
</>
}
</View>
</ScrollView>
</MenuProvider>
</View>
</Modal>MemberComponent:
const Member = ({ data, archiveList, editCallback, archiveCallback, unArchiveCallback }: any) => {
return (
<View className='flex-row mb-2 border-b-[1px] border-[#CDCDCD] overflow-hidden'>
<View className='flex-1'>
<View className='flex-row mb-3'>
<View className='flex-1'>
<Text className='text-[10px] font-fregular text-primary'>Name</Text>
<Text className='text-xs font-fmedium text-primary'>Jameel</Text>
</View>
<View className='flex-1'>
<Text className='text-[10px] font-fregular text-primary'>Relation</Text>
<Text className='text-xs font-fmedium text-primary'>Brother</Text>
</View>
</View>
<View className='flex-row mb-3'>
<View className='flex-1'>
<Text className='text-[10px] font-fregular text-primary'>E-mail Address</Text>
<Text className='text-xs font-fmedium text-primary'>[email protected]</Text>
</View>
<View className='flex-1'>
<Text className='text-[10px] font-fregular text-primary'>Phone Number</Text>
<Text className='text-xs font-fmedium text-primary'>(123) 013-2132</Text>
</View>
</View>
<View className='flex-row mb-3'>
<View className='flex-row'>
<Image source={icons.blackTick} className='mr-1 h-[14px] w-[14px]' />
<Text className='text-xs font-fmedium text-primary leading-[14px]'>Emergency</Text>
</View>
<View className='ml-4 flex-row'>
<Image source={icons.grayTick} className='mr-1 h-[14px] w-[14px]' />
<Text className='text-xs font-fmedium text-primary leading-[14px]'>Release of Information</Text>
</View>
</View>
</View>
<View className='w-[12%] h-[60px]'>
<Menu renderer={renderers.Popover} rendererProps={{ preferredPlacement: 'left' }}>
<MenuTrigger >
<View className={`justify-center h-full w-full`}>
<Image source={icons.dotsVerticalBlack} contentFit='contain' className='ml-3 h-[16px] w-[8px]' />
</View>
</MenuTrigger>
<MenuOptions customStyles={{}} optionsContainerStyle={{
maxWidth: 160,
shadowColor: 'black',
shadowOpacity: 0.7,
shadowOffset: { width: 0, height: 0 },
shadowRadius: 5,
borderRadius: 10,
}}>
{!archiveList ? (
<>
<MenuOption className="border-b-[1px] border-[#CDCDCD] p-[10px] font-fregular text-[12px]" onSelect={editCallback} text='Edit' />
<MenuOption className="p-[10px] font-fregular text-[12px]" onSelect={archiveCallback} text='Archive' />
</>
) : (
<MenuOption className="p-[10px] font-fregular text-[12px]" onSelect={unArchiveCallback} text='Unarchive' />
)}
</MenuOptions>
</Menu>
</View>
</View>
)
}Output:
Issue
working fine
