@gj-kit/expo-ui recipes

Each code block reuses a public-contract example already type-checked in the package README.

1. Install one provider and render an accessible control

Create the application theme once, then place UiProvider above the primitives that consume it.

Outcome: A themed, accessible button rendered from one application-wide provider.

Application-owned boundary: Create themes once and mount UiProvider at the component that wraps your app. Native Button, IconButton, Menu and Select own their press feedback through native styles; their default interactions do not require NativeWind.

import { Button, UiProvider, enStrings } from '@gj-kit/expo-ui';
import { createThemes } from '@gj-kit/expo-ui/theme';

const themes = createThemes();

export function App() {
  return (
    <UiProvider theme={themes} strings={enStrings}>
      <Button label="Get started" onPress={() => {}} />
    </UiProvider>
  );
}

2. Keep tab values and panels in sync

Use a literal item list so every tab value requires a non-null panel and an accessible tablist name.

Tabs requires the tablist’s accessible name and one non-null panel per item value, so a forgotten panel stops the build instead of rendering blank.

import { Tabs, Text, UiProvider, createThemes } from '@gj-kit/expo-ui';

declare const onChange: (value: 'overview' | 'history') => void; // the app owns tab state
const items = [{ label: 'Overview', value: 'overview' }, { label: 'History', value: 'history' }] as const;

export const ProfileTabs = () => (
  <UiProvider theme={createThemes({ light: { colors: { primary: '#1769C2' } } })}>
    <Tabs
      accessibilityLabel="Profile sections"
      items={items}
      value="overview"
      onChange={onChange}
      // Delete the history entry below and tsc stops the build:
      // TS2741: Property 'history' is missing in type '{ overview: JSX.Element; }'
      panels={{ overview: <Text>Overview</Text>, history: <Text>History</Text> }}
    />
  </UiProvider>
);

Use the complete API reference for every export and import path.