react-native-boilerplate Documentation

File: README.md Copy Chapter

TheCodingMachine React Native boilerplate

This project is a React Native boilerplate that can be used to kickstart a mobile application.

The boilerplate provides an optimized architecture for building solid cross-platform mobile applications through separation of concerns between the UI and business logic. It is fully documented so that each piece of code that lands in your application can be understood and used.

If you love this boilerplate, give us a star, you will be a ray of sunshine in our lives :)

Requirements Copy Chapter

Node 18 or greater is required. Development for iOS requires a Mac and Xcode 10 or up, and will target iOS 11 and up.

You also need to install the dependencies required by React Native.
Go to the React Native environment setup, then select React Native CLI Quickstart tab.
Follow instructions for your given development OS and target OS.

Quick start Copy Chapter

To create a new project using the boilerplate simply run :

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

Assuming you have all the requirements installed, you can run the project by running:

• yarn start to start the metro bundler, in a dedicated terminal
• yarn to run the platform application (remember to start a simulator or connect a device)

Digging Deeper Copy Chapter

To learn more about this boilerplate, go to full documentation

License Copy Chapter

This project is released under the MIT License.

About us Copy Chapter

TheCodingMachine is a web and mobile agency based in Paris and Lyon, France. We are constantly looking for new developers and team leaders and we love working with freelancers. You'll find an overview of all our open source projects on our website and on Github.

File: documentation/blog/2020-04-19-React-Native-Boilerplate-3.0.0.md Copy Chapter

title: React Native Boilerplate 3.0.0 authors: jed hide_table_of_contents: false tags: [boilerplate, starter-kit, starter, kit, react, native, react-native, javascript, typescript] Copy Chapter

Welcome aboard! 🛥️

As we have active users that uses this boilerplate, we will try to improve communication about updates
we're releasing. It's important for us to give you new reasons to try this boilerplate out!
We would love to have new ideas to make it even more convenient!

To do so, we will post a changelog every major updates. Unlike the changelog in the releases tab, we
will here provide more details and maybe some examples.

In this first post, we will present the current state of this boilerplate.

Light 🪶 Simple 👌 and Scalable 📏 Copy Chapter

This boilerplate is the core of every react-native applications we develop at TheCodingMachine.
This means that we are the first users! If an issue appear we are the first affected 🥺, that's why this project is actively maintained!

The main idea behind this boilerplate is to have just the necessary and well-known stuff to have a very
"easy to use" boilerplate for little and big real world apps.

We don't include components libraries, we don't depend on third-party libraries (like Firebase for example).
It's just a good template project that is build on top of all the accumulated experience of our mobile teams.
It also provides a solid architecture that facilitates separation of concerns between the UI, the state management
and the business logic.
Like that, everyone can add its own touch! 🖌️

🚨 Every decision about the technical stack are made regarding our preferences (every library has his
pros and cons).

Easy to install 😎 Copy Chapter

Installation has been facilitated since the v2.0.0, thanks to the use of the react-native-cli and
custom template.
To run this boilerplate, the only commands you need are

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

That's this simple! 🚀

Typescript support 💙 Copy Chapter

Since the v3.0.0, during the installation, you can choose to use typescript for your new app.
All the boilerplate will then be translated in typescript.

That's this simple! 🚀

Solid libraries 🔨 Copy Chapter

As I said before, main concerns are simplicity and scalability.
Each of the used libraries are well-known, tried and tested.

Well-know libraries Copy Section

For the state management we use Redux (redux + redux toolkit + redux persist).
Some people like it, some people don't.
We are really comfortable with this library, it's not so difficult to learn, and the implementation is well-known,
recognized as a good choice and easy to debug!
Thanks to this boilerplate and redux-toolkit, the state management is ready out of the box.
A complete example is even included. This way, you can easier understand how it works.
To deal with the navigation, React Navigation is THE reference for screen navigation.
For the internationalization we use I18next. Well-know library, really easy to use and
providing nice hooks.

redux-toolkit-wrapper Copy Section

This project is a Redux-toolkit wrapper (yes... it's obvious 😅) used to write less code regarding classic CRUD operations.
Redux-toolkit provide a lot of abstraction for async operations, but we always have to create a loading and error
state and associated reducers.
Redux-toolkit-wrapper abstract these async operations. For a classic "fetch one user" operation all you need is adding these files :

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',
  }),
}

const sliceInitialState = {
  item: {},
}

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

Next, you can use your state in your container like this:

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

