Beeshell 2.0: Design, Architecture, and Customization of a React Native Component Library

Beeshell 2.0 is an open‑source React Native component library released by Meituan, extending the earlier Beeshell 1.0 with 38 new functions (33 components and 5 tools) to serve the whole company and the community.

The library aims at four goals: universality, ease of use, stability and flexibility. It follows a “concern separation” design principle that decomposes features, studies each concern, and then integrates solutions.

System design adopts a four‑layer architecture (business layer, component‑library layer, RN layer, system layer). The component‑library layer is split into three versions: a generic MTD version, a customized Roo version for the delivery business, and the open‑source Beeshell version.

Each version shares the same underlying architecture: an interface layer (all‑in‑one or on‑demand import), a component layer (atoms, molecules, extensions), a tool layer (tree processor, validator, etc.), and a three‑platform adaptation layer (iOS, Android, Web).

The RN layer introduces MRN, a second‑level wrapper that provides dynamic update, multi‑platform reuse and development tooling such as scaffolding, templates and monitoring.

Customization hierarchy is divided into four levels:

Level 1 – theme variables (brand primary color, etc.)

Level 2 – exposed style props (e.g.,

<Text style={this.props.labelTextStyle}>{this.props.labelText || '完成'}</Text>

)

Level 3 – render‑area props that accept a ReactElement

Level 4 – inheritance/composition of base components (e.g., SlideModal → BottomModal → custom component)

UI consistency is ensured by a shared design system (Roo Theme) that provides color palettes (brand primary, functional, neutral), typography scales (12‑14‑16‑20‑28 dp), spacing, and border rules. The library uses Sass/JS variables so developers can switch themes or adjust individual tokens.

Rich feature coverage is achieved through a systematic collection of component categories (navigation, data entry, data display, feedback, utilities) totaling more than 50 functions, and through deep per‑component capabilities such as animated transitions, dynamic theming, and multi‑direction slide modals.

Testing combines black‑box, white‑box and gray‑box (Detox) strategies, raising test coverage above 80 % and ensuring reliability across the three platforms.

Development workflow benefits from MRN’s separation of JS and native code, allowing fast iteration by loading JS bundles into the Meituan app on simulators.

Future plans include expanding the library to 100+ components across three development stages, continuously improving documentation, examples and community contributions.

The project is hosted on GitHub (github.com/Meituan-Dianping/beeshell) and welcomes contributors.

The article also contains a recruitment notice for the Meituan delivery team.