> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mobile-starter.amisi.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# UIProvider

> Use `UIProvider` once at the app root to provide Gluestack config and runtime color mode.

## Basic usage

```tsx theme={null}
import { UIProvider } from '@amisi/ui';
import { config as gluestackConfig } from '@gluestack-ui/config';

<UIProvider config={gluestackConfig}>
  <App />
</UIProvider>;
```

## Example

```tsx theme={null}
import { UIProvider } from '@amisi/ui';
import { config as gluestackConfig } from '@gluestack-ui/config';

export const AppRoot = () => {
  return (
    <UIProvider config={gluestackConfig}>
      <RootNavigator />
    </UIProvider>
  );
};
```

## Available props

* `children: ReactNode`
* `config: React.ComponentProps<typeof GluestackUIProvider>['config']`

## Available methods and behavior

* Derives `colorMode` from theme state (`light | dark`)
* Passes `config` and `colorMode` into `GluestackUIProvider`