React Native is a framework for building mobile apps that use JavaScript. It allows you to create apps that look and feel native to both Android and iOS devices. If you already know JavaScript, you can easily start building your own React Native projects. Overall, React Native is a powerful tool for creating cross-platform mobile apps that have a native look and feel.

best react native boilerplate

React Native Best Practices 2024

One issue that can arise when building a React Native app is how to manage the structure of your files and folders. It’s important to follow best practices for organizing your project and to only use libraries that you actually need. It’s a good idea to avoid installing libraries that you don’t plan on using, as they can take up unnecessary space and potentially cause issues. Instead, it’s better to uninstall any unused libraries from your project. By keeping your project organized and using only the libraries that you need, you can help ensure that your app is stable and reliable.

Criteria for the Best React Native Boilerplate

If you want to build a React Native app from scratch, it can be helpful to use a React Native boilerplate. Boilerplates provide a pre-built structure and set of resources that can save you time and effort in setting up your project. They are often designed with performance in mind and follow best practices for React and React Native development. By using a boilerplate, you can get your project off to a strong start and focus on building out the features and functionality that are specific to your app.

Consider using a React Native boilerplate if you want to create a new app from scratch. These templates offer a pre-organized structure and a set of useful resources that can make it easier to get started. Boilerplates are usually optimized for performance and follow recommended practices for React and React Native development. By using a boilerplate, you can set up your project more efficiently and focus on adding the unique features and functionality of your app.

Using an old, unmaintained React Native boilerplate template can lead to poor app performance and potential compatibility issues in your code. It’s best to avoid cloning these types of templates and instead opt for a boilerplate that is regularly updated and maintained. This will help ensure that your app is optimized for performance and that you don’t run into any problems related to compatibility.

What any React-Native Boilerplate should have:

  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 developers can access 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 the 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.

Yes, that’s all for now. It’s important to note that the needs of each project can vary, so it’s best to start with a simple boilerplate and add additional libraries as needed.

As a React Native engineer with experience, I have created a boilerplate that I can use in any project. This boilerplate is simple and includes only the necessary libraries, as well as a well-organized folder structure. You may find it useful for your own projects as well.

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

Quick start

To create a new project using the rn-boilerplate, run :

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

note: replace MyApp with your desired App name.

Assuming you have all of the necessary requirements installed, you can run the project by using the following command:

  • 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)

Q n A

-> 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 it on your terminal:

 sudo gem install cocoapods

Make sure your cocoa pods version is updated after running that command. To check your current version of cocoapods:

pod --version

After that, don’t forget to execute in your terminal

pod repo update

And, finally, run

npx pod-install

Those methods must be solved that problem.

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

Collection of error with Solutions when installing react native boilerplate

you can read more here: https://github.com/handi-dev/react-native-typescript-boilerplate#list-of-q–a

I hope that this boilerplate will be helpful for all of you. If you have any questions, please feel free to visit me on Github. Don’t forget to fork and give it a star. In the future, I plan to update the boilerplate to include Typescript.

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