react-native-cardstack
v1.0.1
Published
react native component inspired by the iOS passbook app UI
Downloads
4
Maintainers
Readme
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
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
andonLongPress
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