bpk-component-card

Backpack React Native card component.

Default

Day	Night

Without padding

Day	Night

Focused

Day	Night

Large corner style

Day	Night

With divider

Day	Night

With divider arranged vertically

Day	Night

Installation

Check the main Readme for a complete installation guide.

Usage

                                                
                                                import React, { Component } from 'react';
                                                import { View, StyleSheet, Text } from 'react-native';
                                                import BpkCard from 'backpack-react-native/bpk-component-card';
                                                import BpkText from 'backpack-react-native/bpk-component-text';
                                                import { spacingBase } from '@skyscanner/bpk-foundations-react-native/tokens/base.react.native';
                                                
                                                const styles = StyleSheet.create({
                                                  container: {
                                                    flex: 1,
                                                    justifyContent: 'center',
                                                    padding: spacingBase,
                                                  }
                                                });
                                                
                                                export default class App extends Component {
                                                  render() {
                                                    const content = (
                                                      <BpkText>
                                                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
                                                        commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
                                                        et magnis dis parturient montes, nascetur ridiculus mus.
                                                      </BpkText>
                                                    );
                                                    return (
                                                      <View style={styles.container}>
                                                        <BpkCard
                                                          onPress={() => null}
                                                          accessibilityLabel="Example Card"
                                                        >
                                                          {content}
                                                        </BpkCard>
                                                        <BpkCard
                                                          onPress={() => null}
                                                          accessibilityLabel="Example Card"
                                                          padded={false}
                                                        >
                                                          {content}
                                                        </BpkCard>
                                                        <BpkCard
                                                          onPress={() => null}
                                                          accessibilityLabel="Example Card"
                                                          focused
                                                        >
                                                          {content}
                                                        </BpkCard>
                                                      </View >
                                                    );
                                                  }
                                                }

withDivider HOC

                                                
                                                import React, { Component } from 'react';
                                                import { View, StyleSheet, Text } from 'react-native';
                                                import BpkText from 'backpack-react-native/bpk-component-text';
                                                import { spacingBase } from '@skyscanner/bpk-foundations-react-native/tokens/base.react.native';
                                                import BpkCard, { CORNER_STYLES, withDivider } from 'backpack-react-native/bpk-component-card';
                                                
                                                const BpkCardWithDivider = withDivider(BpkCard);
                                                
                                                const styles = StyleSheet.create({
                                                  container: {
                                                    flex: 1,
                                                    justifyContent: 'center',
                                                    padding: spacingBase,
                                                  }
                                                });
                                                
                                                export default class App extends Component {
                                                  render() {
                                                    const content = (
                                                      <BpkText>
                                                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
                                                        commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
                                                        et magnis dis parturient montes, nascetur ridiculus mus.
                                                      </BpkText>
                                                    );
                                                    return (
                                                      <View style={styles.container}>
                                                        <BpkCardWithDivider
                                                          onPress={() => null}
                                                          stub={content}
                                                          accessibilityLabel="Example Card"
                                                        >
                                                          {content}
                                                        </BpkCardWithDivider>
                                                        <BpkCardWithDivider
                                                          onPress={() => null}
                                                          stub={content}
                                                          accessibilityLabel="Example Card"
                                                          vertical
                                                        >
                                                          {content}
                                                        </BpkCardWithDivider>
                                                        <BpkCardWithDivider
                                                          onPress={() => null}
                                                          stub={content}
                                                          accessibilityLabel="Example Card"
                                                          padded={false}
                                                        >
                                                          {content}
                                                        </BpkCardWithDivider>
                                                        <BpkCardWithDivider
                                                          onPress={() => null}
                                                          stub={content}
                                                          accessibilityLabel="Example Card"
                                                          focused
                                                          cornerStyle={CORNER_STYLES.lg}
                                                        >
                                                          {content}
                                                        </BpkCardWithDivider>
                                                      </View >
                                                    );
                                                  }
                                                }

Props

BpkCard:

Property	PropType	Required	Default Value
children	node	true	-
onPress	func	true	-
focused	bool	false	false
innerStyle	object	false	null
cornerStyle	oneOf(CORNER_STYLES.sm, CORNER_STYLES.lg)	false	CORNER_STYLES.sm
padded	bool	false	true

After withDivider:

Property	PropType	Required	Default Value
stub	node	true	-
vertical	bool	false	false
mainStyle	object	false	null
stubStyle	object	false	null