react-native-interactive-card

Customizable interactive card component for React Native

Table of Content

• ⬇️ Installation
• 🎉 Usage
• 📲 Examples
• ⚙️ Props
• ⚖️ License

⬇️ 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

• Base
• Custom Transition
• Cards In ScollView
• iPad

⚙️ Props

• <InteractiveCard>
• <Content>

<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