react-native-interactive-card v1.0.4

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>

<Content>

⚖️ License

MIT