Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/victorkvarghese/react-native-boilerplate

🚀 Type Based Architecture for developing React Native Apps using react, redux, sagas and hooks with auth flow
https://github.com/victorkvarghese/react-native-boilerplate

react react-native react-native-app react-native-boilerplate react-navigation react-navigation-redux react-redux react-redux-boilerplate redux redux-persist redux-saga

Last synced: 6 days ago
JSON representation

🚀 Type Based Architecture for developing React Native Apps using react, redux, sagas and hooks with auth flow

Host: GitHub
URL: https://github.com/victorkvarghese/react-native-boilerplate
Owner: victorkvarghese
License: mit
Created: 2018-05-19T05:05:43.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2023-03-04T05:42:03.000Z (almost 2 years ago)
Last Synced: 2024-12-18T13:03:18.858Z (13 days ago)
Topics: react, react-native, react-native-app, react-native-boilerplate, react-navigation, react-navigation-redux, react-redux, react-redux-boilerplate, redux, redux-persist, redux-saga
Language: TypeScript
Homepage:
Size: 1010 KB
Stars: 608
Watchers: 22
Forks: 206
Open Issues: 13
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # 🚀 React Native Boilerplate - March 2022

[![React Native](https://img.shields.io/badge/React%20Native-v0.67.3-green.svg)](https://facebook.github.io/react-native/)

[![React Navigation V5](https://img.shields.io/badge/React%20Navigation-v5.9-blue.svg)](https://reactnavigation.org/)

React Native Boilerplate is a starting point for React Native application. This project is configured with redux, redux saga

and redux persist. Uses latest version of react-navigation (v6.0)





 







# UPDATE

If you want something simple, un opinionated and scalable with no boilerplate: 

[React-Native-Query-Zusatnd-BoilerPlate](https://github.com/victorkvarghese/react-native-boilerplate-query-zustand)

## Scalability Factor

This Type based Architecture scales smoothly for small - medium apps. If you guys are building a very large application I would suggest using the following feature based architecture which will be more developer friendly with ease of scaling.

[React-Native-Feature-BoilerPlate](https://github.com/victorkvarghese/react-native-feature-boilerplate)

## Projects using this BoilerPlate

- [MediBuddy](https://github.com/victorkvarghese/MediBuddy)

- [react-native-messenger](https://github.com/victorkvarghese/react-native-messenger)

- [rn-coffee](https://github.com/victorkvarghese/rn-coffee)

## Features

- [Typescript](https://www.typescriptlang.org/) support.

- [React Hooks](https://reactjs.org/docs/hooks-intro.html)

- [React Navigation](https://reactnavigation.org/) with [Authentication flow](https://reactnavigation.org/docs/auth-flow) baked in & theming support.

- [React Native Gesture Handler](https://github.com/kmagiera/react-native-gesture-handler)

- [React Native Paper](https://callstack.github.io/react-native-paper/)- with theming support 

- [React Native Vector Icons](https://github.com/oblador/react-native-vector-icons)

- [Redux](http://redux.js.org/) with [hooks](https://react-redux.js.org/api/hooks) support

- [Redux Saga](https://redux-saga.js.org/)

- [Redux Persist](https://github.com/rt2zz/redux-persist/)

- [Jest](https://facebook.github.io/jest/)

- [Eslint](http://eslint.org/) ([Airbnb config](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb))

## How this looks

  

  

## Prerequisites

- [Node](https://nodejs.org) v10 (it is recommended to install it via [NVM](https://github.com/creationix/nvm))

- [Yarn](https://yarnpkg.com/)

- A development machine set up for React Native by following [these instructions](https://facebook.github.io/react-native/docs/getting-started.html)

## Getting Started

1. Clone this repo, `git clone https://github.com/victorkvarghese/react-native-boilerplate.git `

2. Go to project's root directory, `cd `

3. Remove `.git` folder, `rm -rf .git`

4. Use [React Native Rename](https://github.com/junedomingo/react-native-rename) to update project name `$ npx react-native-rename `

5. Run `yarn` to install dependencies

6. Start the packager with `yarn start`

7. Connect a mobile device to your development machine

8. Run the test application:

- On Android:

  - Run `react-native run-android` or Use Android Studio (Recommended)

- On iOS:

  - Open `ios/YourReactProject.xcworkspace` in Xcode

  - Hit `Run` after selecting the desired device

9. Enjoy!!!

## Contributing

PRs are welcome