Our Recommended Template for React Native Projects

Our Recommended Template for React Native Projects

react-native-template Our Recommended template for React Native projects.

react-native-template

react-native-template

Our Recommended template for React Native projects.

Report Bug ยท Request Feature

number of contributors. License.

Quickstart

To get started with our template, run one of the following commands:

# using npx, install our latest version from npm
npx react-native init MyApp [email protected]/react-native-template

# using npx and the github repo directly
npx react-native init MyApp --template=https://github.com/echobind/react-native-template

# using yarn & the react-native cli
yarn global add react-native-cli
react-native init MyApp --template=https://github.com/echobind/react-native-template

If you see an error after installing using the first option, pass the flag --ignore-existing and run:

npx --ignore-existing react-native init MyApp [email protected]/react-native-template

About The Project

Here at Echobind, we value developer productivity. After having built lots of React Native projects, we decided to put together our own template to speed up development. Our template includes the following:

๐Ÿ† Dev Productivity:

  • Hygen templates to easily generate components, screens, and utils with tests and stories.
  • vscode settings for common overrides ( ๐ŸŽจ Colors, formatOnSave and rulers width that matches prettier)
  • default Fastlane scripts for icon generation
  • global styles and colors
  • react-navigation preconfigured with a common setup
  • Pre-configured scripts in package.json to start the app & deal with simulators
  • Setup lint-staged to run eslint checks on precommit
  • Setup the app for TypeScript

We hope it saves you as much time as it saves us! ๐Ÿ‘

Built With

Getting Started

Prerequisites

While not required, we recommend using a version manager for Ruby and Node. Some popular version managers are:

** Ruby **

** Node **

Follow the install docs for the version manager of your choice.

During the setup proceess, we will automatically check the versions on your machine and prompt you to install anything you're missing.

Usage

In order to use this template, follow these steps:

  1. Initialize a new react-native app: npx react-native init MyApp --template=https://github.com/echobind/react-native-template
  2. Change directories into your new app: cd MyApp
  3. Run the setup script: node ./setup. A successful setup will give you the green light: โœ… Setup completed!

During the setup process we will do the following:

  • Setup a display name for your app
  • Setup a bundle identifier (ex: com.myapp.mobile)
  • Use Solidarity to ensure your environment has all expected dependencies installed
  • Run bundle install and pod install so you don't have to
  • Setup placeholder icon and a splash screen
  • Setup the first integration test which can be run with the scripts from your package.json with yarn e2e:ios-debug or yarn e2e:android-debug (android emulator must be setup and open)

Troubleshooting

If you get an error with an iOS Release build for ios/Pods/OpenSSL-Universal/ios/lib/libcrypto.a(cryptlib.o) You should be able to resolve by updating the build settings image

Template Preview

on an iPhone 12:

iphone12 splash screen preview

CI / Deployment:

In order to set up CI/Deployment, we've created custom hygen templates to save you time. These live in our hygen-templates-echobind repository. You'll find installation instructions, which will allow you to set up the following:

  • CircleCI preconfigured for React Native. Fast build times!
  • Fastlane lanes for alpha, beta, and production releases. These should be run on CI only!
  • AppCenter integration for easy alpha distribution

After installing those, head into the "Setup CircleCI" docs in ./docs/circle-ci.md, which will walk you through the installation.

For more info, please follow the instructions in the hygen-templates-echobind repo.

Docs

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

Publish New Release

This template is available on npm at @echobind/react-native-template. In order to publish a new release, please follow this process:

Prerequisites

  1. You must be an Echobind employee
  2. You must have an npm registry account
  3. You must be a member of the @echobind organization on npm

Create a New Release

This is handled by semantic-release and CircleCI. When a commit is merged into master, it analyzes it, then runs a new release based on the type of commit (i.e fix is a patch whereas feat is considered a minor or feature relase).

Acknowledgements

We'd like to thank the internal team for making this template, and the following organizations:

Download Details:

Author: echobind

Source Code: https://github.com/echobind/react-native-template

react-native react mobile-apps

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React Native App Developers India, React Native App Development Company

Hire React Native app developers India from a preferred React Native app development company by innovative industry leaders. Let's Discuss Your Project.

React Native Mobile App Development

Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.

How React Native Is Shaping Mobile App Development

Are you a mobile app developer looking for more efficient tools for your projects? Mobile app development is getting tougher and tougher as the market continues to grow. As a developer, you need to develop Apps which meet the demands of your users. To achieve this, adopt the right tools, like the React Native development framework.

Top React Native Mobile App Development Companies in USA

Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.