Last week, I was having a problem in my current job, that basically we were refactoring stuffs in our code, and one of them was the Status Screen.
The previous developer left to us a linear navigation (using react-navigation), that basically works without different stacks (not differing auth and app). With that in mind, one of our screens was the Status one, that basically could be navigated towards all the application.
After I start the refactor of the navigation, and update the navigation from a linear one to a navigation by stack, based on the authentication flows from react-navigation, we start to have a problem:

**How to have a global Status for our API responses, without to have it as a Screen?**

The response takes a bit to come for me, but, at evening the light came, why not use a High Order Component to get around this problem?!

So, let's start doing it, first and formals, we are going to use React Native (Expo Bare-Workflow), to be able to get our results more quickly, but the same can be achieved using React Native CLI.

### Getting Started
First, we're going to init our project, as I'm using Expo, I'll do:

```bash
expo init
```

After that, I'm going to select my workflow, based on expo. So I'll select:

```bash
minimal (TypeScript)  same as minimal but with TypeScript configuration 
```

### Creating our Context
Okay, with our code ready to start, we're going to create our context, in my case, the StatusContext.

Inside the source of our code, create a `contexts` folder, and inside it, create: `index.ts`, `provider.tsx` and `types.ts`.

#### types.ts
In this file, we need to create all types that we're going to need in our context:

1) *STATUS*: responsible for been a status state, to render or not, our Status Modal;
2) *StatusScreen*: all different statuses, that can be called in our components;
This type will be really important to be used, because, in my case I have tons of different requests that has different responses, so, I need to be able to specify my status modal and, perhaps, their options.

3) *StatusContextType*: our context types, all properties that can be used from the components that knows our context.

```javascript
export enum STATUS {
  SUCCESS,
  ERROR,
}

export type StatusScreen = 'status_one' | 'status_two' | undefined

export type StatusContextType = {
  status: STATUS | false
  statusScreen: StatusScreen | undefined
  setStatus(status: STATUS | false): void
  setStatusScreen(statusScreen: StatusScreen | undefined): void
  clearState(): void
  statusOptions: any
}
```


#### provider.tsx

Okay, in this file we'll create our context himself. My StatusProvider will work as following:

```javascript
import React, { createContext, useEffect, useState } from 'react'
import { STATUS, StatusContextType, StatusScreen } from './types'

export const StatusContext = createContext<StatusContextType>(
  {} as StatusContextType
)

export default function StatusProvider({
  children,
}: {
  children: React.ReactNode
}) {
  const [status, setStatus] = useState<STATUS | false>(false)
  const [statusScreen, setStatusScreen] = useState<StatusScreen | undefined>(
    undefined
  )

  const [statusOptions, setStatusOptions] = useState<any>(undefined)

  const clearState = () => {
    setStatus(false)
    setStatusScreen(undefined)
    setStatusOptions(undefined)
  }

  const getStatusScreenProps = () => {
    if (statusScreen) {
      switch (statusScreen) {
        case 'status_one':
          return {
            title: 'TITLE OF SCREEN ONE',
            description: 'This is the description of screen one',
          }
        case 'status_two':
          return {
            title: 'TITLE OF SCREEN TWO',
            description: 'This is the description of screen two',
          }

        default:
          break
      }
    }
  }

  useEffect(() => {
    setStatusOptions(getStatusScreenProps())
  }, [status, statusScreen])

  return (
    <StatusContext.Provider
      value={{
        status,
        statusScreen,
        setStatus,
        setStatusScreen,
        statusOptions,
        clearState,
      }}
    >
      {children}
    </StatusContext.Provider>
  )
}

```

Is really important to remember that the `getStatusScreenProps` function is something that will be used for my purposes, BUT, can also be inexistent.
In my case, I need to have a chance to render the same status modal, just changing the options, WITHOUT using this contexts in different statuses file.

I could create a `Status.tsx` component in each of my Screens, but them, at some point, with a possible redesign, I would to change all my components. Creating just a StatusCustom, we can concentrate our efforts in just one file with a Custom Settings.

