React Native Boilerplate - A well-structured Boilerplate for your project

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

If you want to go to the point, this is the GitHub repository for react native boilerplate : https://github.com/handi-dev/react-native-boilerplate

React-Native Boilerplate 2024

The problem comes from how we manage the structure of the files, folder structure best practices, and also 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 than insert 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 global state, which can be accessed from any screen. One of them is Redux Toolkit, Redux with Redux Thunk. 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, simply run :

npx react-native init MyApp --template @handidev/react-native-boilerplate

or, use run code below if you want to get TypeScript Boilerplate.

npx react-native init MyAppName --template @handidev/react-native-typescript-boilerplate

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)

Possible Error and solutions:

Error /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems.rb:283:in find_spec_for_exe: Could not find 'bundler' (2.1.4) required by your /Users/username/DEVELOPER/MyAppName/Gemfile.lock. (Gem::GemNotFoundException)
To update to the latest version installed on your system, run bundle update --bundler. To install the missing version, rungem install bundler:2.1.4from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems.rb:302:in activate_bin_path from /usr/bin/bundle:23:in <main>

✖ Installing Bundler
error Error: Looks like your iOS environment is not properly set. Please go to https://reactnative.dev/docs/next/environment-setup and follow the React Native CLI QuickStart guide for macOS and iOS.

Solution:

follow step below:

1. brew install rbenv
2. rbenv install 2.7.5
3. rbenv local 2.7.5
4. export PATH="$HOME/.rbenv/shims:$PATH"

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 2024 Github repository: https://github.com/handi-dev/react-native-boilerplate

TypeScript version: https://github.com/handi-dev/react-native-typescript-boilerplate