### Start Local Development Server

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/README.md

This command starts a local development server for the Docusaurus website. It opens a browser window and provides live reloading for most changes made to the project files.

```bash
yarn start
```

--------------------------------

### Initializing Project with React Native CLI

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/02-Installation.md

This command initializes a new React Native project named 'MyApp' using the specified boilerplate template. It leverages the React Native CLI to set up the project structure and dependencies.

```bash
npx @react-native-community/cli@latest init MyApp --template @thecodingmachine/react-native-boilerplate
```

--------------------------------

### Install Dependencies with Yarn

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/README.md

This command installs all the necessary dependencies for the Docusaurus project using Yarn. It reads the `package.json` file and downloads the required packages.

```bash
yarn
```

--------------------------------

### Initializing React Native Project with Boilerplate

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/blog/2020-04-19-React-Native-Boilerplate-3.0.0.md

These commands initialize a new React Native project using the specified boilerplate template, start the development server, and run the application on iOS and Android platforms. It leverages react-native-cli and custom templates for easy setup.

```Shell
npx react-native init --template @thecodingmachine/react-native-boilerplate
yarn start
yarn ios
yarn android
```

--------------------------------

### Install Fastlane with RubyGems

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/06-BetaBuild.md

This command installs Fastlane using RubyGems, the package manager for Ruby. The `-NV` flags disable documentation generation and verbose output during installation.

```Shell
$ sudo gem install fastlane -NV
```

--------------------------------

### Build Static Website Content

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/README.md

This command generates static content for the Docusaurus website and places it into the `build` directory. This content can then be served using any static content hosting service.

```bash
yarn build
```

--------------------------------

### Install Ruby using Homebrew

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/06-BetaBuild.md

This command installs Ruby using Homebrew, a package manager for macOS. Ruby is a dependency for Fastlane.

```Shell
$ brew install ruby
```

--------------------------------

### Install Xcode command line tools

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/06-BetaBuild.md

This command installs the latest Xcode command line tools, which are required for Fastlane to function correctly.

```Shell
$ xcode-select --install
```

--------------------------------

### Starting Metro Bundler

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/README.md

This command starts the Metro bundler, which is a JavaScript bundler that transforms and bundles the application's code for use on a mobile device or simulator. It needs to be run in a dedicated terminal.

```JavaScript
yarn start
```

--------------------------------

### Automate Certificate and Provisioning Profile Generation

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/06-BetaBuild.md

This Fastlane snippet automates the process of generating certificates and provisioning profiles for iOS code signing. It retrieves or creates certificates and provisioning profiles, installs them, and updates the project settings in Xcode.

```ruby
get_certificates( # Create or get certificate, and install it
  output_path: "./builds" # Download certificate in the build folder (you don't need to create the folder)
)
get_provisioning_profile( # Create or get provisioning profile
  output_path: "./builds",  # Download provisioning profile in the build folder
  filename: "provisioning.mobileprovision" # Rename the local provisioning profile
)
update_project_provisioning( # Set the project provisioning profile (related in Xcode to the General > Signing Release section)
  xcodeproj: "Boilerplate.xcodeproj",
  target_filter: "Boilerplate", # Name of your project
  profile: "./builds/provisioning.mobileprovision",
  build_configuration: "Release"
)
update_project_team( # Set the right team on your project
  teamid: CredentialsManager::AppfileConfig.try_fetch_value(:team_id)
)
```

--------------------------------

### Creating a Service to Fetch Application Settings (TS)

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/02-Data Fetching.md

This code snippet shows how to create a service function that fetches application settings from an API endpoint using a pre-configured HTTP client instance. The function uses the `instance.get` method to make a GET request to the `/settings` endpoint and returns a promise that resolves with the response data.

```ts
import { instance } from '@/services/instance';

export default async () => instance.get(`/settings`);
```

--------------------------------

### ErrorBoundary Usage Example

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/08 - Components/05 - ErrorBoundary.md

Demonstrates how to use the ErrorBoundary component to wrap a component and provide a fallback UI in case of errors. It imports the ErrorBoundary component and renders it with a fallback prop and a child component.

```jsx
import { ErrorBoundary } from "@/components/atoms";

<ErrorBoundary fallback={<div>Something went wrong</div>}>
  <ExampleApplication />
</ErrorBoundary>
```

--------------------------------

### Using Skeleton Component with React Query

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/08 - Components/03 - Skeleton.md

This example demonstrates how to use the Skeleton component with a React Query hook to display a loading animation while fetching data. The Skeleton component takes a loading prop that determines whether to show the loading animation or the actual content. The component also accepts children, which are the content to be displayed when loading is false.

```jsx
import { AssetByVariant, IconByVariant, Skeleton } from '@/components/atoms';

function Example() {
  const fetchOneUserQuery = useFetchOneQuery(currentId); // fetchOneUserQuery is a react-query query

  return (
    <Skeleton
      loading={fetchOneUserQuery.isLoading}
    >
      <Text>{user.name}</Text>
    </Skeleton>
  );
}

export default Example;
```

--------------------------------

### Using SafeScreen Component with Error Handling in React Native

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/08 - Components/06 - SafeScreen.md

This example demonstrates how to use the SafeScreen component to wrap content and handle errors from a data fetching query. It uses the isError prop to determine if an error occurred and the onResetError prop to refetch the data and reset the error state.

```JSX
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 if true the fallback UI will be displayed
      onResetError={fetchOneUserQuery.refetch} // function to reset the error state and re-execute the query
    >
      // your content here
    </SafeScreen>
  );
}
```

--------------------------------

### Changing Theme Variant with useTheme Hook in React Native

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/04-Theming/01-Using.md

This code snippet illustrates how to change the current theme variant using the `useTheme` hook in a React Native component. It imports the `useTheme` hook and retrieves the `changeTheme` function. The `changeTheme` function is then called with the desired theme variant ('dark' in this example) when the button is pressed.

```tsx
import { useTheme } from '@/theme';

const Example = () => {
    const { changeTheme } = useTheme();
    
    return (
        <Button
            title="Change theme"
            onPress={() => changeTheme('dark')}
        />
    )
}
```

--------------------------------

### Running Fastlane Beta Lane

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/06-BetaBuild.md

These commands navigate to the Android project directory and execute the Fastlane beta lane, triggering the beta build and upload process.

```bash
$ cd my-project/android
$ fastlane beta
```

--------------------------------

### Initializing Fastlane in iOS Project

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/06-BetaBuild.md

This command initializes Fastlane in the iOS project directory. It sets up the basic Fastlane configuration files.

```Shell
$ cd my-project/ios
$ fastlane init
```

--------------------------------

### Initializing Fastlane in Android Project

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/06-BetaBuild.md

This command initializes Fastlane in the Android project directory. It automates project detection and prompts for necessary information such as package name and path to the JSON secret file.

```bash
$ cd my-project/android
$ fastlane init
```

--------------------------------

### Create a Beta Build using Fastlane

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/06-BetaBuild.md

This shell command navigates to the iOS directory of the project and then executes the `fastlane beta` command to create and upload a beta build to TestFlight.

```shell
$ cd my-project/ios
$ fastlane beta
```

--------------------------------

### Initializing Project with React Native CLI

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/README.md

This command initializes a new React Native project named 'MyApp' using TheCodingMachine's React Native boilerplate. It leverages the React Native CLI to set up the project structure and dependencies.

```JavaScript
npx @react-native-community/cli@latest init MyApp --template @thecodingmachine/react-native-boilerplate
```

--------------------------------

### Integrating the fetchSettings Service into the Startup Screen (TSX)

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/02-Data Fetching.md

This code snippet demonstrates how to integrate the `fetchSettings` service into the `Startup` screen using the `useQuery` hook. It imports the `fetchSettings` function and passes it as the `queryFn` option to `useQuery`. This allows the `Startup` screen to fetch application settings when the component mounts, ensuring that the application is configured before the user interacts with it.

```tsx
import { useQuery } from '@tanstack/react-query';
import fetchSettings from '@/folder/fetchSettings';

const Startup = ({ navigation }: ApplicationScreenProps) => {
    const { layout, gutters, fonts } = useTheme();
    const { t } = useTranslation(['startup']);

    const { isSuccess, isFetching, isError } = useQuery({
        queryKey: ['startup'],
        queryFn: fetchSettings,
    });

    useEffect(() => {
        navigation.reset({
            index: 0,
            routes: [{ name: 'Main' }],
        });
    }, [isSuccess]);

    return (
        //...
    );
};
```

--------------------------------

### Generating a Signing Key with keytool

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/06-BetaBuild.md

This command generates a signing key for the Android application using the keytool utility. It prompts for passwords and Distinguished Name fields, creating a keystore file named `my-release-key.keystore`.

```bash
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
```

--------------------------------

### Fastlane Generated Files

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/06-BetaBuild.md

Shows the directory structure and files generated by Fastlane after initialization. These files include Appfile and Fastfile, which are essential for configuring and running Fastlane actions.

```None
 - fastlane/
   - Appfile
   - Fastfile
```

--------------------------------

### Fastlane Beta Lane Configuration

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/06-BetaBuild.md

This Ruby code defines a Fastlane lane for submitting a new beta build to the Play Store. It prompts for signing store and alias key passwords, cleans the project, assembles the release build with injected signing configurations, and uploads it to the internal test track.

```ruby
  desc "Submit a new Beta Build to Play Store"
  lane :beta do
    store_password = prompt(text: "Signing Store Password: ", secure_text: true)
    key_password = prompt(text: "Alias Key Password: ", secure_text: true)
    releaseFilePath = File.join(Dir.pwd, "..", "my-release-key.keystore")
    gradle(task: 'clean')
    gradle(
      task: 'assemble',
      build_type: 'Release',
      print_command: false,
      properties: {
        "android.injected.signing.store.file" => releaseFilePath,
        "android.injected.signing.store.password" => store_password,
        "android.injected.signing.key.alias" => "my-key-alias",
        "android.injected.signing.key.password" => key_password,
      }
    )
    upload_to_play_store(
      track: 'internal'
    )

```

--------------------------------

### Fetching Data with useQuery Hook in Startup Screen (TSX)

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/02-Data Fetching.md

This code snippet demonstrates how to use the `useQuery` hook from TanStack Query to fetch data within the `Startup` screen. It defines a query with a unique key and a function that returns a promise. The `isSuccess`, `isFetching`, and `isError` properties are used to manage the application flow based on the query's state.

```tsx
import { useQuery } from '@tanstack/react-query';

const Startup = ({ navigation }: ApplicationScreenProps) => {
    const { layout, gutters, fonts } = useTheme();
    const { t } = useTranslation();

    const { isSuccess, isFetching, isError } = useQuery({
        queryKey: ['startup'],
        queryFn: () => {
            // Fetch data here
            return Promise.resolve(true);
        },
    });

    useEffect(() => {
        navigation.reset({
            index: 0,
            routes: [{ name: 'Main' }],
        });
    }, [isSuccess]);

    return (
        //...
    );
};
```

--------------------------------

### Configure Provisioning Profile for Build Step

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/06-BetaBuild.md

This Fastlane snippet configures the provisioning profile for the build step within the `build_app` function. It sets the `clean`, `export_method`, `export_options`, `build_path`, and `output_directory` parameters to ensure the app is built with the correct provisioning profile for App Store submission.

```ruby
clean: true,
export_method: "app-store",
export_options: {
  provisioningProfiles: {
      CredentialsManager::AppfileConfig.try_fetch_value(:app_identifier) => CredentialsManager::AppfileConfig.try_fetch_value(:app_identifier) + " AppStore" # Value of this parameter is the name of the Provisioning Profile. By default, it will be "{bundleId} AppStore"
  }
},
build_path: "./builds",
output_directory: "./builds"
```

