react-native-bpk-component-card v3.0.1

react-native-bpk-component-card

Backpack React Native card component.

Installation

npm install react-native-bpk-component-card --save-dev

Usage

import React, { Component } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import BpkCard from 'react-native-bpk-component-card';
import BpkText from 'react-native-bpk-component-text';
import { spacingBase } from 'bpk-tokens/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 'react-native-bpk-component-text';
import { spacingBase } from 'bpk-tokens/tokens/base.react.native';
import BpkCard, { CORNER_STYLES, withDivider } from '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:

After withDivider: