React native boilerplate 2024: React Native is a framework for building native mobile applications using JavaScript. It allows developers who are familiar with JavaScript to build apps that can run on both Android and iOS platforms using the same codebase. This can be a great time-saver for developers who want to build apps that can be used on multiple platforms, as they can use their existing knowledge of JavaScript to do so. Additionally, because React Native uses native components to render the user interface, the apps that are built with it have a native feel and perform well on mobile devices.
Latest version: React Native 0.73.1.
Debugging Improvements
Stable Symlink Support in Metro
Kotlin Template on Android
Android 14 Support
New Architecture Updates
Deprecated Debugging Features
Updated info of Library & package version of this React Native Boilerplate:
- "react-native": "0.73.1",
- "@react-native-masked-view/masked-view": "^0.3.1",
- "@react-navigation/bottom-tabs": "^6.5.11",
- "@react-navigation/material-top-tabs": "^6.6.5",
- "@react-navigation/native": "^6.1.9",
- "@react-navigation/native-stack": "^6.9.17",
- "@react-navigation/stack": "^6.3.20",
- "react": "18.2.0",
- "react-native-gesture-handler": "^2.14.0",
- "react-native-pager-view": "^6.2.3",
- "react-native-safe-area-context": "^4.8.2",
- "react-native-screens": "^3.29.0",
- "react-native-tab-view": "^3.5.2",
- "react-native-vector-icons": "^10.0.3"
React-Native Boilerplate 2024
One common problem when developing stable apps is managing the structure of the files and folders in your project. It's important to follow best practices for organizing your code, and to only use libraries that are necessary for your project. Avoid installing libraries that you don't actually use in your code. Instead, it's better to remove any unnecessary libraries from your project.
Criteria for the Best React Native Boilerplate
If you are starting a new React Native project from scratch, it can be helpful to use a boilerplate. A boilerplate is a pre-built project structure that follows best practices and is optimized for performance.
There are many different React Native boilerplates available, and it's important to choose one that is regularly updated. This is because libraries and the React Native framework itself are constantly being updated, so an outdated boilerplate may not be compatible with the latest versions.
To find a reliable boilerplate, you can check the change log on the repository of the boilerplate you are considering, to see how often it is updated.
Using an old, unmaintained boilerplate template for your React Native project can lead to poor performance and compatibility issues. To ensure that your app runs smoothly and is free of any problems, it's important to use a boilerplate that is actively maintained and kept up-to-date with the latest changes in the React Native framework and libraries. Cloning an outdated boilerplate template could cause issues with your code and negatively impact the overall performance of your app.
A good React Native boilerplate should include the following features:
1. Navigation.
React Navigation is a popular library that is often used to navigate between pages or screens in a React Native app. Many developers rely on this library to provide an easy and efficient way to navigate within their apps.
2. State Management.
There are several libraries that can be used for managing global state in a React Native app. These libraries allow you to store data that can be accessed from any screen in your app. Two popular options for managing global state are Redux and Redux Toolkit, as well as MobX. These libraries can help you centralize and manage your app's data more efficiently.
3. React Hooks
In addition to traditional React class, developers can also use the latest React Hooks to build their React Native apps. Some developers may also prefer to use a boilerplate that integrates react native boilerplate with typescript, which is a programming language that adds static type checking to JavaScript. Whether you choose to use Hooks or TypeScript is a matter of personal preference and the specific needs of your project.
4. React Native Icon
Icons are a common element of many React Native projects, as they can help improve the appearance of an app. To use icons in your project, you can use the react-native-vector-icons library, which provides a wide variety of customizable icons. Alternatively, you can also import your own local icons and use them in your app.
Keep in mind that every project has different requirements, so it's important to choose a boilerplate that is simple and flexible. You can always add additional libraries as needed to support new features in your project.
As a React Native engineer with almost three years of experience, I have developed 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. If you are starting a new React Native project, you may find this boilerplate helpful as it can provide a solid foundation for your project.
I am willing to share my boilerplate with you and provide instructions on how to use it in your project.
Quick start
To create a new project using the boilerplate, run :
npx react-native init MyApp --template @handidev/react-native-boilerplate
If you prefer to use the TypeScript version of the boilerplate, you can run the following command:
npx react-native init MyApp --template @handidev/react-native-typescript-boilerplate
Note: Make sure to replace MyApp with the desired name for your app. If you have all the necessary requirements installed, you can run the project by using the following command:
-
yarn start/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)
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 on your terminal: sudo gem install cocoapods
Make sure your cocoa pods version is updated after a run that command.
To check your current version of cocoapods, run pod --version
After that, don't forget to execute in your terminal pod repo update
And finally, run npx pod install. The solutions above must solve those methods that problem.
If none of the above steps are successful, you can try this last method: Remove the Podfilelock file from the ios folder and then run the npx pod-install command. This may resolve any issues you are experiencing with running your React Native project.
- Start the packager with
npm start - Connect your device or use an emulator that's installed on 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 this boilerplate will be helpful for you. If you have any questions or need assistance, you can find me on Github.
Please consider forking and starring the repository if you find it useful. For complete installation instructions, you can visit the React Native Boilerplate 2024 Github repository.
React Native Boilerplate Javascript version:
https://github.com/handi-dev/react-native-boilerplate#quick-start
React Native Boilerplate TypeScript version:
https://github.com/handi-dev/react-native-typescript-boilerplate#readme
original article: React-Native Boilerplate 2024
Top comments (5)
npx: installed 1 in 1.666s
Scanning for pods...
1.9.3
In Podfile:
FlipperKit/FlipperKitReactPlugin (~> 0.54.0)
None of your spec sources contain a spec satisfying the dependencies:
FlipperKit/FlipperKitReactPlugin (~> 0.54.0), FlipperKit/FlipperKitReactPlugin (= 0.54.0, ~> 0.54.0).You have either:
pod repo updateor withpod install --repo-update.Aborting run
An unexpected error was encountered. Please report it as a bug:
CocoaPodsError: The command
pod installfailed└─ Cause: Error: pod exited with non-zero code: 31
at CocoaPodsPackageManager._installAsync (/Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:85286)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async CocoaPodsPackageManager.installAsync (/Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:84649)
at async runAsync (/Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:109680)
at async /Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:109766 {
code: 'COMMAND_FAILED',
cause: Error: pod exited with non-zero code: 31
at ChildProcess.h (/Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:1073)
at Object.onceWrapper (events.js:422:26)
at ChildProcess.emit (events.js:315:20)
at maybeClose (internal/child_process.js:1048:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
...
at Object.spawnAsync as default
at CocoaPodsPackageManager._runAsync (/Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:86068)
at CocoaPodsPackageManager._installAsync (/Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:84933)
at CocoaPodsPackageManager.installAsync (/Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:84660)
at runAsync (/Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:109688)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async /Users/apurvajain/.npm/_npx/18304/lib/node_modules/pod-install/build/index.js:2:109766 {
pid: 18399,
output: [
'',
'\x1B[33m[!] The version of CocoaPods used to generate the lockfile (1.10.0) is higher than the version of the current executable (1.9.3). Incompatibility issues may arise.\x1B[0m\n'
],
stdout: '',
stderr: '\x1B[33m[!] The version of CocoaPods used to generate the lockfile (1.10.0) is higher than the version of the current executable (1.9.3). Incompatibility issues may arise.\x1B[0m\n',
status: 31,
signal: null
},
isPackageManagerError: true
}
Hi @appi2393 , please re-read the article , since i have updated that,
Thanks
see updated article on how to solve that,
Wow. thank you @handipriyono