Mobile app for managing movies and TV Shows with daily reminders
The main apps are:
expo
(native)
next
(web)
packages
shared packages across apps
ui
includes your custom UI kit that will be optimized by Tamaguiapp
you'll be importing most files from app/
features
(don't use a screens
folder. organize by feature.)provider
(all the providers that wrap the app, and some no-ops for Web.)navigation
Next.js has a pages/
folder. React Native doesn't. This folder contains navigation-related code for RN. You may use it for any navigation code, such as custom links..env.example
in apps/expo
to .env
THE_MOVIE_DB_API_KEY
in .envInstall dependencies: yarn
Expo local dev: yarn native
yarn web
To run with optimizer on in dev mode (just for testing, it's faster to leave it off): yarn web:extract
. To build for production yarn:prod
.
To see debug output to verify the compiler, add // debug
as a comment to the top of any file.
Note we're following the design systems guide and creating our own package for components.
See packages/ui
named @my/ui
for how this works.
If you're installing a JavaScript-only dependency that will be used across platforms, install it in packages/app
:
cd packages/app
yarn add date-fns
cd ../..
yarn
If you're installing a library with any native code, you must install it in expo
:
cd apps/expo
yarn add react-native-reanimated
cd ..
yarn
You can also install the native library inside of packages/app
if you want to get autoimport for that package inside of the app
folder. However, you need to be careful and install the exact same version in both packages. If the versions mismatch at all, you'll potentially get terrible bugs. This is a classic monorepo issue. I use lerna-update-wizard
to help with this (you don't need to use Lerna to use that lib).
You may potentially want to have the native module transpiled for the next app. Add the module name to the list for withTM
in the apps/next/next.config.js
file.
withTM([
'solito',
'react-native-web',
'expo-linking',
'expo-constants',
'expo-modules-core',
'expo-crypto', // <-- add this or any other native module
])