Introduction & Quick Start

Welcome to HackerHaze's React Native Template! This is a minimal, yet highly functional template that leverages some of the best libraries in the React Native ecosystem.

It's designed to get you up in speed with a solid foundation for your mobile app development with the most important libraries of the ecossystem.

A great starting point for any enterprise-level solution that requires independence, granular control over native modules with RN CLI.

For the full documentation head out to Docs

npx react-native init YourProjectName --template hackerhaze-react-native-template

Libraries Used

We've included a number of libraries in this template to help you get started. Here's a breakdown of what's included:

Core Libraries

• [email protected]: The core library for building user interfaces.
• [email protected]: The framework for building native apps using React.

State Management

Synchronous State:

• @rematch/[email protected]: A Redux-based state management library that provides a lightweight and flexible way to write Redux code.

• @rematch/[email protected]: Plugin for using Immer to write reducers that manipulate state in an immutable way.

• @rematch/[email protected]: Plugin for automatically managing loading states for effects.

• @rematch/[email protected]: Plugin for saving and rehydrating rematch models using localStorage.

• @rematch/[email protected]: Plugin for creating optimized selectors.

• @rematch/[email protected]: Plugin for tracking when state is updated. OBS: Rematch also has support for 'effects', for simpler/granular async functions.

• [email protected]: A predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

• [email protected]: Official React bindings for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update data.

Async State:

• @tanstack/[email protected]: Powerful asynchronous state management for TS/JS, React and more.

Navigation

- [email protected]: A complete native navigation solution for React Native, with optional Redux support, Jest tests, and more. ATTENTION: We have moved away from RNN in favour of @react-navigation/native

• @react-navigation/[email protected] : The most standart and complete solution for Navigation in React-Native

UI and Styling

• [email protected]: A utility-first CSS framework for rapid UI development. Comimng soon: Upgrade to [email protected]
• [email protected]: Customizable Icons for React Native.

Form Management

• [email protected]: Performant, flexible and extensible forms with easy-to-use validation.

Cloud Services and Notifications

• [email protected], [email protected], [email protected]: Microsoft's App Center SDK, which provides a variety of cloud services for app development, including analytics, diagnostics, distribution, and push notifications.
• [email protected]: A cloud service that enables React Native developers to deploy mobile app updates directly to their users' devices.
• @react-native-firebase/[email protected]: The core module for React Native Firebase, it provides the base Firebase app instance and all core Firebase services.
• @react-native-firebase/[email protected]: A module that provides cloud messaging services, including the handling of push notifications for your React Native applications.

Testing and Linting

• jest: A delightful JavaScript Testing Framework.
• eslint: A tool for identifying and reporting on patterns in JavaScript.

Storage and Device Information

• @react-native-async-storage/async-storage: An asynchronous, unencrypted, persistent, key-value storage system for React Native.
• [email protected]: A library to get device information from within React Native.

User Interaction and Localization

• [email protected]: Provides native-driven gesture management APIs for building best possible touch-based experiences in React Native.
• [email protected]: Simple to use library to handle localization in your React Native applications.

Animation and SVG

• [email protected]: A more powerful alternative to the Animated library, designed to be declarative and more flexible.
• [email protected]: SVG library for React Native.
• [email protected]: A transformer that allows you to import SVGs in your React Native project the same way that you would in a Web application.

Debugging and Validation

• [email protected]: Logger middleware for Redux.
• [email protected]: A JavaScript schema builder for value parsing and validation.

Coming soon:

• reactotron-react-query: cli with debugging tools, logger and more with reactotron

Testing, Linting, Transpiling and Tooling

• [email protected]: A Babel plugin to add a new resolver for your modules when compiling your code using Babel. This plugin allows you to add new "root" directories that contain your modules.
• [email protected]: A tool for identifying and reporting on patterns in JavaScript.
• [email protected]: A delightful JavaScript Testing Framework.
• [email protected]: An opinionated code formatter.
• [email protected]: This package provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment.

We hope this template serves as a useful starting point for your React Native projects. Happy coding!