A way to share application logic between a React Web app and a React Native app, while keeping the individual component rendering unique to each platform.
For a thorough discussion of this project, please read my Blog Post about it.
|React Native||React Web|
The app itself is a very simple Hello World (ish) app. Not only does it show "Hello World"... but when you click (or tap) it... it changes from red to blue! woah!
android houses the Android project files,
ios houses the iOS project files,
web houses the
webpack configs and
index.html (it is also the
destination of our minified bundle).
app itself is primarily based on my React/Webpack/Redux Boilerplate,
for more info on that head over there. The only key difference can be found in
app/web. What's going on here is both the native app and
web app are sharing their core application logic, while keeping the individual
The reasoning for this is twofold - for one, React Native/React wasn't designed to be a "write once, run everywhere" framework. Facebook constantly calls it a "learn once, write everywhere" framework - the idea being that you tailor your implementation to the platform you're writing for. The second is that React Native and React are ultimately... different and the code wouldn't be reusable without some crazy aliases.
The entry point for the iOS app is
index.ios.js, for android is
index.android.js, and for the web app is
Running in dev/production
There are 8 defined scripts in [package.json][pg]:
start is used when running/bundling the native application. When you open
either the xcode project or the android studio project and hit "run", it
kicks off a node server via the
start command. Every time you make a
you simply refresh the app and the changes are magically there. As this is not
a React Native guide I will not be going into more detail than that - further
information can be found on Facebook's React Native Getting Started guide.
depending on the presence of
dev or not), and places it where the
corresponding project expects it to be for running locally on your device.
Again, you can find more info on running on your device on Facebook's
React Native Getting Started.
web-dev kicks off a webpack server on port 3001, it utilizes hot reloading
with some redux-time-machine-magic to have a crazy awesome dev experience where
you can rewind and revert actions in your application.
css) and places it next to the
web/public that you can serve
with any static file server.
Every now and then, when React Native is doing it's thing, you'll swear that you've changed something, but alas it is still causing your app to break! oh noes! what do we do!
I'm glad you asked! Just run
npm run clear-cache!
Webpack sets the
PLATFORM_ENV environment variable to be
web. You can use
this check to conditionally load different files depending on if you're building
your native or web app. For example - you can abstract out the difference
between local storage mechanisms.