DEV Community 👩‍💻👨‍💻

Cover image for React Native Boilerplate 2022
Handi Priyono
Handi Priyono

Posted on • Updated on

React Native Boilerplate 2022

React native boilerplate 2022: React Native is a JavaScript-based mobile-app framework that allows you to build natively rendering mobile android applications and iOS. If you have learned JavaScript, you can quickly start creating react-native Projects.

Updated info of Library & package version of this React Native Boilerplate:

  • react-native": "0.69.1"
  • "@react-native-masked-view/masked-view": "^0.2.7",
  • "@react-navigation/bottom-tabs": "^6.3.2",
  • "@react-navigation/material-top-tabs": "^6.2.2",
  • "@react-navigation/native": "^6.0.11",
  • "@react-navigation/native-stack": "^6.7.0",
  • "@react-navigation/stack": "^6.2.2",
  • "@reduxjs/toolkit": "^1.8.3",
  • "react": "18.0.0",
  • "react-native-gesture-handler": "^2.5.0",
  • "react-native-pager-view": "^5.4.25",
  • "react-native-safe-area-context": "^4.3.1",
  • "react-native-screens": "^3.15.0",
  • "react-native-tab-view": "^3.1.1",
  • "react-native-vector-icons": "^9.2.0",
  • "react-redux": "^8.0.2"

react native boilerplate 2022

React-Native Boilerplate 2022

The problem comes from how we manage the structure of the files, folder structure best practices, and what Library we'll use to develop stable apps. Make sure you only use the Library you need. Never install libraries, but you don't use those libraries in code. It is better to uninstall that Library instead of you inserting it into your Project.

Criteria for the Best React Native Boilerplate

If you are going to create React Native projects from scratch, you've to think about using React-native boilerplate. React-native boilerplate architecture is usually designed for the best performance and follows React / React Native best practices.

If you want the best react-native boilerplate, make sure that the boilerplate is updated monthly. Because libraries continuously get updated and also the react-native version itself. Commonly, you can check that updated change log at the GitHub repository.

If you clone the old and unmaintained react-native boilerplate template, your app will be under-performance. And this will cause another problem in your code regarding compatibility and so on.

What any React native boilerplate should have are:

1. Navigation.

It is used to navigate to another page or screen. Most developers use React Navigation.

2. State Management.

It is used for storing the global state, which this state can access from any screen. One of them is Redux, Redux Toolkit. Another option is MobX.

3. React Hooks

You can use the latest react Hooks instead of using React Class. Some developers also want to integrate react native boilerplate with typescript. That's an option.

4. React Native Icon

Mainly, a project always uses the icon to enhance its appearance. So, we can use the 'react-native vector icon.' As another option, you can also import your local icon.

Ya, that's all. Because every Project's needs are different, that has to be just a simple boilerplate. Later, developers can add another library needed for developing the new features.

Based on my experience as a React-native Engineer for almost three years, I have created the React-Native boilerplate that I can use in any Project. You can also use this simple boilerplate in your Project because it consists of simple Libraries and has the best folder structure.

I will share this boilerplate and how to use it in your Project.

Quick start

To create a new project using the boilerplate, run :

npx react-native init MyApp --template @handidev/react-native-boilerplate
Enter fullscreen mode Exit fullscreen mode

Or, if you want to use the typescript version, run the below command.

npx react-native init MyApp --template @handidev/react-native-typescript-boilerplate
Enter fullscreen mode Exit fullscreen mode

Note: replace MyApp with your desired App name.

Assuming you have all the requirements installed, you can run the Project by running:

  • yarn start / npm start -- -- reset-cache to start the metro bundler, in a dedicated terminal
  • npx react-native run-ios / npx react-native run-android to run the platform application (remember to start a simulator or connect a device)

If you got an error like: The version of CocoaPods used to generate the lockfile (x.x.x) is higher than the version of the current executable (x.x.x), then you can upgrade your cocoapods version.

If you install cocoapods using homebrew, you can use this command: brew upgrade cocoapods if that does not work, try brew install cocoapods

If you previously installed using gem then use this command and run on your terminal: sudo gem install cocoapods

Make sure your cocoa pods version is updated after a run that command.

To check your current version of cocoapods, run pod --version

After that, don't forget to execute in your terminal pod repo update

And finally, run npx pod install. The solutions above must solve those methods that problem.

Last method: If All the above steps do not work, remove Podfile.lock in folder ios and then run npx pod-install

  • Start the packager with npm start
  • Connect your device or use an emulator that's installed on your PC
  • Run the test application:
  • On Android: Run npx react-native run-android
  • On iOS: Open npx react-native run-ios

I hope that boilerplate can be helpful for all of you guys. If you have any questions, please visit me on Github. Don't forget the fork and give it a star.

For complete instructions on how to install, you can go to react native boilerplate 2022 Github repository:

React Native Boilerplate Javascript version:

https://github.com/handi-dev/react-native-boilerplate#quick-start

React Native Boilerplate TypeScript version:

https://github.com/handi-dev/react-native-typescript-boilerplate#readme

original article: React-Native Boilerplate 2022

Top comments (5)

Collapse
appi2393 profile image
Apurva Jain

npx: installed 1 in 1.666s
Scanning for pods...
1.9.3

pod install
Auto-linking React Native modules for target reactNativeBoilerplate: RNCAsyncStorage, RNCMaskedView, RNGestureHandler, RNReanimated, RNScreens, RNVectorIcons, and react-native-safe-area-context
Analyzing dependencies
Fetching podspec for DoubleConversion from ../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec
Fetching podspec for Folly from ../node_modules/react-native/third-party-podspecs/Folly.podspec
Fetching podspec for glog from ../node_modules/react-native/third-party-podspecs/glog.podspec
[!] CocoaPods could not find compatible versions for pod "FlipperKit/FlipperKitReactPlugin":
In snapshot (Podfile.lock):
FlipperKit/FlipperKitReactPlugin (= 0.54.0, ~> 0.54.0)

