npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@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.