--------------------------------

### Fixing permission denied error for Android beta lane

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/06-BetaBuild.md

This command grants execute permissions to the gradlew file, resolving the 'Permission denied' error during Android beta builds. This ensures that the Gradle wrapper can be executed.

```Shell
$ chmod a+x /my-project/android/gradlew
```

--------------------------------

### Changing file ownership after using sudo with Fastlane

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/06-BetaBuild.md

After running Fastlane commands with sudo, this command changes the ownership of the generated files back to the current user. Replace <your-user> with the actual username and <files> with the list of files or directories.

```Shell
$ sudo chown <your-user> <files>
```

--------------------------------

### Configuring Reactotron with Plugins in TypeScript

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/07-Debugging.md

This code snippet demonstrates how to configure Reactotron in a React Native application using TypeScript. It includes setting the app name, using mmkvPlugin for storage inspection, and reactotronReactQuery for React Query integration. The configuration also includes a disconnect handler to unsubscribe the query client manager.

```typescript
import Reactotron from 'reactotron-react-native';
import mmkvPlugin from 'reactotron-react-native-mmkv';
import {
  QueryClientManager,
  reactotronReactQuery,
} from 'reactotron-react-query';

import { storage, queryClient } from './src/App';
import config from './app.json';

const queryClientManager = new QueryClientManager({
  queryClient,
});

// highlight-next-line
// You can change the storage configuration here
Reactotron.configure({
  name: config.name,
  onDisconnect: () => {
    queryClientManager.unsubscribe();
  },
})
  .useReactNative()
  // highlight-next-line
  .use(mmkvPlugin({ storage })) // We use the mmkv plugin to store the Reactotron state
  // highlight-next-line
  .use(reactotronReactQuery(queryClientManager)) // We use the react-query plugin to store the Reactotron state
  .connect();
```

--------------------------------

### Running Platform Application

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/README.md

This command runs the React Native application on a specific platform (e.g., iOS or Android). Replace `<platform>` with the target platform (e.g., `ios` or `android`). A simulator or connected device is required.

```JavaScript
yarn <platform>
```

--------------------------------

### Using IconByVariant Component

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/08 - Components/02 - IconByVariant.md

This code snippet demonstrates how to use the IconByVariant component to render an icon based on the current variant. It imports the component and passes the path prop to specify the icon to be displayed. The component will try to find the icon in the theme/assets/icons/<variant> folder, falling back to the default asset located in theme/assets/icons folder.

```JSX
import { IconByVariant } from '@/components/atoms';

function Example() {
  return (
    <IconByVariant
      path={'language'} // try to find an icon named `language` for the current variant in the `theme/assets/icons/<variant>` folder, fallback to the default asset located in `theme/assets/icons` folder
    />
  );
}

```

--------------------------------

### Initializing MMKV Storage in React Native

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/06-Storage.md

This code snippet shows how to initialize MMKV storage in a React Native application. It imports the MMKV class from the react-native-mmkv library and creates a new instance of it. The storage configuration can be changed here.

```typescript
import { MMKV } from 'react-native-mmkv';

export const storage = new MMKV(
    // highlight-next-line
    // You can change the storage configuration here
);
```

--------------------------------

### Defining a Fetch Operation with Redux Toolkit Wrapper

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/blog/2020-04-19-React-Native-Boilerplate-3.0.0.md

This code defines a fetch operation using the Redux Toolkit Wrapper. It imports necessary functions from the wrapper and a service for fetching user data. It then defines the initial state, actions, and reducers for the fetch operation, configuring error and loading state management.

```javascript
import {
  buildAsyncState, buildAsyncReducers, buildAsyncActions,
} from '@thecodingmachine/redux-toolkit-wrapper'
import fetchOneUserService from '@/Services/User/FetchOne'

export default {
  initialState: buildAsyncState('fetchOne'),
  action: buildAsyncActions('user/fetchOne', fetchOneUserService),
  reducers: buildAsyncReducers({
    errorKey: 'fetchOne.error',
    loadingKey: 'fetchOne.loading',
  }),
}
```

