Popover from NativeBase not showing on press

Question

I'm working on a React Native app using NativeBase for UI components. I've encountered an issue where the Popover component does not show up when pressing on a post. Here's a snippet of the code that's supposed to handle the popover display:

// EditUserPostsScreen.tsx

// ... (other imports)

import { Box, Button, Popover } from 'native-base';

const EditUserPostsScreen = () => {

  const handlePressPost = (postId: number) => {

    setSelectedPostId(postId);

    setShowPopover(true);

  };

  const handleDeletePost = (postId: number) => {

    // Call the backend to delete the post and then update the state

    // ...
  };

  // ... (other logic)

  return (

    // ... (other JSX)

    {userDetails.posts.map((post) => (

      <Box key={post.id.toString()} /* ...other props... */>

        <TouchableOpacity onPress={() => handlePressPost(post.id)}>

          {/* Post content here */}

        </TouchableOpacity>

        {selectedPostId === post.id && (

          <Popover
            isOpen={showPopover}
            onClose={() => setShowPopover(false)}>
            {/* Popover content */}
          </Popover>
        )}
      </Box>
    ))}

    // ... (other JSX)
  );
};

export default EditUserPostsScreen;

The handlePressPost function should trigger the popover to show, but nothing happens when a post is clicked. I have confirmed that the function is being called with console logs.

What I've tried:

• Ensuring that there are no errors in the console.
• Adding console logs to verify the function calls.
• Checking that the state is updated correctly with setShowPopover(true).

My Environment:

React Native version: "^0.72.6"

"react": "18.2.0",

NativeBase version: "^3.4.28"

Tested on: (Android simulator)

I expect the popover to appear when a post is clicked, but currently, it does not appear at all.

Can anyone help me understand why the popover isn't showing and how to fix it?