That's this simple! 🚀

What's in the box? 📦 Copy Chapter

Still hesitating ? Let's make a recap and see what this beautiful boilerplate can provide you:

• No headaches! 🤒 Thanks to the quick and easy install, the
  documentation and of course the included example! (if you have all the installed
  requirements
  of course)
• Typescript 💙 / Javascript 💛 ? Your project, your choice!
• Never again sailing on troubled waters with React Navigation: THE powerful library to handle navigation 📱
• Redux (with redux-toolkit and redux-toolkit-wrapper 😉) : handling
  redux store has never been as easy as this!! ⚡
• DarkMode or colorful app? Give your users the power to choose!
  Multi-theming and darkMode support 🌗
• French kisses aren't translatable, but you can translate your app! i18n friendly 🌐
• You don't like bug hunt? Use Flipper debugging 🐛
• Maintained by passionate developers ⚛️

Just Test It 🧪 !!

Installation plugins ⚙️ Copy Chapter

Freshly in the v3.0.0 we created an installation plugin system. Of course, the first plugin added is the typescript one. 😉
We are now able to add local or npm plugins to our boilerplate in order to apply them during the installation.
This way, we get the app template with the features we asked for.
In other words, no unwelcome pieces of code will lay in your app architecture anymore.

You got it, it's only the beginning thinking about the many plugins we could create for this project. 🤩
So wait and see what could be the next plugins...🕓🤐

Why this boilerplate? 🐙 Copy Chapter

Before starting this project, we looked for already existing boilerplates.
We've found some, but while many were (and are always) awesome, we did not find what we were
looking for: a light, scalable, and flexible boilerplate with a great separation of concerns.

One of the most popular was
Matt Mcnamee's React Native Starter Kit,
which unfortunately missed Redux middleware and React Navigation.

Digging deeper in the react-native boilerplates (ignoring unmaintained projects),
many popular boilerplates were too opinionated: they
included 3rd party services or very strong architecture choices
that we were not comfortable with.
To name a few:

• Snowflake ran with a Hapi Server running on Redhat OpenShift,
• Apollo's StarterKit is based on GraphQL using Apollo,
• Meteor Boilerplate is based on Meteor.

Finally, some did not contain the architecture we were looking for (the separation of concerns),
for example re-start.

One interesting exception was
Ignite IR Boilerplate "Andross", but after
consideration we decided not to use it because of the large amount of
unnecessary code/components it provided out of the box.

In 2021, some react-native boilerplates have changed. Let's see what are
the differences:

No Typescript support,
            Don't use the react-native-cli to init |

| bartonhammond/snowflake | Seems not maintained anymore (last release was in 2017) 💤 |
| sysgears/apollo-universal-starter-kit | Is based on GraphQL using Apollo,
Don't use the react-native-cli to init |
| spencercarli/react-native-meteor-boilerplate | Seems not maintained (no release, last commit was in 2018) 💤 |
| react-everywhere/re-start | Seems not maintained (last release was in 2017) 💤 |
| infinitered/ignite | Specific folders for ignite-cli and boilerplate items,
MobX instead of Redux,
Expo ready,
Reactotron (ignite product) ready,
Typescript only |

So there is no reason to hesitate : come 🧲, test 🧪 and leave a star ⭐

Thanks for reading, See you for the next release. 🏷️

File: documentation/blog/2023-11-30-React-Native-Boilerplate-4.0.0.md Copy Chapter

title: React Native Boilerplate 4.0.0 authors: jed hide_table_of_contents: false tags: [v4, boilerplate react, react-native, kickstart] Copy Chapter

After using the boilerplate on several projects,
we decided to revisit some important aspects while still adhering to the core principles of the boilerplate:
separation of concerns, ease of setup, and maintainability.
We made several enhancements, which we'll detail here.

Improved Theming Copy Chapter

Theming is a crucial aspect of any application.
Previously, we had designed a layered theming system where all variables could be customized for each theme,
including base colors and spacing.
Upon reflection, we found that this system, while effective, wasn't the most straightforward to use,
especially with the layered naming convention.

Additionally, being able to modify spacing between themes didn't make sense.
Furthermore, the variable names we used weren't always intuitive.
For instance, terms like 'medium' or 'large' didn't allow for easy interpolation between them.
It was even harder to find an intermediate value between 'medium' and 'regular,' for example.

As a result, we decided to simplify and improve the theming process, making it more efficient and comprehensive.