--------------------------------

### Creating a Redux Slice with Fetch Operation

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/blog/2020-04-19-React-Native-Boilerplate-3.0.0.md

This code creates a Redux slice using the `buildSlice` function. It defines the initial state for the slice, which includes an empty item object. It then integrates the `FetchOne` operation into the slice, combining its reducers with the slice's reducers.

```javascript
const sliceInitialState = {
  item: {},
}

export default buildSlice('user', [FetchOne], sliceInitialState).reducer
```

--------------------------------

### Disallow all robots

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/static/robots.txt

This robots.txt configuration disallows all user agents from accessing any part of the site. This is achieved by setting the 'Disallow' directive without specifying any paths, effectively blocking all URLs.

```txt
User-agent: *
Disallow:
```

--------------------------------

### Accessing Theme Styles with useTheme Hook in React Native

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/04-Theming/01-Using.md

This code snippet demonstrates how to access theme styles, such as colors, layout, fonts, and gutters, using the `useTheme` hook in a React Native component. It imports the `useTheme` hook from the '@/theme' module and destructures the desired style properties. The styles are then applied to the View and Text components.

```tsx
import { useTheme } from '@/theme';

const Example = () => {
    const {
      //highlight-start
      colors,
      variant,
      layout,
      gutters,
      fonts,
      backgrounds,
      borders,
      navigationTheme,
      components,
      //highlight-end
    } = useTheme();
    
    return (
        <View
            style={[
                //highlight-start
                layout.itemsCenter,
                layout.justifyCenter,
                //highlight-end
            ]}
        >
            <Brand />
            {isError && (
                <Text style={[
                    //highlight-start
                    gutters.marginTop_30, 
                    fonts.font_16, 
                    fonts.text_red_500
                    //highlight-end
                ]}>
                    An error occured
                </Text>
            )}
        </View>
    )
}
```

--------------------------------

### Generated Gutter Styles

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/04-Theming/03-Generated styles/01-Gutters.mdx

This JavaScript code snippet shows the structure of the generated styles for a given gutter value. The key is a combination of the gutter name (e.g., margin, padding) and the value, and the value is an object with the gutter name and value.

```javascript
{
    [gutter_name]: value
}
```

--------------------------------

### Accessing Gutters from Theme

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/04-Theming/03-Generated styles/01-Gutters.mdx

This code snippet demonstrates how to access the generated gutter styles using the `useTheme` hook in a React Native component. The `gutters` object contains the generated styles for margin and padding based on the theme configuration.

```javascript
const { gutters } = useTheme()
```

--------------------------------

### DefaultError Component Props Definition

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/08 - Components/04 - DefaultError.md

Describes the props interface for the DefaultError component.  It includes the onReset prop, which is a function required to reset the error state.

```JavaScript
/**
 * @param {() => void} onReset - The function to call when the reset button is pressed.
 */
```

--------------------------------

### Background Configuration in theme.config.ts

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/04-Theming/03-Generated styles/03-Backgrounds.mdx

This TypeScript code snippet shows the structure of the `backgrounds` configuration within the `theme.config.ts` file. It defines an object where keys represent color names and values represent the corresponding color values. This configuration drives the generation of background styles.

```typescript
export const config = {
    //...
    backgrounds: {
        [colorName]: colorValue,
        //...
    },
    //...
}
```

--------------------------------

### Theme Configuration in _config.ts (TypeScript)

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/blog/2023-11-30-React-Native-Boilerplate-4.0.0.md

This code defines the theme configuration using TypeScript, including base theme values and theme variants for a React Native application. It demonstrates how to define fonts and colors, and how to create variants like 'dark' and 'premium' with different color schemes.

```typescript
export const config = {
    //...
    fonts: {
        //...
        colors: {
            primary: 'blue',
        },
    },
    //...
    variants: {
        dark: {
            fonts: {
                colors: {
                    primary: 'darkblue',
                },
            },
        },
        premium: {
            fonts: {
                colors: {
                    primary: 'gold',
                },
            },
        }
    }
}
```

