RN Popover component sample

popover-usage.tsx

import { Button, StyleSheet, View } from "react-native";
import React, { useState } from "react";
import Popover from "./Popover";

const PopoverUsageSample = () => {
  const [popoverVisible, setPopoverVisible] = useState(false);

  return (
    <Popover
      visible={popoverVisible}
      setVisible={setPopoverVisible}
      PopoverContent={
        <View style={styles.popoverContent}>
          <Button
            title="Close popover"
            onPress={() => setPopoverVisible(false)}
          />
        </View>
      }
    >
      <Button title="Open popover" onPress={() => setPopoverVisible(true)} />
    </Popover>
  );
};

export default PopoverUsageSample;

const styles = StyleSheet.create({
  popoverContent: {
    alignItems: "center",
    height: 200,
    backgroundColor: "white",
    justifyContent: "center",
  },
});

Popover.tsx

import { View, StyleSheet, Pressable } from "react-native";
import { Dispatch, ReactElement, ReactNode, SetStateAction } from "react";

const Popover = ({
  visible,
  setVisible,
  children,
  PopoverContent,
}: {
  visible: boolean;
  setVisible: Dispatch<SetStateAction<boolean>>;
  children: ReactNode;
  PopoverContent: ReactElement;
}) => {
  const onClosePress = () => setVisible(false);

  return (
    <View style={styles.container}>
      {children}
      {visible ? (
        <View style={styles.popover}>
          <Pressable
            style={StyleSheet.absoluteFillObject}
            onPress={onClosePress}
          />
          {PopoverContent}
        </View>
      ) : null}
    </View>
  );
};

export default Popover;

const styles = StyleSheet.create({
  popover: {
    justifyContent: "center",
    backgroundColor: "rgba(0,0,0,0.5)",
    padding: 16,
    flex: 1,
    ...StyleSheet.absoluteFillObject,
  },
  container: {
    flex: 1,
  },
  popoverContent: {
    alignItems: "center",
    height: 200,
    backgroundColor: "white",
    justifyContent: "center",
  },
});