#### index.ts
In here we're just creating our Hook and exporting it.

```javascript
import { useContext } from 'react'
import { StatusContext } from './provider'
import { StatusContextType } from './types'

export const useStatus = (): StatusContextType => {
  return useContext(StatusContext)
}
```

#### Provider
Last but not least, we need to put our Provider above all our application (or above the Components we need to use).

To do that, I created a `Welcome.tsx` file in the root, for testing purposes, and, in the `App.tsx` I did:

```javascript
import React from 'react'
import StatusProvider from './contexts/provider'
import Welcome from './pages/Welcome'

export default function App() {
  return (
    <StatusProvider>
      <Welcome />
    </StatusProvider>
  )
}

```

Now, our entire App can use the Status Context, including the Welcome Component.

### Creating the Status Component and Welcome Page
Now, we need to create our Status Component, as I already said, I'll create my Status as a Modal, so, let's do it:

```javascript
import React, { useEffect, useState } from 'react'
import { View, Modal, Text, TouchableOpacity } from 'react-native'
import { STATUS } from '../../contexts/types'

interface StatusProps {
  title?: string
  description?: string
  clearState(): void
  status: STATUS | false
}

const Status = ({ title, description, status, clearState }: StatusProps) => {
  const [visible, setVisible] = useState<boolean>(false)

  useEffect(() => {
    setVisible(status !== false)
  }, [status])

  return (
    <View>
      <Modal visible={visible}>
        <View>
          <Text>{title}</Text>
          <Text>{description}</Text>
          <TouchableOpacity onPress={clearState}>
            <Text>Close modal</Text>
          </TouchableOpacity>
        </View>
      </Modal>
    </View>
  )
}

export default Status
```

Okay. You can notice that this file is really reusable, that's totally the thought. We have a really simple and custom Status, that receives all props from the Parent Component who calls.

#### Welcome.tsx
This file is just a really playground for our tests.

```javascript
import React, { useEffect } from 'react'
import { SafeAreaView, Text, TouchableOpacity, View } from 'react-native'
import Status from '../components/Status'
import { useStatus } from '../contexts'
import { STATUS } from '../contexts/types'
import withStatus from '../hoc/withStatus'

function Welcome() {
  const { status, statusScreen, setStatus, setStatusScreen } = useStatus()

  const onPressFirstStatus = () => {
    setStatus(STATUS.SUCCESS)
    setStatusScreen('screen_one')
  }

  const onPressSecondStatus = () => {
    setStatus(STATUS.SUCCESS)
    setStatusScreen('screen_two')
  }

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <TouchableOpacity onPress={onPressFirstStatus}>
        <Text>OPEN MODAL 1</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={{ marginTop: 100 }}
        onPress={onPressSecondStatus}
      >
        <Text>OPEN MODAL 2</Text>
      </TouchableOpacity>
    </SafeAreaView>
  )
}

export default Welcome
```

Here, I created two different buttons for render the modals, but we can see, that once we clicked in the Button, nothing happens. That's because we didn't have the Status Component included in our code yet.

Some code examples, could do like:

```javascript
function Welcome() {
  {...}

  if (status !== false) {
    return (
     <Status {...statusOptions} status={status} clearState={clearState} />
    )
  }

  return (
    ...
  )
}

export default Welcome
```

And, we have no problem with that solution, BUT. Remember that we want to have this Status in multiple Components, imagine to put this condition inside 100 different files, wouldn't that be a rough task?!

### HOC - High Order Component

So, now we reach the focus point of this article. My major problem was how to use a HOC to achieve my goal. So, I have multiple screens that needs to render a Status Modal once we have a response from API. 
**IMPORTANT**: Just explaining a HOC, really simple, a High Order Component is a technique in React to reuse logic for multiple components. A HOC receives, on a raw manner, a Component, and returns other Component. 

That is the most important thing here, we can do whatever we want above the Component that is coming to us, and the following code is what we're going to do:

```javascript
import React from 'react'
import Status from '../components/Status'
import { useStatus } from '../contexts'
import { STATUS } from '../contexts/types'

const withStatus = (Component: any) => {
  return function WithStatus({ children }: any) {
    const { status, statusOptions, clearState } = useStatus()

    if (status !== false) {
      return (
        <Status {...statusOptions} status={status} clearState={clearState} />
      )
    }

    return <Component>{children}</Component>
  }
}
export default withStatus

```

Here, we have a `withStatus` HOC, that are a Component, and we're putting a condition inside it, DEPENDING on our Status hook. If we have a Status (remember that we're returning in our hook a `status` state, that returns to us if is SUCCESS or ERROR) the Status Modal needs to be shown.

#### Updating Welcome.tsx

Now that we have our withStatus HOC, we need to update the `Welcome.tsx` file, so the Modal can be finally rendered.

```javascript
{...}

function Welcome() {
  {...}
}

ADDED -> export default withStatus(Welcome)
```

We added the withStatus above our Welcome Component, and now, the Component is Wrapped by the Status Modal, and will be listening for all changes in the StatusContext and rerender whenever is needed.

Now, this is the result:

**Welcome Page**:
![Screen Shot 2021-09-27 at 19.42.31](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u2f00gc1lx5y2scublxb.png)

**Status - status_one (after click on onPressFirstStatus)**:
![Screen Shot 2021-09-27 at 19.42.49](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mx07c19i99gr8x6ogcp5.png)

**Status - status_two (after click on onPressSecondStatus)**
![Screen Shot 2021-09-27 at 19.42.52](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zpfnrhyprspj0a2m5kw.png)
   


### Finish
So, this is everything guys, hope you enjoy to read it, and get all the knowledge I try to pass here. This was my workaround for a problem that I found myself trapped in. If
you think something could get better, please let me know, let's talk about that, thanks for reading it.

Here's the repository link: [Repository Link](https://github.com/brunofrigeri/hoc-with-status)
   


Global Status Modal HOC

Every developer have to follow prototypes coming from design work. The thing is not always said is that sometimes the designer perceive something that it's hard for developers. I have a similar comparison that I like to do: Imagine an architect that architects a house in some weird or hard way, pretty, but hard. The engineer needs to overcome the issues, and, if possible delivery the architect solution. 
Getting back to ours, we are the engineer (metaphoric and specifically saying) that needs to deliver the awkward, pretty and hard structure.

For me, it was on my way working on a fintech, the need of a curved tab navigation arrived, and me, as a developer that have never done it, struggled.
So today, I'll try, hope with success, explain in details how I could achieve the desired behavior with performance, low and clean code.


## Introduction
The first step of the way was understanding the ways to do it, my finds were divided in:
- Creating a curved bottom navigation using Views only.
- Using SVG forms and trying to shape them the way we need (fyi, we can create awesome forms by shaping them).

Moving on, I decided to go with the most beautiful, performant and cleaner solution I encounter, which was using SVGs and shaping them accordingly. So let's code!!

## Setting up Project and Installing dependencies

1. Let's start our react-native app, I'm going to use a bare `react-native-cli` installation, but you can go with `expo` too:
First and formals we need to create a react native app:

```bash
yarn react-native init curved-bottom-tab-rn
```

2. Moving on we need to install the needed `react-navigation` dependencies for a bottom tab use. At this tutrial, I'm using `v5` of `react-navigation` which it's completely your choice.

```bash
yarn add @react-navigation/native
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
yarn add @react-navigation/stack
yarn add @react-navigation/bottom-tabs
```

