if you wanna go to the point, this is the GitHub repository for react native boilerplate : https://github.com/handi-dev/react-native-boilerplate.
Updated info of Library & package version of this React Native Boilerplate:
- react-native": "0.65.1"
- React Navigation 6
- react-navigation/native: "^6.0.2
- react-navigation/native-stack: "^6.1.0"
- react-navigation/stack: "^6.0.7"
- react-native-gesture-handler: "^1.10.3"
- react-native-screens: "^3.6.0"
- react-native-tab-view: "^3.1.1"
- react-native-masked-view/masked-view: "^0.2.6"
- react-navigation/bottom-tabs: "^6.0.5"
- react-navigation/material-top-tabs: "^6.0.2"
- react-native-async-storage/async-storage: "^1.15.7"
- react native vector icons: "^8.1.0"
The problem comes from how we manage the structure of the files, folder structure best practice, and also what library that we’ll use to develop apps that are stable. Make sure you only use the library you need. Never install libraries, but in fact, you don’t use those libraries in code. It is better to uninstall that library instead of you inserting in your project.
If you are going to create React native projects from scratch, you’ve to think about using React-native boilerplate. React-native boilerplate architecture usually created for the best performance and also it follows React / React Native best practices.
If you want to get the best react-native boilerplate, make sure that boilerplate is monthly-updated. Because libraries always get updated and also the react-native version itself. Commonly, you can check that updated change log at 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 when it comes to compatibility and so on.
Basically, what any React native boilerplate should have are:
It is used to navigate to another page or screen. Most developers use React Navigation.
It is used for storing global state, which can be accessed from any screen. One of them is Redux with Redux Thunk. Another option is MobX.
You can use the latest react Hooks instead of using React Class. Some developer also want to integrate react native boilerplate with typescript. That’s an option.
Mostly, a project always uses the icon to enhance its appearance. So, we can use ‘react native vector icon’. As another option, you can also import your local icon.
Ya, that’s all. Because the needs of every Project are different, so that has to be just Simple boilerplate. Later on, developers can add another library that is needed for developing the new features.
Based on my experience as a React-native Engineer for almost 3 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. Make sure you have installed react-native-rename as a global package. If you haven’t installed that yet, you can follow this command.
npm i react-native-rename -g
After that, follow steps below:
Clone this repo, git clone https://github.com/handi-dev/react-native-boilerplate.git
Go to project’s root directory, cd .
Remove .git folder,
rm -rf .git
Use React Native Rename to update project name $
npx react-native-rename <newName>
npm installto install dependencies
npx pod-installfrom root of your project
If you got 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 using this command:
brew upgrade cocoapods if that does not work, try
brew install cocoapods.
If you previously install using
gem, then use this command and run on your terminal:
sudo gem install cocoapods
make sure your cocoapods version is updated after run that command.
To check your current version of cocoapods, run
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 method: If All the above steps not work, remove
Podfile.lock in folder
ios , and then run `npx pod-install
- Start the packager with
- Connect your device or use emulator that’s installed in 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 useful for all of you guys. If you have any questions please visit me on github. don’t forget fork and give a star.
For full instructions on how to install , you can go to react native boilerplate 2021 Github repository: https://github.com/handi-dev/react-native-boilerplate
original article: React-Native Boilerplate 2021