In Podfile:
FlipperKit/FlipperKitReactPlugin (~> 0.54.0)

None of your spec sources contain a spec satisfying the dependencies: FlipperKit/FlipperKitReactPlugin (~> 0.54.0), FlipperKit/FlipperKitReactPlugin (= 0.54.0, ~> 0.54.0).

You have either:

  • out-of-date source repos which you can update with pod repo update or with pod install --repo-update.
  • mistyped the name or version.
  • not added the source repo that hosts the Podspec to your Podfile.

Aborting run
An unexpected error was encountered. Please report it as a bug:
CocoaPodsError: The command pod install failed
└─ Cause: Error: pod exited with non-zero code: 31
at CocoaPodsPackageManager._installAsync (/Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:85286)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async CocoaPodsPackageManager.installAsync (/Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:84649)
at async runAsync (/Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:109680)
at async /Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:109766 {
code: 'COMMAND_FAILED',
cause: Error: pod exited with non-zero code: 31
at ChildProcess.h (/Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:1073)
at Object.onceWrapper (events.js:422:26)
at ChildProcess.emit (events.js:315:20)
at maybeClose (internal/child_process.js:1048:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
...
at Object.spawnAsync as default
at CocoaPodsPackageManager._runAsync (/Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:86068)
at CocoaPodsPackageManager._installAsync (/Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:84933)
at CocoaPodsPackageManager.installAsync (/Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:84660)
at runAsync (/Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:109688)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async /Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:109766 {
pid: 18399,
output: [
'',
'\x1B[33m[!] The version of CocoaPods used to generate the lockfile (1.10.0) is higher than the version of the current executable (1.9.3). Incompatibility issues may arise.\x1B[0m\n'
],
stdout: '',
stderr: '\x1B[33m[!] The version of CocoaPods used to generate the lockfile (1.10.0) is higher than the version of the current executable (1.9.3). Incompatibility issues may arise.\x1B[0m\n',
status: 31,
signal: null
},
isPackageManagerError: true
}

Collapse
handipriyono profile image
Handi Priyono Author

Hi @appi2393 , please re-read the article , since i have updated that,
Thanks

Collapse
appi2393 profile image
Apurva Jain
npx: installed 1 in 1.666s
Scanning for pods...
1.9.3
> pod install
Auto-linking React Native modules for target `reactNativeBoilerplate`: RNCAsyncStorage, RNCMaskedView, RNGestureHandler, RNReanimated, RNScreens, RNVectorIcons, and react-native-safe-area-context
Analyzing dependencies
Fetching podspec for `DoubleConversion` from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`
Fetching podspec for `Folly` from `../node_modules/react-native/third-party-podspecs/Folly.podspec`
Fetching podspec for `glog` from `../node_modules/react-native/third-party-podspecs/glog.podspec`
[!] CocoaPods could not find compatible versions for pod "FlipperKit/FlipperKitReactPlugin":
  In snapshot (Podfile.lock):
    FlipperKit/FlipperKitReactPlugin (= 0.54.0, ~> 0.54.0)

  In Podfile:
    FlipperKit/FlipperKitReactPlugin (~> 0.54.0)

None of your spec sources contain a spec satisfying the dependencies: `FlipperKit/FlipperKitReactPlugin (~> 0.54.0), FlipperKit/FlipperKitReactPlugin (= 0.54.0, ~> 0.54.0)`.

You have either:
 * out-of-date source repos which you can update with `pod repo update` or with `pod install --repo-update`.
 * mistyped the name or version.
 * not added the source repo that hosts the Podspec to your Podfile.

Aborting run
An unexpected error was encountered. Please report it as a bug:
CocoaPodsError: The command `pod install` failed
└─ Cause: Error: pod exited with non-zero code: 31
    at CocoaPodsPackageManager._installAsync (/Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:85286)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async CocoaPodsPackageManager.installAsync (/Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:84649)
    at async runAsync (/Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:109680)
    at async /Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:109766 {
  code: 'COMMAND_FAILED',
  cause: Error: pod exited with non-zero code: 31
      at ChildProcess.h (/Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:1073)
      at Object.onceWrapper (events.js:422:26)
      at ChildProcess.emit (events.js:315:20)
      at maybeClose (internal/child_process.js:1048:16)
      at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
      ...
      at Object.spawnAsync [as default] (/Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:558)
      at CocoaPodsPackageManager._runAsync (/Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:86068)
      at CocoaPodsPackageManager._installAsync (/Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:84933)
      at CocoaPodsPackageManager.installAsync (/Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:84660)
      at runAsync (/Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:109688)
      at processTicksAndRejections (internal/process/task_queues.js:93:5)
      at async /Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:109766 {
    pid: 18399,
    output: [
      '',
      '\x1B[33m[!] The version of CocoaPods used to generate the lockfile (1.10.0) is higher than the version of the current executable (1.9.3). Incompatibility issues may arise.\x1B[0m\n'
    ],
    stdout: '',
    stderr: '\x1B[33m[!] The version of CocoaPods used to generate the lockfile (1.10.0) is higher than the version of the current executable (1.9.3). Incompatibility issues may arise.\x1B[0m\n',
    status: 31,
    signal: null
  },
  isPackageManagerError: true
}
Enter fullscreen mode Exit fullscreen mode
Collapse
handipriyono profile image
Handi Priyono Author

see updated article on how to solve that,

Collapse
nosykretts profile image
Fajar Andi Patappari

Wow. thank you @handipriyono

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.