# Introduction to Something really cool

```bash
yarn add something-else
```

This is a Draft

At some point, every developer need to fulfill the desire of some design work in a application to built a curved bottom tab. With me wasn't so difference, I cross this path once my design team asks for it, my major difficult was trying to understand how to do it.

In this point I was searching and understanding two ways out: Doing with Views only (we can enter in this subject in another day) or using svg and d3-shape. Using just views is not easy but at the same time not some monster, but I found more easy and more clean building it with svg, so let's do it.

## Getting Started

First and formals we need to create a react native app:
```bash
npx react-native init myExample
```

ps: In my case you'll realize that I use typescript, but is not mandatory.

Now we'll need to install all the react-navigation dependencies, at this tutorial I'll be using react-navigation v5, so you'll track easily to move with me in that version.

Follow the react navigation [Documentation](https://reactnavigation.org/docs/getting-started/) to install all dependencies well

```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
```


At some point, every developer need to fulfill the desire of some design work in a application to built a curved bottom tab. With me wasn't so difference, I cross this path once my design team asks for it, my major difficult was trying to understand how to do it.

In this point I was searching and understanding two ways out: Doing with Views only (we can enter in this subject in another day) or using svg and d3-shape. Using just views is not easy but at the same time not some monster, but I found more easy and more clean building it with svg, so let's do it.

## Getting Started

First and formals we need to create a react native app:
```bash
npx react-native init myExample
```

ps: In my case you'll realize that I use typescript, but is not mandatory.

Now we'll need to install all the react-navigation dependencies, at this tutorial I'll be using react-navigation v5, so you'll track easily to move with me in that version.

Follow the react navigation [Documentation](https://reactnavigation.org/docs/getting-started/) to install all dependencies well

```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
```

With all this dependencies installed as following the documentation we're ready to move forward.

## Introduction

Now, moving in to the code, we'll need to create a navigation file that I called `navigation.js` inside ``src/*``.

```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 TabBar from './components/TabBar';
import First from './screens/First';
import Third from './screens/Third';
import Secondary from './screens/Secondary';
import TabBarButton from './components/TabBarButton';

const Stack = createStackNavigator();

const Tab = createBottomTabNavigator();

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

export function SecondaryStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name={'Secondary'} 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>
  );
}
```

In this file you can realize that I have already 3 screens: First, Secondary and Third. This three screens are only flex components with different colors to show the result. And at this point we have:

![Screen Shot 2021-04-24 at 17.10.23](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vyg24xibt4v5h2x34ew9.png)

## Building a Custom TabBar

Here, we'll follow the react navigation documentation once again, for getting a implementation of a Custom TabBar:

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

Then in our `src/navigation.js` file, we have in the TabNavigator a prop named `tabBar` that we'll return our Custom TabBar the we created:

```javascript
{...}

export default function Navigation() {
  return (
    <NavigationContainer>
      <Tab.Navigator tabBar={props => <MyTabBar {...props} />}>
        {...}
      </Tab.Navigator>
    </NavigationContainer>
  );
}
```

## Creating a TabBarButton + Adding into our Custom TabBar

Now we'll be creating a `components/TabBarButton.js` that will be responsible for having the style of our float button:

```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,
    bottom: 10,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'purple',
  },
  text: {
    fontSize: 40,
    color: 'white',
  },
});
```

Now we have to do 2 things to see the TabBarButton component in our CustomTabBar:

- First we need to add in our desired TabScreen component the prop named `options`, in my case I want to add this in to my 'Secondary' screen:

```javascript
      <Tab.Screen
        name={'Secondary'}
        options={{tabBarButton: () => <TabBarButton />}}
        component={SecondaryStack}
      />
```
- Last but not least we need to do a ternary condition in our Custom TabBar to, if a options.tabBarButton exists show this component but otherwise show the default one:

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

We have at this point:
![Screen Shot 2021-04-24 at 17.32.31](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/29ge4uxqv1s1spoiofo5.png)

## Curving our TabBar

Last and most important (and probably the reason that you're reading this article), we'll add the curve in our tabBar, for this we'll need to install two dependencies:

```bash
yarn add d3-shape react-native-svg
cd ios/ && pod install && cd ..
```

Let's built our component that will be responsible for having the curves, I'll name him TabShape:

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

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 in to this code so you can understand it:

First, we use a function named `line` of d3-shape, this function will be responsible for create lines based on coordinates that we give to it. In the `rect` we can do a basically calculation and realize that I just build a rectangle:

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

[0,0] --------- [width/2, 0] -------- [width, 0]
  |                  |                    |
  |                  |                    |
  |                  |                    |
  ---------------------------------- [width, TAB_HEIGHT]
```

The most difficult part is to understand the curve part, but follows the same path, the start of the curve, the deepness of it and then the end of the curve:

```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],
]);
```

Now that we have our TabShape ready we need to do:

```javascript
import TabShape from './TabShape'
const TAB_HEIGHT = 80;

