# @ankhorage/zora
        
Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.
## Usage
### ZORA app root with optional runtime capabilities and adaptive UI.
Enable only the runtime capabilities the app uses. `toast` installs the host consumed by
`useToast()`. `bottomSheet` installs the native BottomSheet host; DatePicker and TimePicker use
that host on native and automatically use Popover on web.
Source: `examples/basic-app/App.tsx`
```tsx
import {
AppBar,
AppShell,
BottomSheet,
Button,
DatePicker,
Screen,
ScreenSection,
Text,
TimePicker,
useToast,
View,
ZoraProvider,
type ZoraTheme,
} from '@ankhorage/zora';
import React from 'react';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
const basicTheme: ZoraTheme = {
id: 'basic-app',
name: 'Basic app',
appCategory: 'developer_tools',
primaryColor: '#0b6e99',
harmony: 'analogous',
};
export default function BasicApp() {
return (
}>
);
}
/*** Demonstrates toast feedback and adaptive picker presentation. */
function UsageContent() {
const { showToast } = useToast();
const [date, setDate] = React.useState(null);
const [time, setTime] = React.useState(null);
return (
Runtime capabilities are opt-in at the app root.
);
}
/***
* Direct native BottomSheet usage.
*
* Render this inside `` on native. Web pickers do not need this host;
* their platform adapters use Popover instead.
*
* @usage
* @readme
*/
export function NativeBottomSheetExample() {
const [open, setOpen] = React.useState(false);
return (
setOpen(false)} open={open}>
Bottom sheet content
);
}
```
### Direct native BottomSheet usage.
Render this inside `` on native. Web pickers do not need this host;
their platform adapters use Popover instead.
Source: `examples/basic-app/App.tsx`
```tsx
import {
AppBar,
AppShell,
BottomSheet,
Button,
DatePicker,
Screen,
ScreenSection,
Text,
TimePicker,
useToast,
View,
ZoraProvider,
type ZoraTheme,
} from '@ankhorage/zora';
import React from 'react';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
const basicTheme: ZoraTheme = {
id: 'basic-app',
name: 'Basic app',
appCategory: 'developer_tools',
primaryColor: '#0b6e99',
harmony: 'analogous',
};
/***
* ZORA app root with optional runtime capabilities and adaptive UI.
*
* Enable only the runtime capabilities the app uses. `toast` installs the host consumed by
* `useToast()`. `bottomSheet` installs the native BottomSheet host; DatePicker and TimePicker use
* that host on native and automatically use Popover on web.
*
* @usage
* @readme
*/
export default function BasicApp() {
return (
}>
);
}
/*** Demonstrates toast feedback and adaptive picker presentation. */
function UsageContent() {
const { showToast } = useToast();
const [date, setDate] = React.useState(null);
const [time, setTime] = React.useState(null);
return (
Runtime capabilities are opt-in at the app root.
);
}
export function NativeBottomSheetExample() {
const [open, setOpen] = React.useState(false);
return (
setOpen(false)} open={open}>
Bottom sheet content
);
}
```
## Generated documentation
- [Interactive documentation app](././paradox/index.html)
- [Public API reference](././paradox/exports.md)
- [Component registry](././paradox/components.md)
- [Architecture overview](././paradox/diagrams/architecture-overview.mmd)
- [Module relationships](././paradox/diagrams/module-relationships.mmd)
- [Export graph](././paradox/diagrams/export-graph.mmd)
- [createZoraThemeConfig sequence](././paradox/diagrams/sequences/create-zora-theme-config.mmd)
- [resolveAvatarInitials sequence](././paradox/diagrams/sequences/resolve-avatar-initials.mmd)
- [resolveOAuthProviderIcon sequence](././paradox/diagrams/sequences/resolve-oauth-provider-icon.mmd)
- [resolveOAuthProviderLabel sequence](././paradox/diagrams/sequences/resolve-oauth-provider-label.mmd)
- [SelectableItem sequence](././paradox/diagrams/sequences/selectable-item.mmd)
- [SelectionProvider sequence](././paradox/diagrams/sequences/selection-provider.mmd)
- [ThemeModeToggle sequence](././paradox/diagrams/sequences/theme-mode-toggle.mmd)
- [useZoraTheme sequence](././paradox/diagrams/sequences/use-zora-theme.mmd)
- [validateField sequence](././paradox/diagrams/sequences/validate-field.mmd)
- [validateFields sequence](././paradox/diagrams/sequences/validate-fields.mmd)
- [validateUploadAsset sequence](././paradox/diagrams/sequences/validate-upload-asset.mmd)
- [validateValue sequence](././paradox/diagrams/sequences/validate-value.mmd)