React-native-card-modal NPM

React Native Card Modal

Pure JS animated card modal, similar to google maps or many other UI interfaces out there, it is a functional component and uses hooks, so react 16.3 (or whichever version added hooks) is needed.

Install

yarn add react-native-card-modal

Usage

Typescript is there!

Sample code:

import { CardModal } from "react-native-card-modal";

<CardModal
  visible={!!selectedPin}
  onClose={this.onModalClose}
  scrollable
  overlay
>
  <Text style={{ padding: 20, fontSize: 30, fontWeight: "bold" }}>
    Insert your very nice content here
  </Text>
</CardModal>;

Works great with react-native-portal if you want to place stuff in front of your other UI elements

Props

visible: boolean;
scrollable: boolean; // If scrollable you can swipe up to expand the card, an "expanded" prop is passed to the child component so you can render different content
overlay?: boolean; // Puts an overlay behind the card
onClose: () => void; // When clicking on the overlay or the function you can call inside your component
style?: StyleProp<any>;
minHeight?: number; // Small card height
maxHeight?: number; // Expanded card height
hideSnack?: boolean; // Hides the snack indicator, so you can place it inside your component

The child component inside the card will get injected 1 prop: expanded: boolean so you can render content differently when the card is expanded