const MyTabBar = ({...}) => {
{...}
return (
    <View style={{ position: 'absolute', height: TAB_HEIGHT, width: Dimensions.get('window').width, shadowOffset: {
      width: 0,
      height: 0,
    },
    shadowOpacity: 0.2,
    elevation: 5, }}>
      <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>
  );
}
```

And here we have:
![Screen Shot 2021-04-24 at 17.49.31](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eo18008a5ag2x2o9bqeg.png)

## Conclusion

Thanks for reading until here, I really appreciate. Any doubts or questions just reach me in my email or open a issue/PR in the github example:

[Repository example](https://github.com/brunofrigeri/curved-bottom-tab)

Creating a curved bottomTab with a really cool deep effect.

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 our mother language and, in my case, English.

With that said we need to do all our articles, resume, I mean everything in two languages, so today I'll be teaching you guys how to manage to get two or more languages using React/Next.js.

## Introduction

First and formals we'll need to setup our next project:

```javascript
npx create-next-app
# or
yarn create next-app
```

After that we need to install the dependencies that we'll need for this project `next-i18next`:

```javascript
yarn add next-i18next
# or
npm install --save next-i18next
```

## Configuration

With all that managed, we need to move forward in config our files. So with that been said, let's move in to that:

- At first, we need to create a next-i18config file, that we're going to name by `next-i18next.config.js`, inside it we'll put our locale configuration, based on our locales, in my case:

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

- Now we'll create a file named `next.config.js` or open the existing one and added our i18n file to be exported as well.

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

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

- Now we need to create a `locales` folder in our public folder and inside it create our different languages folder with a `common.json` file each:

![Screen Shot 2021-04-05 at 19.09.19](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/orrssbh6svn09gpm7yd3.png)

**PS**: It's important and will not work without the `common.json` file.

- Last but not least, we'll connect the i18n with our app, open the `pages/_app.js` directory and do the following:

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

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


export default appWithTranslation(MyApp)
```

Voilá, now we can start to using our different locales into our app.

## Implementing different languages

Next we'll implement the different languages visually:

- Here we need to define some text for example to change per locale, so in each `locale/{...}/common.json` folder we'll create a property name ``title``:

```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 multi linguagem, utilizando Next.js"
}
```

- Now, to use this information in our page we need to getStaticProps in use, we'll need to import `serverSideTranslations` from next-i18next:

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

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

**PS**: At this point, you'll need to add the `common.json` in this array always, even if you need to use other json file, for example:

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

- Now the nicest part, adding our translation in to the visual code. First we need to import `useTranslations` from react-i18next (react-i18next will be installed with create-next-app don't worry), then, we'll disrupt the useTranslation to get the property `t`, that will directly used for our translations:

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

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

  return (
    <div className={styles.container}>
      {...}
      <main className={styles.main}>
        <h1 className={styles.title}>
          {t('title')}
        </h1>
      </main>
      {...}
    </div>
  )
}

{...}
```

**PS**: The main difference between the getStaticProps using and the useTranslation is that, in the getStaticProps we need to always include common.json in the array, but in the useTranslation we'll add only the file that we need. In your `common.json` and `example.json` example, we would have:

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

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

  return (
    <div className={styles.container}>
      {...}
      <main className={styles.main}>
        <h1 className={styles.title}>
          {t('title')}
        </h1>
      </main>
      {...}
    </div>
  )
}

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

## Result

```bash
http://localhost:3000/en
```
![Screen Shot 2021-04-06 at 14.28.54](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cot23ec7lsnfb77r646h.png)

```bash
http://localhost:3000/pt-BR
```
![Screen Shot 2021-04-06 at 14.29.03](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/040y7yaotw14do3oow8y.png)

## PLUS

If you're wonder on how to change the language by pressing a button, I'll solve your question right now. To be able to change the locale onPress a button for example, we need to import Link from next/link. Link have a property named ``locale`` that could be use for change our language, so you can create how many locales do you want and do like the following:

```javascript
{...}
import Link from 'next/link'
{...}

export default function Home() {
  {...}
  return (
      {...}
      <main className={styles.main}>
        {...}
        <div className={styles.container}>
          <div className={styles.locale}>
            <Link href={'/'} locale={'en'}>
              <p>EN</p>
            </Link>
          </div>
          <div className={styles.locale}>
            <Link href={'/'} locale={'pt-BR'}>
              <p>PT-BR</p>
            </Link>
          </div>
        </div>
      </main>
      {...}
    </div>
  )
}

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

And we're ready to go !!!

Check the github repository for this article right here:
[GitHub Repository](https://github.com/brunofrigeri/multi-language-nextjs)


Build from zero a application that supports multiple languages.

My drafts

This is a Draft

This is a Draft

My posts

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

Building a multi language website with Next.js