React Native CardStack

Implementation of react-cardstack for React Native, this component allows you to achieve a UI similar to the iOS passbook app.

Currently only iOS is supported, however Android support will land shortly!

• Installation
• Usage
• Components
  • <CardStack />
  • <Card />
• Example & Demo

Installation

react-native-cardstack requires on the following peer dependencies:

• React Native 0.27 or later
• React 15.0 or later

npm install --save react-native-cardstack

Usage

react-native-cardstack exports two React components. These are CardStack and Card. The CardStack component is responsible for holding the state of it's child Card components. However, this is abstracted away which makes using the component a whole deal simpler. Note: there must be at least two instances of Card as children of CardStack, otherwise the component will throw an error.

An example use of React Card Stack looks like:

import { CardStack, Card } from 'react-cardstack';

<CardStack
	height={500}
	width={400}
	backgroundColor='#f8f8f8'
	hoverOffset={25}>

	<Card backgroundColor='#2980B9'>
		<h1>Number 1</h1>
	</Card>

	<Card backgroundColor='#27AE60'>
		<NumberTwo />
	</Card>

</CardStack>

The Card component wraps around the content you want to render for each card. You can render both elements or components inside Card.

Figuring out the Header Height

When all Card components are collapsed, the top of each card will be visible. This is basically the "header" of the Card component. To calculate what size the header will be simply divide the height passed to CardStack by the number of child Card components. In the example above, the header height for each card will be 500 / 2, which equals 250.

Components

Both components have a selection of props that can be used to configure and interact with each component.

<CardStack />

Property | Type | Default | Description ------------------ | ------ | ------ | -------- width | number | 350px | the width of the component height | number | 500px | the height of the component backgroundColor | string | f8f8f8 | can be a hex or rgba value transitionDuration | number | 300 | can be a hex or rgba value hoverOffset | number | 30px | how far the card will shift up when being hovered

<Card />

Property | Type | Default | Description ----------- | ------------- | ------- | ------- background | string | undefined | can be a hex or rgba value ...all props for the TouchableOpacity component

Example & Demo

git clone https://github.com/cameronbourke/react-native-cardstack
cd react-native-cardstack
npm install
cd CardStackDemo
npm install

Then open the Xcode project at ios/CardStackDemo.xcodeproj

Currently npm link does not work with React Native's packager, so, to temporarily get around that, npm start actually runs a babel command that will output the /src directory into /CardStackDemo/react-native-cardstack which explains why you will see the following when in the example app:

import { CardStack, Card } from './react-native-cardstack';

What's Next?

• [ ] Add onPress and onLongPress props to <Card />, which will pass the state of the card to the callback
• [ ] Add more unit tests using ava
• [ ] Unifiy the API for both this package, and the original react-cardstack
• [ ] Add android support

License

MIT Licensed Copyright (c) Cameron Bourke 2016