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
- The component uses the
useSafeAreaInsets
hook from 'react-native-safe-area-context' to get the safe area insets of the device. - It automatically applies
marginTop
andmarginBottom
to the modal based on these insets. - 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.