Popup menu design issue with react-native-modal

[arrauf]

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'>abc@m.com</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

[sodik82]

can you try move our MenuProvider to the "top level" of your Modal? (as stated in documentation) it is important it is over all other components.