HackerNoon.com
Published in

HackerNoon.com

Share Code between React and React Native Apps

  • UX consistency, both within an application and across devices
  • Make cross-cutting upgrades: improve a component and update all its uses easily
  • reuse routing and authorization rules
  • Switch libraries (for example, the apps below uses MobX for state management, but Redux could be swapped in)

What are Higher Order Components and Stateless Functional Components?

const AutocompleteTextBox = makeAutocomplete(TextBox);
export AutocompleteTextBox;
//…laterimport {AutoCompleteTextBox} from ‘./somefile’;

Sample Application

Refactoring to Reuse

Achieving Code Reuse is About Perspective

Seeing Duplication

Almost the same, but the platform differences between React and React Native are in the way.
Our goal: a common, shared set of components

Separation of Concerns and Single Responsibility

  • UI implementation: e.g. separate ListItem and ListView from the concept of search results
  • UX from state changes: e.g. separate submitting a search from updating and showing the results
  • components: search input, search results (list) and an individual search result (list item) should each be a separate component

Extract Stateless Functional Components

Extract Higher Order Components

  1. Let SearchBox pass ColorListItem to SearchResults (as a prop).
  2. Have index.js pass ColorListItem to SearchBox, which would pass it to SearchResults
  3. Convert to SearchBox to a Higher Order Component (HOC)

Refactoring React Native Components

Extracting a Shared Component for Web and Mobile

The Payoff: Reusing the Components

  • create-react-app for the web app, react-native init for the mobile app
  • add these modules: MobX, Material UI (web only), qs (for query string encoding)…details in package.json in the respective projects (web and mobile)

React Native: GitHub mobile app

Review and Wrap-Up

box icon is from thenounproject.com, courtesy of Tinashe Mugayi

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Christian Sepulveda

espresso fanatic, coder (still), VP Engineering Bastille, …yeah, espresso comes first. https://christiansepulveda.com