@duffel/react-native-components-ancillaries

UI components to support selling travel with the Duffel API in your react native app.

Installation

yarn add @duffel/react-native-components-ancillaries

Usage

import { DuffelAncillaries } from '@duffel/react-native-components-ancillaries';

function App() {
  return (
    <DuffelAncillaries
      offer_id="fixture_off_1"
      services={['bags', 'seats']}
      passengers={[
        {
          id: 'pas_0000AUde3KY1SptM6ABSfU',
          given_name: 'Mae',
          family_name: 'Jemison',
          gender: 'f',
          title: 'dr',
          born_on: '1956-10-17',
          email: '[email protected]',
          phone_number: '+16177562626',
        },
      ]}
      onPayloadReady={console.log}
      theme={DARK_THEME}
    />
  );
}

For documentation and help integrating with this component please contact [email protected]

Storybook

This repository includes a web-based Storybook for the reusable React Native components in src/components.

Run Storybook locally

yarn storybook dev

Storybook renders the React Native components in the browser via react-native-web, which makes it suitable for quick visual review and static publishing.

Build a static Storybook

yarn build-storybook

Publish to Chromatic

yarn chromatic

To run Chromatic locally or in CI you must provide a CHROMATIC_PROJECT_TOKEN environment variable. You can find the token in Chromatic's project settings: https://www.chromatic.com/manage?appId=69e87abde468b540167a6ab2&view=configure. The included GitHub Actions workflow also expects this secret to be configured before it will publish builds.