Going Native: Reusing Code

Doubková separates reuse into components, styling, and business logic. Web components describe page semantics, such as headings and paragraphs, while native components focus on interactions, such as flat lists and date pickers. Because the two sets of components do not map well, Hive rebuilt its UI for native.

Some components can be shared when they do not render platform-specific UI, such as a conditional feature that decides whether to show its children. Hive also wrapped SVG assets in React components and passed the platform-specific versions in as props. This approach works across web and React Native, with some mapping code to maintain.

Hive used styled-components to share CSS-style definitions between web and React Native. Some layout behavior differs: React Native uses flex layout by default, with a column direction. Shared variables, font sizes, and other styles helped keep the platforms visually consistent.

Hardware integrations and some SDKs, including analytics, still required native code. Much of the application logic remained JavaScript, so Hive reused its Redux store, actions, sagas, reducers, connectors, and translations. Doubková says the team wrote very little native code, with minor changes for push notifications and Bluetooth.

Most of the work moving from web to native was building components and styles. The team moved many existing business logic files into a shared folder instead of rewriting them. Doubková summarizes that components were not broadly reusable, styles were partly reusable, and shared business logic provided the greatest development speed.