TheCodingMachine React Native Boilerplate

repository·main·Indexed 26 days ago

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

A lightweight, scalable React Native boilerplate designed to separate UI from business logic. It features a pre-configured stack including TanStack Query for data fetching, React Native MMKV for high-performance storage, React Navigation for routing, and react-i18next for internationalization. The project supports both JavaScript and TypeScript, utilizes Atomic Design for component organization, and includes a built-in multi-theming system managed via a central configuration file.

Tokens: 17.4K
Snippets: 46
Records: 123
Agent score: 90%

What's inside @thecodingmachine/react-native-boilerplate

Overview of React Native Boilerplate features
main
The React Native Boilerplate is a lightweight, scalable template designed for mobile app development with a focus on simplicity and separation of concerns. Key features include:
- Language Choice: Support for both JavaScript and TypeScript.
- Navigation: Pre-configured with React Navigation.
- Data Fetching: Powered by TanStackQuery and Ky for HTTP requests.
- Internationalization: Multilingual support via React i18next.
- Theming: Built-in multi-theming system without extra dependencies.
- Storage: Secure and efficient key-value storage using React Native MMKV.
- Environment Management: Tools for handling environment variables are pre-installed.
https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/01-Getting%20Started.mdx
Data fetching and storage in version 4.0.0+
main
The boilerplate has moved away from Redux to provide a more lightweight and less opinionated stack. For version 4.0.0 and later, the following libraries are used:
- Data Fetching: React Query is used for managing asynchronous data and server state.
- Data Storage: React Native MMKV is used for high-performance, secure, and synchronous local data storage.
https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/blog/2023-11-30-React-Native-Boilerplate-4.0.0.md
Understand the ThemeProvider role
main
The ThemeProvider is the core component that enables the useTheme hook. It manages the generation of all application styles, stores the current theme variant, and provides the mechanism to switch themes globally across the entire application using the React context pattern.
https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/04-Theming/01-Using.md
Understand the boilerplate folder structure
main
The project is organized into several top-level directories within src/ to ensure separation of concerns:
- src/components: Presentational components organized using Atomic Design.
- src/hooks: Custom React hooks.
- src/navigation: Navigation components and navigator definitions.
- src/screens: Components representing full app screens.
- src/services: Data fetching logic and related services.
- src/theme: Application theme configuration.
- src/translations: Language support and localization configuration.
https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/03-Project%20Structure.md
Understand the navigation structure
main
The boilerplate uses React Navigation for all app navigation. All navigation-related configurations and navigators are located in the src/navigation directory. The project follows default React Navigation options without custom overrides to ensure compatibility with future updates.
https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/01-Navigate.md
Manage environment variables using .env files
main
The boilerplate comes pre-configured with dotenv and babel-plugin-inline-dotenv to allow easy management of environment variables.
1. Define your variables in the .env file at the root of your project using the KEY=VALUE format.
2. Access these variables directly in your JavaScript or TypeScript code via process.env.KEY.
```
API_URL=https://myapi.com
```
```
process.env.API_URL
```
https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/05-Environment.md
Use the SafeScreen component
main
The SafeScreen component is a template helper that provides a SafeAreaView, manages the StatusBar, and implements a fallback UI (using the DefaultError component) when an error occurs. It is designed to wrap screen content and handle error states gracefully using an error boundary system.
To use it, pass an isError boolean to trigger the fallback UI and an onResetError function to allow the user to attempt to recover from the error (e.g., by refetching data).
```
import { useI18n, useUser } from '@/hooks';
import { SafeScreen } from '@/components/templates';

function Example() {
  const { useFetchOneQuery } = useUser();
  const fetchOneUserQuery = useFetchOneQuery(1);

  return (
    <SafeScreen
      isError={fetchOneUserQuery.isError} // boolean value to determine whether an error occurred or not
      onResetError={fetchOneUserQuery.refetch} // function to reset the error state and re-execute the query
    >
      // your content here
    </SafeScreen>
  );
}
```
https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/08%20-%20Components/06%20-%20SafeScreen.md
Access generated border styles via useTheme
main
The boilerplate provides generated border styles based on your BordersConfig. You can access these styles in your components using the useTheme hook. This allows you to apply consistent border widths, radii, and colors using predefined keys.
```
const { borders } = useTheme()
```
https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/04-Theming/03-Generated%20styles/04-Borders.mdx
Use the ErrorBoundary component
main
The ErrorBoundary component is a helper organism used to catch JavaScript errors within a component tree and display a fallback UI. This prevents the entire application from crashing and allows you to show a user-friendly error state.
Wrap your component tree with <ErrorBoundary> and provide a fallback prop containing the UI to display when an error is caught.
```
import { ErrorBoundary } from "@/components/atoms";

<ErrorBoundary fallback={<div>Something went wrong</div>}>
  <ExampleApplication />
</ErrorBoundary>
```
https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/08%20-%20Components/05%20-%20ErrorBoundary.md
Access generated background styles via useTheme
main
To apply background colors to your components using the theme configuration, use the useTheme hook to extract the backgrounds object. This object contains both dynamically generated styles from your BackgroundConfig and any styles defined in staticBackgroundStyles.
https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/04-Theming/03-Generated%20styles/03-Backgrounds.mdx
Define navigation types for TypeScript
main
To ensure type safety and enable autocompletion for navigation parameters, you should define your navigation types in the @/navigation/types.ts file. This follows the standard TypeScript patterns recommended by React Navigation.
https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/01-Navigate.md
Install Fastlane on macOS
main
To automate beta deployments for iOS and Android, you must install Fastlane on a Mac. This requires Xcode command line tools, Ruby, and RubyGems.
Follow these steps in order:
1. Install Xcode command line tools.
2. Install Ruby using Homebrew.
3. Install Fastlane using RubyGems.
```
$ xcode-select --install
$ brew install ruby
$ sudo gem install fastlane -NV
```
https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/06-BetaBuild.md