--------------------------------

### Gutters Configuration

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/04-Theming/03-Generated styles/01-Gutters.mdx

This TypeScript code snippet shows the structure of the `gutters` configuration within the theme. The `gutters` property is an array of numbers, which are used to generate margin and padding styles.

```typescript
export const config = {
    // ...
    gutters: [...value],
    // ...
}
```

--------------------------------

### Borders Configuration in theme.config.ts

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/04-Theming/03-Generated styles/04-Borders.mdx

This TypeScript code snippet shows the structure of the `borders` configuration within the theme's `config` object. It defines the `widths`, `radius`, and `colors` properties, which are used to generate the border styles. `widthsValues` and `radiusValues` are arrays of numbers, and `colorsValues` is an object with color keys and values.

```typescript
export const config = {
    //...
    borders: {
        widths: widthsValues,
        radius: radiusValues,
        colors: colorsValues,
    },
    //...
}
```

--------------------------------

### Retrieving Theme Variant from MMKV Storage

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/06-Storage.md

This code snippet shows how to retrieve a theme variant from MMKV storage using the getString method. It retrieves the value associated with the key 'theme'.

```typescript
// To retrieve the theme variant
storage.getString('theme');
```

--------------------------------

### Storing Theme Variant in MMKV Storage

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/06-Storage.md

This code snippet shows how to store a theme variant in MMKV storage using the set method. It stores the string 'default' with the key 'theme'.

```typescript
// To store the theme variant
storage.set('theme', 'default');
```

--------------------------------

### Accessing Borders Styles with useTheme

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/04-Theming/03-Generated styles/04-Borders.mdx

This code snippet demonstrates how to access the generated border styles using the `useTheme` hook in a React Native component. The `borders` object contains the generated styles for border widths, radius, and colors based on the theme configuration.

```javascript
const { borders } = useTheme()
```

--------------------------------

### Using AssetByVariant Component in React Native

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/08 - Components/01 - AssetByVariant.md

This code snippet demonstrates how to use the AssetByVariant component to display an image. The component will attempt to load the image 'tom' from a variant-specific folder (e.g., theme/assets/images/premiums/tom.png) and fall back to the default image (theme/assets/images/tom.png) if the variant-specific image is not found. The resizeMode and style props are passed to the underlying Image component.

```jsx
import { AssetByVariant } from '@/components/atoms';

function Example() {
  return (
    <AssetByVariant
      path={'tom'}
      resizeMode={'contain'}
      style={{ height: 300, width: 300 }}
    />
  );
}
```

--------------------------------

### Defining Environment Variables in .env

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/05-Environment.md

Shows how to define environment variables in the .env file. These variables can then be accessed in the JavaScript/TypeScript code.

```env
API_URL=https://myapi.com
```

--------------------------------

### Styling Circle Button Component using Theme - TypeScript

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/04-Theming/02-Configuration.md

This code snippet demonstrates how to style a circle Button component using the theme configuration in a React Native application. It leverages layout, backgrounds, and fonts defined in the theme to create a specific style object for the `buttonCircle` component. The style includes centering content, setting background color, font color, height, width, and border radius.

```typescript
export default ({ layout, backgrounds, fonts }: ComponentTheme) => {
  return {
    buttonCircle: {
      ...layout.justifyCenter,
      ...layout.itemsCenter,
      ...backgrounds.purple100,
      ...fonts.gray400,
      height: 70,
      width: 70,
      borderRadius: 35,
    },
  } as const satisfies Record<string, ImageStyle | TextStyle | ViewStyle>;
};
```

--------------------------------

### Accessing Background Styles with useTheme Hook

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/04-Theming/03-Generated styles/03-Backgrounds.mdx

This code snippet demonstrates how to access the generated background styles using the `useTheme` hook in a React Native component. The `backgrounds` object contains the generated styles based on the theme configuration.