Configuration Copy Section

Everything now revolves around a configuration file named _config.ts.
This file serves as a central configuration point where you can define the base theme values and declare theme variants.
We've moved away from the complex layering system in favor of a more reflective system with main themes and variants.

Theme Provider Copy Section

To boost performance, we introduced a ThemeProvider component. This component provides the theme to the application,
preventing the need to regenerate the theme with every useTheme call.

Type Inference Copy Section

We've also improved the type inference of the theme. Now each generated style is typed according to the theme configuration even if there are variants.
For example, let's imagine a configuration like this:

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

The generated type will be inferred at the perfect level:

Goodbye Redux 🤧 Copy Chapter

Redux is a fantastic library, but it's not always the best solution for every project.
When we started the boilerplate, our goal was to provide a comprehensive solution for state management. In our initial version, we integrated Redux, Redux Persist, and Redux Saga, to name a few. These libraries were essential for managing the application's state, handling asynchronous requests, and persisting data.

However, over time, alternative solutions emerged,
particularly in the realm of data fetching.
It was with Redux Toolkit Query that we began version 3.
Nonetheless, we decided to part ways with it for version 4.

Our aim has always been to offer a lightweight yet comprehensive solution
without being too opinionated. Thus, we chose to remove Redux from the boilerplate
in favor of lighter and more straightforward alternatives.
It's important to note that global state management remains crucial in an application,
and several options are available:

• Redux
• Mobx
• Zustand
• Jotai
• React Context
• And more...

Now, in this version, for data fetching, we now use React Query,
an excellent library that's straightforward to use.
As for data storage, we rely on React Native MMKV, a native library known for its high performance and secure,
synchronous data storage capabilities.

Enhanced Documentation 💙 Copy Chapter

We also took the opportunity to enhance the documentation.
It's now clearer and more comprehensive.
We've made an effort to make the documentation more accessible and easier to understand.
At times, we've added 'playgrounds' in the section related to theme generation,
allowing you to directly test the values you want and see the results for yourself

File: documentation/docs/04-Guides/04-Theming/03-Generated styles/01-Gutters.mdx Copy Chapter

slug: /theming/generated-styles/gutters sidebar_label: Gutters title: Gutters id: theming-generated-styles_gutters keywords: [padding, margin, paddings, margins, gutters, spacings, gap] Copy Chapter

import Gutters from "../../../../src/components/Gutters";

How to use ? Copy Chapter

Generated styles provided by the gutters section of the theme configuration assist in applying margin and padding to your components.
You can access these styles using the following code:

const { gutters } = useTheme()

For more details, refer to the gutters section of the theme configuration.

Generated gutters Copy Chapter

Here's the representation of the generated styles for a given GuttersConfig like the one below:

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

Where value is an array of numbers, the generated keys available through the gutters key will be the concatenation of the gutter name and the value, including:

• margin_${value},
• marginBottom_${value},
• marginTop_${value},
• marginRight_${value},
• marginLeft_${value},
• marginVertical_${value},
• marginHorizontal_${value},
• padding_${value},
• paddingBottom_${value},
• paddingTop_${value},
• paddingRight_${value},
• paddingLeft_${value},
• paddingVertical_${value},
• paddingHorizontal_${value},
• gap_${value},

The corresponding values behind these keys will be:

{
    [gutter_name]: value
}

This structure simplifies the process of accessing and applying margin and padding styles with various gutter values.

Static gutter styles Copy Chapter

Some gutter styles, don't require dynamic generation.
To accommodate this, we offer the staticGuttersStyles object that houses static styles for gutters.
You can use this file as-is or customize it to your preferences.
These styles will be seamlessly merged with the generated ones,
making them accessible through the gutters object of the useTheme hook.

Playground Copy Chapter

Here's a simple playground that provides a visual representation of the objects generated from a given gutters configuration:

const { fonts } = useTheme()

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

const { backgrounds } = useTheme()

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

const { borders } = useTheme()

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

const { layout } = useTheme()

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
            ]}
        >
            
            {isError && (
                <Text style={[
                    //highlight-start
                    gutters.marginTop_30, 
                    fonts.font_16, 
                    fonts.text_red_500
                    //highlight-end
                ]}>
                    An error occured
                </Text>
            )}
        </View>
    )
}

import { useTheme } from '@/theme';

const Example = () => {
    const { changeTheme } = useTheme();
    
    return (
         changeTheme('dark')}
        />
    )
}

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

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>;
};