React Native Template Strong
Tags: reactnative, productivity, typescript, redux
Published: 2021-10-12 10:43:21

# Idea
The primary idea is to have everything set up for quick start with components, modules and other stuff which many templates can't offer.

# Core
The core of this template is build around next dependencies:
- [React Native](https://reactnative.dev)
- [React Native Navigation](https://wix.github.io/react-native-navigation/docs/before-you-start/)
- [Redux ToolKit](https://redux-toolkit.js.org)
- [TypeScript](https://www.typescriptlang.org)

# Documentation
One of the main differences between this and any other template is that it offers a documentation to each of its component, helper, module, etc.

# Structure
It offers more than just a simple template project it offers a guidance towards project, module, component creation.

From the component to publishing an app, it covers each aspect of development.

# Performance
From the beginning it includes Hermes on both platforms, proguard is enabled, consoles are being removed and many other enhancements are used to provide the best performance.

# Native-look-alike focus
By using [React Native Navigation](https://wix.github.io/react-native-navigation/docs/before-you-start/) and providing SF Symbols usage on iOS and Material Icons on Android this template strives to make apps look as native ones as possible.

Native colors usage are also welcomed in this template and bring many useful helpers.

# Components
Set of created common components like buttons, text inputs, radio buttons, date and image pickers, permissions, toasts and more.

Different helpers to help in your day-to-day cases.

Hooks which are found useful throughout the development process.

# Localization

Localization is provided by [react-native-localization](https://github.com/stefalda/ReactNativeLocalization) helps to keep all the strings in one place and maintain correct usage when adding new languages.

# Tests
[Jest](https://jestjs.io) is used to test functions, methods and show test coverage of your project.

End-to-End coverage provided by [Detox](https://github.com/wix/Detox) will make it easier to test each scenario on emulators or real devices.

[Storybook](https://storybook.js.org) can help to see what each component is capable of and show its properties and different edge cases. Or even contain whole screens.

So it brings best of both TDD (Test Driven Development) and CDD (Component Driven Development).

# Code quality
ESLint with strict set of rules and plugins provided by [eslint-config-strong](https://github.com/svbutko/eslint-config-react-strong). 

Additionally there are [Prettier](https://github.com/svbutko/eslint-config-react-strong/blob/master/configs/prettierrc.md) and [TSConfig](https://github.com/svbutko/eslint-config-react-strong/blob/master/configs/tsconfig.md) rules which will make it hard to create messy code.

To prevent commits with errors [Husky](https://github.com/typicode/husky) together with [lint-staged](https://github.com/okonet/lint-staged) won't allow them to pass.

# Environments
[React Native Config](https://github.com/luggit/react-native-config) bring you the ability, for example, to have different environments which will make it easier to work with different API endpoints and test your application.

---

If you think that this template lacks something or would like to add something, feel free to do so by creating issues or participate in discussions.

There are still many things which I'd like to add, check the roadmap and issues to see where it's heading.

This and many more other things you can find in repository's documentation.

I hope you will find it useful and you will use it in your next project! 🎉🏆🎉

{% github svbutko/react-native-template-strong no-readme %}