Beeshell: An Open-Source React Native Component Library for Mobile Apps

Introduction

Beeshell is a React Native component library (based on version 0.53.3) that provides a complete set of high‑quality JavaScript (JS) and native components for iOS, Android and web front‑ends. It is open‑sourced on GitHub: https://github.com/meituan/beeshell .

Key Features

Consistent UI style with customization support.

Cross‑platform implementation using JS.

Fine‑grained inheritance and composition for extensibility.

Native functionality (image picker, location, etc.) wrapped in JS.

Rich set of components, utilities, animations and UI specifications.

Comprehensive documentation and examples.

Comparison with Other Libraries

Beeshell was compared against other open‑source libraries with >5000 GitHub stars on dimensions such as component count, universality, customizability, native support and documentation. It lags slightly in component quantity but matches or exceeds others in all other aspects.

System Design

The system design transforms business requirements into a layered architecture: a framework layer, a design‑principle layer and a solution‑design layer.

Framework Design

Built on React Native, Beeshell abstracts platform differences through a unified JS API, while native modules handle platform‑specific features.

Design Principles

JS‑first implementation for cross‑platform reuse.

Flexible use of inheritance and composition.

Low coupling, high cohesion (data‑coupling via Props, interaction‑cohesion, sequential‑cohesion).

Solution Design

JS serves as the entry point; native code is encapsulated behind bridges. The library is split into three JS layers: common (basic tools), components (generic components) and modules (extended, business‑specific components).

JS Component Part

Adopts a hierarchical architecture (pipeline, OOP, etc.) and uses a three‑tier structure: basic tools, generic components, and extended components, each progressively increasing customizability.

Composite Component Part

Combines JS interfaces with native implementations (Native Bridge and pure native modules) to expose platform‑agnostic APIs.

Cross‑Platform Guarantees

React Native provides built‑in components (e.g., View, Text) that are universal, while platform‑specific components (e.g., DatePickerIOS, DatePickerAndroid) are unified through custom wrappers such as a JS‑implemented Datepicker and an Input component that uses Platform to add Android‑specific clear‑icon support.

Customization Support

Beeshell enables style customization (theme colors, radius, borders) via a variable file beeshell/common/styles/varibles.js and StyleSheet APIs. Functional customization is demonstrated with the Modal series (Modal, ConfirmModal, SlideModal, PageModal, CheckboxModal) that extend a base Modal through inheritance and composition.

Complex Cases

Examples include recursive size measurement for a Scrollerpicker component, UI size tolerance using measure, and fine‑grained layout control for Form validation via a CVD (Connector‑Validator‑Dependency) pattern.

Testing

Beeshell uses Jest for unit testing, snapshot testing for UI regression, and SonarQube for static analysis. Coverage consistently exceeds 70 % with reliability and security grades at A level.

Development & Consistency

Development is performed in a demo React Native app with the library linked via npm link or symbolic links. Metro bundler behavior differs from Webpack, requiring explicit handling of symlinks.

Future Outlook

Roadmap: Phase 1 – open‑source 20+ components; Phase 2 – migrate 50+ internal components; Phase 3 – target 100+ components covering common mobile app needs.

Open‑Source Information

GitHub: beeshell . Core contributors: 小龙, 孟谦 (frontend) and 渊博, 杨超 (native). Community group QR code and contact details are provided for further collaboration.