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-cardyarn
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 screenDefault: {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" |