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.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Example
src
.gitignore
.npmignore
LICENSE
README.md
_config.yml
index.js
package.json

README.md

react-native-interactive-card

Customizable interactive card component for React Native

Table of Content

⬇️ Installation

npm

npm install react-native-interactive-card

yarn

yarn add react-native-interactive-card

🎉 Usage

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

Basic

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

Cool

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

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

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

<InteractiveCard>

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.

<Content>

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

⚖️ License

MIT

You can’t perform that action at this time.