Skip to content
BeeUI

Expo

BeeUI’s accepted Expo path is exercised on Expo SDK 57 with the same public package boundary intended for external consumers. Because BeeUI is currently unpublished, the repository’s examples/expo-package-consumer fixture packs the three BeeUI packages into tarballs before installing them into an isolated Expo app. That is the executable onboarding authority today.

1. Prove the clean Expo consumer

Section titled “1. Prove the clean Expo consumer”

From a clean checkout:

Terminal window
corepack enable
pnpm install --frozen-lockfile
pnpm build


cd examples/expo-package-consumer
bash setup.sh
bash bundle.sh

setup.sh packs @beemvp/beeui-core, @beemvp/beeui-tokens, and @beemvp/beeui-ui, then installs the tarballs plus the pinned Expo/native peers into the isolated fixture. bundle.sh runs Expo’s headless export for Android, iOS, and Web.

For an interactive local session after setup.sh:

Terminal window
npx expo start

Use Expo’s normal i, a, or w targets when the matching simulator/emulator/browser environment is available.

2. Wire the styling entry

Section titled “2. Wire the styling entry”

The accepted fixture imports Tailwind, Uniwind, and BeeUI’s semantic Web/theme output once:

@import 'tailwindcss';
@import 'uniwind';
@import '@beemvp/beeui-tokens/theme.css';


@source '../node_modules/@beemvp/beeui-core/src';
@source '../node_modules/@beemvp/beeui-ui/src';

Its Metro config uses Uniwind’s supported wrapper and points to the same CSS entry:

const { getDefaultConfig } = require('expo/metro-config');
const { withUniwindConfig } = require('uniwind/metro');


module.exports = withUniwindConfig(getDefaultConfig(__dirname), {
  cssEntryFile: './global.css',
  dtsFile: './uniwind-types.d.ts',
  extraThemes: [
    'violet-light',
    'violet-dark',
    'high-contrast-light',
    'high-contrast-dark',
  ],
});

Treat the fixture files as executable source if these details change; the public guide is guarded against drifting away from them.

3. Mount BeeUIProvider and explicit safe areas

Section titled “3. Mount BeeUIProvider and explicit safe areas”
import './global.css';


import {
  BeeUIProvider,
  Button,
  SafeArea,
  Screen,
  Text,
} from '@beemvp/beeui-ui';


export default function App() {
  return (
    <BeeUIProvider>
      <Screen>
        <SafeArea edges={['top', 'left', 'right']} className="flex-1">
          <Text variant="title">BeeUI on Expo</Text>
          <Button>Continue</Button>
        </SafeArea>
      </Screen>
    </BeeUIProvider>
  );
}

BeeUIProvider supplies accepted runtime services; SafeArea is still an explicit application-owned edge boundary. Read Provider & safe area before building an app shell.

4. Understand what the fixture proves

Section titled “4. Understand what the fixture proves”

The Expo consumer’s acceptance is package-boundary + Metro export evidence for Android, iOS, and Web. A successful export is not a native simulator/device interaction result and must not be reported as one.

For live component/pattern inspection use Showcase. For a routed application use Demo. Exact platform/toolchain support lives in Compatibility.

Source authority

Section titled “Source authority”