```javascript
const { backgrounds } = useTheme()
```

--------------------------------

### Using Redux State in a React Native Container

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/blog/2020-04-19-React-Native-Boilerplate-3.0.0.md

This code demonstrates how to use the Redux state in a React Native container component. It uses `useDispatch` and `useSelector` hooks to access the dispatch function and the user data, loading state, and error state from the Redux store. It then renders the data or a loading indicator or error message based on the state.

```javascript
import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { View, ActivityIndicator, Text } from 'react-native'
import FetchOne from '@/Store/User/FetchOne'

const ExampleContainer = () => {
  const dispatch = useDispatch()

  const user = useSelector(state => state.user.item)
  const fetchOneUserLoading = useSelector(state => state.user.fetchOne.loading)
  const fetchOneUserError = useSelector(state => state.user.fetchOne.error)

  useEffect(() => {
    dispatch(FetchOne.action(id))
  }, [dispatch])

  return (
    <View>
        {fetchOneUserLoading && <ActivityIndicator />}
        {fetchOneUserError ? (
          <Text style={Fonts.textRegular}>{fetchOneUserError.message}</Text>
        ) : (
          <Text style={Fonts.textRegular}>
            {t('example.helloUser', { name: user.name })}</Text>
        )}
    </View>
  )
}

export default ExampleContainer
```

--------------------------------

### Fonts Configuration in theme.config.ts

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/04-Theming/03-Generated styles/02-Fonts.mdx

This TypeScript code snippet shows the structure of the `fonts` configuration within the `theme.config.ts` file. It defines the `sizes` and `colors` properties, which are used to generate font styles dynamically.

```TypeScript
export const config = {
    //...
    fonts: {
        sizes: sizesValues,
        colors: colorsValues,
    },
    //...
}
```

--------------------------------

### Accessing Layout Styles with useTheme() in React Native

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/04-Theming/03-Generated styles/05-Layout.mdx

This code snippet demonstrates how to access the generated layout styles within a React Native component using the `useTheme()` hook. The `layout` object contains the predefined layout styles that can be applied to your components.

```javascript
const { layout } = useTheme()
```

--------------------------------

### Error Logging in ErrorBoundary

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/08 - Components/05 - ErrorBoundary.md

Shows how to implement error logging within the ErrorBoundary component using the onErrorReport function.  This function takes an error and error info as arguments and allows you to integrate with crash reporting tools.

```jsx
const onErrorReport = (error: Error, info: ErrorInfo) => {
  // use any crash reporting tool here
  return onError?.(error, info);
};
```

--------------------------------

### Defining Theme Variants in TypeScript

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/04-Theming/02-Configuration.md

This code snippet demonstrates how to define theme variants in the `theme.config.ts` file. It shows how to override specific values, such as `backgrounds.gray_200`, in the `dark` theme variant while inheriting other values from the default theme.

```typescript
export const config = {
  //...
  // highlight-start
  backgrounds: {
    gray_200: '#DFDFDF',
  }, 
  // highlight-end
  //...
  variants: {
    dark: {
      // highlight-start
      backgrounds: {
        gray_200: '#000000',
      },
      // highlight-end
    },
  },
};
```

--------------------------------

### Accessing Environment Variables in JavaScript

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/05-Environment.md

Demonstrates how to access environment variables in JavaScript code using process.env.VARIABLE_NAME. This assumes that dotenv and babel-plugin-inline-dotenv are properly configured.

```javascript
process.env.API_URL
```

--------------------------------

### Accessing Fonts using useTheme Hook in JavaScript

Source: https://github.com/thecodingmachine/react-native-boilerplate/blob/main/documentation/docs/04-Guides/04-Theming/03-Generated styles/02-Fonts.mdx

This code snippet demonstrates how to access the generated font styles using the `useTheme` hook in a JavaScript component. The `fonts` object contains the generated styles for font sizes and colors, which can be applied to text components.

```JavaScript
const { fonts } = useTheme()
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.