Sharing Code Between React Web and React Native Applications

Using Render Props to Share Logic Across Platforms in React

Reginald Johnson
Oct 21, 2018 · 9 min read

Introduction

Purpose

Design

Implementation

Image for post
Image for post
A folder for each platform (mobile and web) as well as shared and media folders
Add this to Gatsby V2 gatsby-node.js file to access shared imports
Add this to allow Expo projects to access shared imports
Ensure the Expo project uses the rn-cli.config.js file
Image for post
Image for post
Models of React Web and React Native components sharing code via a common Render Prop
Image for post
Image for post
Platform specific wrapping components
Image for post
Image for post
Each platform can contain platform specific logic in the component
Image for post
Image for post
The render prop is common across all platforms
Image for post
Image for post
Each platform has a different render function to build and present the UI
Image for post
Image for post
Bringing it all together
Enabling communication between Redux, the RPC, and platform specific code

Conclusion

React Native Training

Stories and tutorials for developers interested in React…

Reginald Johnson

Written by

Freelance software developer and 21 year military vet. I build for the web, mobile, and server with React, React Native, and AWS & node. https://www.reggie3.com

React Native Training

Stories and tutorials for developers interested in React Native

Reginald Johnson

Written by

Freelance software developer and 21 year military vet. I build for the web, mobile, and server with React, React Native, and AWS & node. https://www.reggie3.com

React Native Training

Stories and tutorials for developers interested in React Native

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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