**PS:** You should follow react-navigation [documentation](https://reactnavigation.org/docs/getting-started/) for better documentation on installing all dependencies and settings. All of them are made for this project and can be encountered in the repository at the final of this post.

## Using React Navigation
Here, for test purposes, I'm going to create different Stacks, which are going to be used as an entry point to different Tabs. So with no more delay, let's create our first file `navigation.{ts,js}` inside our `src/*` folder.
In my case here's the example below:

```javascript
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { First, Second, Third } from './screens'

const Stack = createStackNavigator();

const Tab = createBottomTabNavigator();

export function FirstStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="First" component={First} />
    </Stack.Navigator>
  );
}

export function SecondStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Second" component={Secondary} />
    </Stack.Navigator>
  );
}

export function ThirdStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Third" component={Third} />
    </Stack.Navigator>
  );
}

export default function Navigation() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="First" component={FirstStack} />
        <Tab.Screen name="Secondary" component={SecondaryStack}/>
        <Tab.Screen name="Third" component={ThirdStack} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}
```

For more information on this piece of code, here are the things we're doing and the result of it below:
- Adding `Screens`: we added three different screens (First, Second and Third) which just exists for test purposes, and are just flex components with different background colors. 
- Creating `Stacks`, which, as the name suggests, it's a stack of screens.
- Creating a `TabNavigator`: the `TabNavigator` is basically a Tab that keeps at the bottom of the screen, in which, in our case, will be always visible for all screens no matter the current Stack. 


![Screen Shot 2021-04-24 at 17.10.23](/assets/_uploaded/curved-bottom-tab-react-native-1.png)

## Building a Custom TabBar
For customizing a TabBar, `react-navigation` give us a full documentation that can be really self explainer, so I'll leave you guys with that [here](https://reactnavigation.org/docs/5.x/bottom-tab-navigator/#tabbar).
Following, let's create a file for this custom tabBar, I'm going to name it `MyTabBar`, inside `components` folder.

```javascript
import { View, Text, TouchableOpacity } from 'react-native';

function MyTabBar({ state, descriptors, navigation }) {
  const focusedOptions = descriptors[state.routes[state.index].key].options;

  if (focusedOptions.tabBarVisible === false) {
    return null;
  }

  return (
    <View style={{ flexDirection: 'row' }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };

        return (
          <TouchableOpacity
            accessibilityRole="button"
            accessibilityState={isFocused ? { selected: true } : {}}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={{ flex: 1 }}
          >
            <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
              {label}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}
```

1. Now, let's get to work. In our `src/navigation.{ts,js}` file, we have in the TabNavigator a prop named `tabBar` that returns a function with props, those props are what we need for our custom tab navigator, so we can receive those props and return our custom component. So let's import our component `MyTabBar` and in our `navigation.{ts,js}` file we're going to use the property `tabBar` mentioned prior:

```javascript
import { MyTabBar } from './components'

export default function Navigation() {
  return (
    <NavigationContainer>
      <Tab.Navigator tabBar={props => <MyTabBar {...props} />}>
        <Tab.Screen name="First" component={FirstStack} />
        <Tab.Screen name="Secondary" component={SecondaryStack}/>
        <Tab.Screen name="Third" component={ThirdStack} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}
```

2. Now, you can realize that all three tabs has the same shape, but we want the middle one with a different display. For that we're going to create a `TabBarButton.{tsx,jsx}` component, which will be used only for the middle tab.

```javascript
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function TabBarButton() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>+</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    width: 55,
    height: 55,
    borderRadius: 999, // full radius
    bottom: 10,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'purple',
  },
  text: {
    fontSize: 40,
    color: 'white',
  },
});
```

3. Let's add the `TabBarButton` to our `TabNavigator`, using a prop called `options.tabBarButton` which receives an Component instead of the current tabBarButton component:

```javascript
  export default function Navigation() {
    return (
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen name="First" component={FirstStack} />
          <Tab.Screen name="Secondary" component={SecondaryStack} options={{ tabBarButton: () => <TabBarButton /> }} />
          <Tab.Screen name="Third" component={ThirdStack} />
        </Tab.Navigator>
      </NavigationContainer>
    );
  }
```

4. Things are not working correctly just yet, as we created a custom tabBar, the option `tabBarButton` is not being accessed. For accessing it, we can add a condition like the following:

```javascript
import { View, Text, TouchableOpacity } from 'react-native';

function MyTabBar({ state, descriptors, navigation }) {
  const focusedOptions = descriptors[state.routes[state.index].key].options;

  if (focusedOptions.tabBarVisible === false) {
    return null;
  }

  return (
    <View style={{ flexDirection: 'row' }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };

        return (
          <TouchableOpacity
            accessibilityRole="button"
            accessibilityState={isFocused ? {selected: true} : {}}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            {options.tabBarButton ? (
              <TabBarButton />
            ) : (
              <Text style={{color: isFocused ? '#673ab7' : '#222'}}>
                {label}
              </Text>
            )}
          </TouchableOpacity>
        );
      })}
    </View>
  );
}
```

Let's look what we have at this moment:
![Screen Shot 2021-04-24 at 17.32.31](/assets/_uploaded/curved-bottom-tab-react-native-2.png)

## Using D3-Shape to Shape our TabBar
1. Mostly important, and probably why you're here to be honest, we're going to shape our TabBar. For that we're going to use [d3-shape](https://github.com/d3/d3-shape) and [react-native-svg](https://github.com/software-mansion/react-native-svg), so let's add them:

```bash
yarn add d3-shape react-native-svg
```

If using **IOS**, run:
```bash
cd ios/ && pod install && cd ..
```

2. Now, we're going to build a component that will be called `TabShape.{tsx,jsx}` which will be responsible for shaping our tabBar:

```javascript
import React from 'react';
import {Dimensions} from 'react-native';
import {curveBasis, line} from 'd3-shape';
import Svg, {Path} from 'react-native-svg';

const TAB_HEIGHT = 80; // This fixed height can be as you wish.

const { width } = Dimensions.get('window');

const lineGenerator = line();

const rect = lineGenerator([
  [0, 0],
  [width / 2, 0],
  [width, 0],
  [width, TAB_HEIGHT],
  [0, TAB_HEIGHT],
  [0, 0],
]);

const center = lineGenerator.curve(curveBasis)([
  [(width / 5) * 2, 0],
  [(width / 5) * 2 + 20, TAB_HEIGHT * 0.5],
  [(width / 5) * 3 - 20, TAB_HEIGHT * 0.5],
  [(width / 5) * 3, 0],
]);

const d = `${center} ${rect}`;

export default function TabShape() {
  return (
    <Svg width={width} height={TAB_HEIGHT}>
      <Path fill="white" {...{d}} />
    </Svg>
  );
}
```

Okay, let's run into this code so you can understand it:

- `Svg` and `Path` from `react-native-svg` are responsible for creating an SVG through something, which in this case are shapes generated from d3-shape.
- The `line` function is responsible for generating lines based on giving coordinates.
- The `rect` constant uses the `lineGenerator` to build a rectangle, as the following:

```javascript
const rect = lineGenerator([
  [0, 0],
  [width / 2, 0],
  [width, 0],
  [width, TAB_HEIGHT],
  [0, TAB_HEIGHT],
  [0, 0],
]);
```

Translates to that in the reality:

```
    [0,0] ─────────────── [width / 2, 0] ───────────────────── [width, 0]         
       │                         │                                │              
       │                         │                                │             
       │                         │                                │              
 [0,TAB_HEIGHT] ────────────────────────────────────── [width, TAB_HEIGHT]
```

- Last and most importantly, the `curve`, which follows the exact same idea of the `rect`, but by curving it:

```javascript
const center = lineGenerator.curve(curveBasis)([
  [(width / 5) * 2, 0],
  [(width / 5) * 2 + 20, HEIGHT_SIZE * 0.5],
  [(width / 5) * 3 - 20, HEIGHT_SIZE * 0.5],
  [(width / 5) * 3, 0],
]);
```

- Check the whole explanation with this excalindraw Draw:

![CURVED_TAB_EXPLANATION](/assets/_uploaded/curved-bottom-tab-react-native-3.png#light-mode-only)
![CURVED_TAB_EXPLANATION](/assets/_uploaded/curved-bottom-tab-react-native-4.png#dark-mode-only)

- Now that we have our TabShape ready we need to turn our `TabBar` into an absolute component, so we can add a shape to it:

```javascript
import { Dimensions } from 'react-native'
import TabShape from './TabShape'
const TAB_HEIGHT = 80;

const { width } = Dimensions.get('window')

const styles = StyleSheet.create({
  myTabBarContainer: {
    position: 'absolute',
    height: TAB_HEIGHT,
    width,
    shadowOffset: {
      width: 0,
      height: 0,
    },
    shadowOpacity: 0.2,
    elevation: 5,
  }
})

const MyTabBar = ({...}) => {
return (
    <View style={styles.myTabBarContainer}>
      <TabShape />
      <View style={StyleSheet.absoluteFill}>
        <View style={{ flexDirection: 'row', flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          {state.routes.map((route, index) => {
            const {options} = descriptors[route.key];
            const label =
              options.tabBarLabel !== undefined
                ? options.tabBarLabel
                : options.title !== undefined
                ? options.title
                : route.name;

            const isFocused = state.index === index;

            const onPress = () => {
              const event = navigation.emit({
                type: 'tabPress',
                target: route.key,
                canPreventDefault: true,
              });

              if (!isFocused && !event.defaultPrevented) {
                navigation.navigate(route.name);
              }
            };

            const onLongPress = () => {
              navigation.emit({
                type: 'tabLongPress',
                target: route.key,
              });
            };

            return (
              <TouchableOpacity
                key={index}
                accessibilityRole="button"
                accessibilityState={isFocused ? {selected: true} : {}}
                accessibilityLabel={options.tabBarAccessibilityLabel}
                testID={options.tabBarTestID}
                onPress={onPress}
                onLongPress={onLongPress}
                style={styles.button}>
                {options.tabBarButton ? (
                  <TabBarButton />
                ) : (
                  <Text style={isFocused ? styles.label : styles.inactiveLabel}>
                    {label}
                  </Text>
                )}
              </TouchableOpacity>
            );
          })}
        </View>
      </View>
    </View>
  );
}
```

## Results
Finally, we have our goal done!!! Take a look at that:
![Screen Shot 2021-04-24 at 17.49.31](/assets/_uploaded/curved-bottom-tab-react-native-5.png)

## Conclusion
It was definitely a challenge that we've faced, but we made it! Thanks to you, as I'm seeing you reached the end of it, hope you understood the whole tutorial without problems. Let me know if you have doubts or encountered issues. Stay tuned!

You can check the [repository example](https://github.com/brunofrigeri/curved-bottom-tab) for the full implementation.

Curved Bottom Tab in React Native using SVG and D3-Shape

A lot of people, like me, are trying to get jobs outside their own country so to be able to do that we need to learn and master other languages.
In the programming world (and to be honest, in almost all areas that involve technology in some degree), the universal language is the english.

With that, beyond mastering communicating (which I mean, talking and listening) in those languages, we need to write our CV, blog posts and copies in this universal language.
So, today I'll be writing about how to manage a multi-language website using Next.js.

## Setting up the Project

Let's set up our Next.js project using the `create-next-app` lib, which give us a pretty good template (you can follow up to see options in [here](https://nextjs.org/docs/api-reference/create-next-app))

```bash
npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app
```

Altought Next.js providers internationalised routing, it doesn't handle management of translation content, so to be able to achieve that we're going to install `next-i18next` dependency for our project:

```bash
yarn add next-i18next react-i18next i18next
# or
npm install --save next-i18next react-i18next i18next
```

## Configuring Next.js with I18n

Following the `next-i18next` documentation, we need set up the project for it:

1. First, create a `next-i18next.config.js` file in the root of your project. 
- Inside it we need to add the locales configuration, based on your locale languages, which in my case is:

```javascript
  module.exports = {
    i18n: {
      defaultLocale: 'en',
      locales: ['en', 'pt-BR'],
    },
  }
```

2. Next, we're going to modify the `next.config.js` file, by passing the i18n config that we previously set up on our `next-i18next.config.js` file.

```javascript
const { i18n } = require('./next-i18next.config')

module.exports = {
  {...}
  i18n,
}
```

3. Now we need to create a `locales` folder inside `public` and create our different languages folder with a `common.json` file each. It's important to say that the `common.json` it's basically a set of texts that will be used for all components, but you can create others for specific components)

```
└── public
    └── locales
        ├── en
        |   └── common.json
        └── pt-BR
            └── common.json
```

4. Mostly important and the last step of the configuration, we need to connect the I18n with our app. Open the `pages/_app.js` directory and wrap the default export with `appWithTranslation` from `next-i18next`, following as below:

```javascript
import '../styles/globals.css'
import { appWithTranslation } from 'next-i18next'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}


export default appWithTranslation(MyApp)
```

That's all! Now we have all configuration set up and we can start using it.

## Implementing different languages in components using SSR

It's important to know that `next-i18next` added support for using SSR, which basically can be done by using the `getStaticProps` or `getServerSideProps` from Next.js. But let's continue:

1. Let's define some example text in all our different locale folders, I will be creating a __title__ field:

```javascript
// locale/en/common.json
{
    "title": "Building a multi-language website with Next.js"
}
```

```javascript
// locale/pt-BR/common.json
{
    "title": "Construindo um website com suporte a diversas linguagens, utilizando Next.js"
}
```

2. As mentioned above, to have Next.js support, we need to use `getStaticProps`or `getServerSideProps` (you can check usage details of each [here](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props)). With the decision in place, we're going to import `serverSideTranslations` from `next-i18next` and add to our choosen method.

**getStaticProps**
```javascript
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'

export const getStaticProps = async ({ locale }) => {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common'])),
    }
  }
}
```

**getServerSideProps**
```javascript
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'

export const getServerSideProps = async ({ locale }) => {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common'])),
    }
  }
}
```

Another really important thing to remember is that we can have specific translations (as I mentioned prior) for each component. Let's say I created a new file in our locales named `example.json`, and we want to add the translation to the same component. We would do:

```javascript
export const getStaticProps = async ({ locale }) => {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common',
      'example']))
    }
  }
}
```

3. Last, the display!! Let's add the translation itself to our Component. Let's import `useTranslations` from `react-i18next` dependency and destructure it to get property `t` (which will be then used for translating):

```javascript
import { useTranslation } from 'react-i18next'

export default function Home() {
  const { t } = useTranslation('common')

  return (
    <div>
      <main>
        <h1>
          {t('title')}
        </h1>
      </main>
    </div>
  )
}

export const getStaticProps = async ({ locale }) => {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common']))
    }
  }
}
```

## Seeing the Results

Accessing your `YOUR_URL/$LANGUAGE`, which in my case is `http://localhost:3000/${CURRENT_LANGUAGE}`.

**English -** `http://localhost:3000/en`

![MY_WEBSITE_IN_ENGLISH](/assets/_uploaded/building-multilanguage-nextjs-1.png)

**Portuguese -** `http://localhost:3000/pt-BR`

![MY_WEBSITE_IN_PORTUGUESE](/assets/_uploaded/building-multilanguage-nextjs-2.png)

## Conclusion

There we have it! I hope the post it's clear and you guys were able to follow. Feel free to tag me into any doubts and providing any feedbacks. In **part 2**, we're going to understand on how to build a simple toggle for changing languages! Stay tuned

To check all the work done here, you can go to the [GitHub Repository](https://github.com/brunofrigeri/multi-language-nextjs)


Hey, I'm Bruno. Nice to meet you!

I'm a software developer with focus on Mobile development, building world-class applications.

Writing

These blog posts were written as a way to study and share the acquired knowledge. Beyond that, it's really important to keep posts as reminders and notes for the future me. At this moment, I already written 3 posts. You can check them below:

All Writing

Global Status Modal HOC

How to create a withStatus HOC, that wrap multiple screens

September 27, 2021

|

8 min read

|

views

Curved Bottom Tab in React Native using SVG and D3-Shape

Creating a curved bottom tab with a really cool deep effect.

April 24, 2021

|

10 min read

|

views

How to build multi-language website with Next.js (PART 1)

Building from scratch an application that supports multiple languages.

April 06, 2021

|

5 min read

|

views