@skdx/react-native-blocks
v0.49.0
Published
SKDX native blocks
Readme
SKDX native application blocks
Native composition for application flows. Import from @skdx/react-native-blocks.
Install @skdx/react-native and its peers; mount SkdxProvider and
SafeAreaProvider at the application boundary. Blocks do not own transport,
authentication, persistence, or routing.
| Block | Contract and accessibility |
| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| LoginForm, SignupForm, ForgotPasswordForm | onSubmit(AuthValues) after required-field/email validation. busy disables inputs and the submit control. error shows the host's transport/policy error. Inputs provide labels, autofill hints and error hints. Password policy and successful reset feedback belong to the host. |
| ProfileCard | name, description, optional source and {label,onPress} action. Avatar has a meaningful accessible name and initials fallback. |
| SettingsPanel | Controlled settings and onValueChange(id,value). Every setting uses a labeled native switch. Intended for short groups; virtualize large settings screens in the host. |
| SearchFilters | Controlled query and selected filter descriptors; search keyboard and selected accessibility state. Host performs filtering/debouncing. |
| EmptyState, ErrorState | Title, description, optional labeled action. Error state announces the failure. |
| AppHeader | Header title, optional subtitle, leading and actions slots. Wrap with the host's safe-area boundary. |
| BottomNavigation | Controlled selected item and callback; tab roles and selected state. Route changes remain host owned. Wrap with bottom safe-area inset. |
| DashboardSummary | Metrics with stable identifiers; optional children for themed charts. Short summaries only. |
| CardCollection | Virtualized FlatList with stable keys, empty state and labeled selection action. Mount as the screen's vertical scroll owner. |
| DetailPanel | Selected collection item, labeled back action, optional host detail content. |
import { LoginForm } from '@skdx/react-native-blocks';
<LoginForm
busy={auth.pending}
{...(auth.error ? { error: auth.error } : {})}
onSubmit={({ email, password }) => auth.signIn(email, password)}
/>;No credentials are stored by these blocks. The host should clear/unmount form
state after completing a flow. Submission is synchronous from the block's
perspective: set busy before starting asynchronous work and expose failure via
error. For more complex validation, compose the lower-level inputs rather than
coupling the design system to a form library.
The expanded catalog includes typed profile/address/CRUD forms, host-controlled multi-step and onboarding compositions, feed/comment/conversation rows, attachments/upload progress and dashboard/commerce blocks. Collections use existing native list primitives rather than adding a parallel recycler or backend layer.
Provider-neutral assistant UI includes AIConversation, AIMessage, AIComposer,
AIStatus, CitationList, PromptSuggestions and FeedbackActions. Mount
AIConversation as the vertical scroll owner, with the composer outside its FlatList.
MetricGrid, GoalProgress and BulkSelectionBar provide responsive summaries and
host-controlled record operations. See the block matrix
and per-block documentation for callback, state, accessibility and size-limit contracts.
FilterSheet is an optional entry: import it from @skdx/react-native-blocks/filter-sheet and install the core BottomSheet peers. The main blocks entry does not load the gesture/motion stack. Native integrations remain alpha pending device acceptance.
See apps/showcase/App.tsx for variants, local interactions and responsive
compositions. These components use logical direction through native layout;
device verification with VoiceOver, TalkBack, large text and RTL remains required
before an application release.
Charts are optional child slots rather than a dependency of the blocks entry. Supply API clients, router actions, credential/session handling, locale formatting and validation policies in the host. Ownership recipes explain busy/error state and scroll boundaries.
