React Native getting started

Install @britishairways-ent/bagel-react-native, load the BA fonts, and render a screen. Each component's props are on its page, under the React Native library option. To work on the library itself, use Storybook in the bagel-react-native repository, below. The release pass runs in a separate app, on the React Native QA process.

Install

The package is published to GitHub Packages, on the same registry as the web library. Create a personal access token and sign in with it, using the steps under With a javascript framework.

Point the @britishairways-ent scope at that registry. Add this to the .npmrc in the app:

Scope the British Airways packages to GitHub Packages

@britishairways-ent:registry=https://npm.pkg.github.com

Then install the library:

npm install @britishairways-ent/bagel-react-native

The app also needs these peers. Versions below are the minimums.

Always: react 18.2 or newer, and react-native 0.73 or newer.; react-native-safe-area-context 4.5 or newer. BaScreen reads its insets.
Icons and links: react-native-svg 15 or newer, for BaIcon and BaLink.
Animation: react-native-reanimated 3 or newer, for BaCarousel, BaCopyToClipboard, and BaDetails. An Expo app already includes the Reanimated Babel plugin. A bare app adds react-native-reanimated/plugin as the last plugin in babel.config.js. Reanimated 4 also needs a compatible react-native-worklets.
Copy to clipboard: @react-native-clipboard/clipboard 1.14 or newer, for BaCopyToClipboard.

To use the package from GitHub Actions, request access the same way as for the web package. See GitHub Actions.

Fonts

Mylius Modern and Open Sans ship on bagelFontAssets. Load that map before rendering BaText, or the type falls back to the system font.

An Expo app uses expo-font:

Load the BA fonts before the first screen

import { useFonts } from 'expo-font';
import { bagelFontAssets } from '@britishairways-ent/bagel-react-native';

const [fontsLoaded] = useFonts(bagelFontAssets);
if (!fontsLoaded) return null;

A bare React Native app can use expo-font the same way, or pass those files to its own font loader.

First screen

Wrap the tree in SafeAreaProvider. Put the screen content in BaScreen, then BaPageSegment and BaContent. The theme is a prop on BaScreen and BaPageSegment.

A first screen with a heading and a button

import { useFonts } from 'expo-font';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import {
  BaButton,
  BaScreen,
  BaPageSegment,
  BaContent,
  BaText,
  bagelFontAssets,
} from '@britishairways-ent/bagel-react-native';

export default function App() {
  const [fontsLoaded] = useFonts(bagelFontAssets);
  if (!fontsLoaded) return null;

  return (
    <SafeAreaProvider>
      <BaScreen theme="midnight-500" statusBarStyle="light-content">
        <BaPageSegment theme="midnight-500" fill>
          <BaContent>
            <BaText variant="header28">Hello</BaText>
            <BaButton variant="primary" onPress={() => {}}>
              Continue
            </BaButton>
          </BaContent>
        </BaPageSegment>
      </BaScreen>
    </SafeAreaProvider>
  );
}

For a scrolling page, put BaScroll inside BaScreen. On a screen that sits under native bottom tabs, set safeAreaBottom={false} on BaScreen and let BaScroll keep the bottom inset. BaScroll uses contentInsetAdjustmentBehavior="automatic", so the system can inset for the home indicator and an overlaying tab bar.

Develop with Storybook

Storybook lives in the bagel-react-native repository and runs through the example/ app. It is where a component is built and reviewed while you work on the library. It is separate from the release pass, which runs in bagel-qa-react-native.

From the library repository:

npm install: Installs the library and the example app.
npm run build: Builds the package the example app loads.
npm run storybook: Starts Storybook for the example app.
npm run storybook:ios: Opens Storybook in the iOS Simulator.
npm run storybook:android: Opens Storybook in the Android Emulator.

Those scripts set EXPO_PUBLIC_STORYBOOK_ENABLED=true. Storybook has on-device controls for props such as theme and locale. The screen size is the simulator, emulator, or device you run it on.