React Native Best Practices 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
To create React-Native projects from scratch, you must consider 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:
Navigation. It is used to navigate to another page or screen. Most developers use React Navigation.
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.
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.
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, 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.
To create a new project using the rn-boilerplate, run :
npx react-native init MyApp --template @handidev/react-native-boilerplate
MyApp with your desired App name.
Assuming you have all the requirements installed, you can run the Project by running:
npm start -- -- reset-cacheto start the metro bundler in a dedicated terminal
npx react-native run-ios/
npx react-native run-androidTo 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:
After that, don’t forget to execute in your terminal
pod repo update
And, finally, run
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
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. Soon, I will update this boilerplate with Typescript.
For complete instructions on how to install, you can go to react native boilerplate 2022 Github repository:
- TypeScript version: https://github.com/handi-dev/react-native-typescript-boilerplate