We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies.

We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies. Less

We use cookies and other tracking technologies... More

Login or register
to publish this job!

Login or register
to save this job!

Login or register
to save interesting jobs!

Login or register
to get access to all your job applications!

Login or register to start contributing with an article!

Login or register
to see more jobs from this company!

Login or register
to boost this post!

Show some love to the author of this blog by giving their post some rocket fuel 🚀.

Login or register to search for your ideal job!

Login or register to start working on this issue!

Login or register
to save articles!

Login to see the application

Engineers who find a new job through JavaScript Works average a 15% increase in salary 🚀

You will be redirected back to this page right after signin

Blog hero image

React Native Boilerplate 2021

Handi Priyono 31 August, 2021 | 2 min read

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

BEST React-Native Boilerplate 2021

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. 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 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:

  • Navigation. It is used to navigate to another page or screen. Most developers use React Navigation.
  • State Management. 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.
  • 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.
  • React Native Icon . 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 <your project name>
  • Go to project’s root directory, cd <your project name>
  • Remove .git folder, rm -rf .git
  • Use React Native Rename to update project name $ npx react-native-rename <newName>
  • Run npm install to install dependencies
  • Run npx pod-install from root of your project
  • Start the packager with npm start
  • 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 react native.png

Originally published on handi.dev

Author's avatar
Handi Priyono
Fullstack Javascript Engineer, contact me : techiehandy@gmail.com

Related Issues

open-editions / corpus-joyce-ulysses-tei
open-editions / corpus-joyce-ulysses-tei
  • Started
  • 0
  • 3
  • Intermediate
  • HTML
open-editions / corpus-joyce-ulysses-tei
open-editions / corpus-joyce-ulysses-tei
  • Started
  • 0
  • 2
  • Intermediate
  • HTML
open-editions / corpus-joyce-ulysses-tei
open-editions / corpus-joyce-ulysses-tei
  • Open
  • 0
  • 0
  • Intermediate
  • HTML
open-editions / corpus-joyce-ulysses-tei
open-editions / corpus-joyce-ulysses-tei
  • Started
  • 0
  • 1
  • Intermediate
  • HTML

Get hired!

Sign up now and apply for roles at companies that interest you.

Engineers who find a new job through JavaScript Works average a 15% increase in salary.

Start with GitHubStart with Stack OverflowStart with Email