⚠️This is pre-release stuff, and while it may be a good starting off point, it doesn't have the easy upgradability that I might like to add if people are interested. There may be bloat left over from years of updating this codebase (going back 6 years), but that too can be fixed if there's interest.
Learn once, Write once, Use Everywhere, React Once
What it is
React Once is an open example of universal, "write once, run everywhere" using React (Native) syntax and libraries. It runs native on all platforms it currently supports, and showcases many packages working--ones useful in starting a project too.
I think in the long run, naming "React Native" what it's called was a mistake. It's made it seem too separate from React in my experience with other devs and companies. The mantra of "learn once, write anywhere" was very important as it set realistic goals for the time. It's let us use this declarative UI framework on web and mobile for the past 7 years, whereas if they'd tried to make it work universally since day one it'd either have the same downsides as other "write once" libraries that use web views, or taken ages to be released.
This repo helps in initializing a template. It's a cli tool in the vein of
create-react-app. Important: after running the create command below, create a
.env file containing
API_HOST=http://localhost:3001. This will let you run with the mock API.
npx create-react-once-app my-app cd my-app npm run dev
And as standard on iOS:
cd ios pod install cd ..
And then use
npm run ios or open it in XCode to run. To run on macOS you must also do it in XCode as I haven't added a script for that yet. See below for notes on M1 (which I use with success).
The source code is located here (https://gitlab.com/NoahGray/react-once-template/-/tree/main/template), and all tickets can be found there, or added there.
Because we use
react-navigation for "Native" (oops I called it native) and
next for web/SSR, we use
expo-next-react-navigation for most links. But that doesn't mean we still don't have to maintain a
src/pages folder for Next's routing and
App.js. With smart coding, this is not too hard. The docs of
expo-next-react-navigation should show how similar it is to
react-navigation, but it means understanding Next's file/folder based routing.
Redux / State management
In this app kit, a great deal of Redux boilerplate is taken care of using
ApiClient.js which adds authentication to requests, and adds a minimal but powerful client for REST requests (promises-based) to each Redux action so they can be written in just a few lines. Look under
src/store for implementation, and
src/store/modules for examples of reducers (which if you replicate, add to
Installation on M1 macsOS ~11.2
Development is screaming fast on the M1 Macs. However, there is mixed success getting Cocoapods working with
pod install. The method I used to get around this is to do pod install like so
cd ios && arch -x86_64 pod install. This does NOT force you to use Rosetta (at least it doesn't seem to) for XCode and everything else too. It seems to make great use of the M1 and is extremely fast and never turns on the fans. Version 1.11.0 of Cocoapods is planned to fix this issue and perhaps install natively on M1 which will be a slightly smoother install and maybe even somehow faster, if that's possible.