Hey guys ,could you please take a look why my menu pops on weird position , React Native

Hey guys ,

I am using the menu function of React Native Paper .
And I had create a component for PopMenu,as follow

import React from 'react';
import { StyleSheet, View } from 'react-native';
import {Button, Menu, Divider, Provider} from 'react-native-paper';
import Icon from './Icon';
import colors from '../config/colors';
function PopMenu({style}) {
    const [visible,setVisible] = React.useState(false);
    const openMenu = () => setVisible(true);
    const closeMenu = () => setVisible(false);
    return (
            visible = {visible}
            onDismiss ={closeMenu}
            anchor ={ <Icon  name='chevron-down-circle' iconColor={colors.black} size={30} onPress={openMenu}/>}
                <Menu.Item onPress ={()=>{}} title="Item 1"/>
                <Menu.Item onPress ={()=>{}} title="item2"/>
                <Menu.Item onPress={() => {}} title="Item 3" />



const styles = StyleSheet.create({
export default PopMenu;

And I had found a problem , I was trying to insert this component into another screen which I need it appear in the most top layer . Therefore , I set its position “absolute” .however ,the menu got started to pop on a weird position ,like the pic below

I have attached my code also ,please take a look ,thank you so much !!

import React from 'react';
import { StyleSheet, View,Button, Image, ImageBackground } from 'react-native'
import PopMenu from '../components/PopMenu';

function TryScreen(props) {
    return (
        <View style ={styles.bg}>
         <ImageBackground source ={require('../assets/gift.png')} style={styles.img}>
             <Image source={require("../assets/red_jacket.png")} style={styles.profile_img}/>
         <PopMenu position={styles.pop}/>

const styles = StyleSheet.create({
      position :"absolute",
    bg :{
        flex :1,
        justifyContent :'center',
        alignItems :"center",
   img :{
       width : 300,
       height :300,
       justifyContent :'center',
        alignItems :"center"
   profile_img :{
       width : 100,
       height :100,
       borderRadius :50,
export default TryScreen;

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.