Skip to content
Interactive Card Component for React Native
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Customizable interactive card component for React Native

Table of Content

⬇️ Installation


npm install react-native-interactive-card


yarn add react-native-interactive-card

🎉 Usage

import InteractiveCard, { Content, Header } from 'react-native-interactive-card'


// render() {
//    return (
		// Header View...
		// Content View
//    );
// }


const cardOptions = { overlayOpacity : 1 };
const contentOptions = { enterFrom: "right" }

<InteractiveCard {...cardOptions}>
    	<View style={headerStyle}>
	    <Text style={styles.text}>Header</Text>
    <Content {...contentOptions}>
    	<View style={contentStyle}>
	    <Text style={textStyle}>Content</Text>

const headerStyle = {
	backgroundColor: "#68E9FF", padding: 30, 
	marginBottom: 10, borderRadius: 5 
const textStyle = {
	fontSize: 40, opacity: 0.6,
	textAlign: 'center', fontWeight: 'bold'
const contentStyle = {
	width: "90%", padding: 50, 
	backgroundColor: "#E85F53"

📲 Examples

⚙️ Props


Prop Type Description
openCoords object: {y: number, x: number} The x & y coordinates of the location that the card should be in the window when it opens. Where the origin i.e (0,0) is the top left of the window. If you don't want y or x to change, just pass null.
The x supports a special value "center" to be passed, where the card will be centered in the screen
Default: {y: 20, x: "center"}.
overlayOpacity number Opacity of the overlay under the card when it opens.
Default: 0.8. Tip: set this value to 1.0 to completely "hide" the rest of the cards underneath.
overlayColor string Overlay color.
onOpen  function Callback that gets called when the user opens the card.
Passed: the card object
onClose function Callback that gets called when the card closes.
Passed: the card object
onAnimationProgress function Callback that gets called every animation frame of the card.
Passed: Animation progress in a scale of 0 to 1 (where 1 is the card open).
onDraggingProgress function Callback that gets called for every panning movement while the card is being dragged.
Passed: The progress of the panning a scale of 0 to 1 (where 1 is the card open).

Note that the number can exceed 0 or 1 when the user keeps panning even further.


Prop Type Description
enterFrom enum: "bottom","top","right","left","none" Direction from which the content enters. Default: "top"

⚖️ License


You can’t perform that action at this time.