This is not a component library. It is how you build your mobile component library.

You know how most traditional React Native component libraries work: you install a package from NPM, import the components, and use them in your app.

This approach works well until you need to customize a component to fit your mobile design system or require one that isn't included in the library. Often, you end up wrapping library components, writing workarounds to override styles, or mixing components from different libraries with incompatible APIs and platform-specific quirks.

This is what BNA UI aims to solve. It is built around the following principles:

• Open Code: The top layer of your component code is open for modification.
• Mobile-First: Every component is designed specifically for React Native and Expo.
• Cross-Platform: Components work seamlessly across iOS, Android, and web.
• Composition: Every component uses a common, composable interface, making them predictable.
• Distribution: A flat-file schema and command-line tool make it easy to distribute components.
• Beautiful Defaults: Carefully chosen default styles optimized for mobile interfaces.
• AI-Ready: Open code for LLMs to read, understand, and improve.

Open Code

BNA UI hands you the actual component code. You have full control to customize and extend the components to your mobile needs. This means:

• Full Transparency: You see exactly how each component is built for React Native.
• Easy Customization: Modify any part of a component to fit your mobile design and functionality requirements.
• Platform Flexibility: Adapt components for specific iOS or Android behaviors when needed.
• AI Integration: Access to the code makes it straightforward for LLMs to read, understand, and even improve your mobile components.

In a typical React Native library, if you need to change a button's touch behavior or add haptic feedback, you have to override styles or wrap the component. With BNA UI, you simply edit the button code directly.

Mobile-First Design

BNA UI is built specifically for mobile interfaces and React Native development:

• Touch Optimized: All components are designed with touch interactions in mind, including proper touch targets and gestures.
• Performance Focused: Components are optimized for mobile performance with minimal re-renders and efficient animations.
• Native Feel: Components respect platform conventions and feel native on both iOS and Android.
• Responsive: Components adapt to different screen sizes and orientations seamlessly.

Cross-Platform Excellence

Every component in BNA UI works consistently across platforms while respecting platform-specific conventions:

• iOS & Android: Components automatically adapt to platform design guidelines.
• Expo Web: Full compatibility with Expo's web target for universal apps.
• Consistent API: Write once, works everywhere with platform-appropriate styling.

Composition

Every component in BNA UI shares a common, composable interface. If a component does not exist, we bring it in, make it composable, and adjust its style to match and work with the rest of the mobile design system.

A shared, composable interface means it's predictable for both your team and LLMs. You are not learning different APIs for every new component. Even for third-party React Native ones.

Distribution

BNA UI is also a code distribution system designed for React Native and Expo projects. It defines a schema for mobile components and a CLI to distribute them.

• Schema: A flat-file structure that defines the mobile components, their dependencies, and platform-specific properties.
• CLI: A command-line tool to distribute and install components across React Native projects with Expo support.
• Expo Integration: Seamless integration with Expo CLI and development workflow.

You can use the schema to distribute your mobile components to other projects or have AI generate completely new React Native components based on existing schema.

Beautiful Defaults

BNA UI comes with a large collection of mobile components that have carefully chosen default styles. They are designed to look good on mobile devices and to work well together as a consistent system:

• Mobile-Optimized: Your UI has a clean and modern mobile look without extra work.
• Platform Appropriate: Components automatically follow iOS and Android design guidelines.
• Unified Design: Components naturally fit with one another across all platforms.
• Touch-Friendly: All interactive elements meet accessibility guidelines for touch targets.
• Easily Customizable: If you want to change something, it's simple to override and extend the defaults.

AI-Ready

The design of BNA UI makes it easy for AI tools to work with your React Native code. Its open code and consistent API allow AI models to read, understand, and even generate new mobile components.

An AI model can learn how your mobile components work and suggest improvements or even create new React Native components that integrate with your existing mobile design system.