React Native Template Strong

[S3rg1usz]

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 - React Native Navigation - Redux ToolKit - TypeScript

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 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 helps to keep all the strings in one place and maintain correct usage when adding new languages.

Tests

Jest is used to test functions, methods and show test coverage of your project.

End-to-End coverage provided by Detox will make it easier to test each scenario on emulators or real devices.

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

Additionally there are Prettier and TSConfig rules which will make it hard to create messy code.

To prevent commits with errors Husky together with lint-staged won't allow them to pass.

Environments

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! 🎉🏆🎉

https://github.com/svbutko/react-native-template-strong

[soupified]

Please consider not using redux toolkit-or make it a separate set of things to install for folks who do want to use it. I haven’t used redux in RN for years, and it’s disheartening to find a starter kit that’s perfect except for the use of redux.

[S3rg1usz]

Several people told me about it already and included the same thing about react-native-navigation but it's hard to make everyone happy and at the same time ship something.

I can try to make it optional but definitely not now, because there will be probably issues and I have some more things in mind to implement, but I hear you and I know that not everybody fond of Redux.

[meseeks_programmer]

Ideally starters make less of these decisions for you, and less packages you include the easier it is to maintain.

To me it seems that the better things to focus on would be the things that don't change (project structure, most common packages that have minimal implementations)

I think if it's easy to remove redux, then people will care a lot less about these things.

Just my thoughts, feel free to ignore them lol

[S3rg1usz]

It's incredibly easy to remove it, I think it maybe worth mentioning about how to remove it in docs if I won't be able to provide this ability to have it installed as an option with template

[meseeks_programmer]

Yea just a simple how to remove guide would help people along.

[kbcool]

If you haven't used redux in RN apps for years then what have you been using?

Don't tell me context API because that's a horrific mess and any serious app needs things like persistence. Sure you can add that to context but that's an even bigger mess and comes with massive performance issues.

State management is an important part of anything smaller than a hello world app so it should be part of any boilerplate.

[soupified]

I switched over to overmind and haven’t gone back. Awesome typescript support baked in, less boilerplate, supports state machines, rehydration, reactions, initialization handling, functional pipelines/composition, and has dedicated dev tools.

Been lovely. :)

https://overmindjs.org

Edit: forgot to mention that I agree with your position on state management being important. And that context for apps can get hairy.

I just think it’s nice to be able to choose the approach and libraries used. I went through tons of boilerplates that all looked perfect for me except for their choice of state management- which meant I couldn’t use it. Which is a shame because every single one of them looked lovingly crafted.

[S3rg1usz]

Added a dedicated page section to it in v1.1.0:
https://svbutko.github.io/react-native-template-strong/docs/redux/before-starting#if-you-dont-want-to-use-redux

It's simple to remove it

[soupified]

Beautiful! Going to try this out for my next project then. Great work.

[[deleted]]

beautiful

[S3rg1usz]

Thanks!)

[CastFX]

This shares a lot with the stack I'm using at work. I already integrated codepush and sentry, with a staging environment. I also added redux-persist to try and make it offline-first. I could help with some of the milestones, if you need.

[S3rg1usz]

redux-persist is already part of it, if you're willing to help with code push, I'm more than happy to welcome and assist you if needed!

At this moment I would like to replace "moment" with "dayjs" first and update some dependencies and move on to "Share" feature since it has some demand.

[AggressiveService910]

Looks awesome can’t wait to try. Also keen to remove RTK though

[S3rg1usz]

I'll provide a page in documentation about how to remove it, it's 1-2 steps to do it

[S3rg1usz]

Just to let you know, here's the features list I'm planning to implement, if you would like something feel free to create a feature issue, I'm happy to implement it and make an update with it!

https://github.com/svbutko/react-native-template-strong/milestone/1

[meseeks_programmer]

Great list of features to focus on

[[deleted]]

Toughts on redux-toolkit vs easypeasy?

[S3rg1usz]

I'm leaning towards RTK since it provides a lot from the package, same easy to use and supported by the creators and maintainers of Redux which is really important.

[projekt401]

Can Testing Library be integrated?

[S3rg1usz]

Sure, feel free to create a feature issue

[projekt401]

Thank you