React Native Navigation + Redux + Saga

A starter boilerplate for a mobile app using React Native and React Native Navigation (v8). This boilerplate also provides a cool redux-saga structure to bootstrap your react-native app development.

Screenshots

Stack

• React Native 0.85 — pinned to the version React Native Navigation builds against
• React Native Navigation 8 — native navigation, owns the app root
• Redux Toolkit + React Redux 9
• Redux-Saga — side effect model
• Redux Persist backed by AsyncStorage
• TypeScript, ESLint, Jest
• React Native Elements (@rneui) — UI toolkit
• React Native Vector Icons — per-family packages
• React Native FBSDK Next — Facebook login
• React Native Config — env vars

New Architecture is required. React Native removed the legacy bridge in 0.82, and RNN requires the New Architecture on RN 0.77+. This app runs bridgeless.

Requirements

• Node >= 22.11
• JDK 17 — see the note below, a newer JDK alone is not enough
• Android Studio with the Android SDK
• Xcode and CocoaPods for iOS

JDK 17 is required, not just "17 or newer"

React Native's Gradle plugin is an included build that declares jvmToolchain(17), so Gradle needs a JDK 17 installation specifically. If it can't find one it tries to auto-download it through the Foojay toolchain resolver — and the version React Native pins (0.5.0) predates Gradle 9, so on the Gradle 9 wrapper this template ships it fails with:

Class org.gradle.jvm.toolchain.JvmVendorSpec does not have member field '... IBM_SEMERU'

Installing a JDK 17 lets Gradle auto-detect it and skip the resolver entirely:

# Windows
$ winget install --id EclipseAdoptium.Temurin.17.JDK --source winget
# macOS
$ brew install --cask temurin@17

Then point JAVA_HOME at it. Android Studio's bundled JBR (21) does not satisfy this.

Building with a newer JDK fails differently — JDK 26's jlink cannot process Android's core-for-system-modules.jar:

Execution failed for JdkImageTransform: ...\platforms\android-36\core-for-system-modules.jar

On Windows, check the user JAVA_HOME and not just the machine one — the user value wins, so an old user-level entry silently overrides a correct machine-level one:

[Environment]::GetEnvironmentVariable('JAVA_HOME','User')
[Environment]::GetEnvironmentVariable('JAVA_HOME','Machine')

To scope the JDK to Gradle only, instead of changing JAVA_HOME for every tool, set org.gradle.java.home in ~/.gradle/gradle.properties.

Windows: the Visual C++ Redistributable is required

The New Architecture compiles C++, and the Android SDK's cmake.exe is dynamically linked against the MSVC runtime. Without it, CMake exits with NTSTATUS 0xC0000135 (STATUS_DLL_NOT_FOUND), which surfaces as a confusing ninja: error: rebuilding 'build.ninja' rather than an obvious missing-dependency message.

$ winget install --id Microsoft.VCRedist.2015+.x64 --source winget

How to run?

$ git clone https://github.com/atoami/react-native-navigation-redux-starter-kit ReactNativeBoilerplate
$ cd ReactNativeBoilerplate
$ npm install --legacy-peer-deps

--legacy-peer-deps is needed because @rneui/base declares its testing libraries as peer dependencies.

Run Android:

$ npm run android

Run iOS:

$ npm run pods
$ npm run ios

Configure Facebook Login

The Facebook app ID checked into this template is a placeholder and the client token is not set, so login will fail until you supply your own. Get both from developers.facebook.com/apps → Settings → Basic, then replace them in:

• android/app/src/main/res/values/strings.xml — facebook_app_id, facebook_client_token, fb_login_protocol_scheme (the scheme is fb + your app ID)
• ios/ReactNativeStarterKit/Info.plist — FacebookAppID, FacebookClientToken, and the CFBundleURLSchemes entry

Project structure

src/
├── assets/      images and icons
├── fonts/       SF Pro Display wrappers + the .otf files
├── navigation/  screen ids, root layouts, screen registration
├── redux/       store, persistence, Provider, and ducks-style modules
├── screens/     one directory per screen
└── services/    fetch wrapper

Screens import through path aliases (src/..., assets/...) configured in babel.config.js and tsconfig.json. Keep the two in sync when adding an alias.

Scripts

Command	Description
npm start	Start Metro
npm run android / npm run ios	Build and run
npm test	Jest
npm run lint	ESLint
npm run tsc	TypeScript check

Issues

Do you have any concern to run this project?  Please feel free to contact me!

License

This project is licensed under the MIT License