modals

AppModal

AppModal is a wrapper component around the Modal from 'react-native-modal'. It enhances the basic Modal by automatically adjusting its margins to respect the safe area insets of the device.

Import

import { AppModal } from "@appmaker-xyz/ui";

Props

This component accepts all props that the original Modal component from react-native-modal accepts. Additionally, it handles the following:

• style (Object): Custom styles for the modal. These will be merged with the automatically applied safe area inset styles.

Usage

import { AppModal } from "@appmaker-xyz/ui";

function MyComponent() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <AppModal
      isVisible={isVisible}
      onBackdropPress={() => setIsVisible(false)}
      // ... other Modal props
    >
      {/* Modal content */}
    </AppModal>
  );
}

Behavior

1. The component uses the useSafeAreaInsets hook from 'react-native-safe-area-context' to get the safe area insets of the device.
2. It automatically applies marginTop and marginBottom to the modal based on these insets.
3. Any custom styles passed via the style prop are merged with these automatic inset styles.

Dependencies

• react-native-modal
• react-native-safe-area-context

Notes

• This component ensures that the modal content doesn't overlap with device-specific areas like notches or home indicators.
• It's particularly useful for creating a consistent modal experience across different iOS and Android devices.