The Ultimate Guide to Customizing Your React Native App
Tags: reactnative, javascript, mobile
Published: 2023-08-29 12:26:01

React native is a Javascript framework for building cross-platform applications. React native allows you to build applications that can be shipped to Android, iOS, Windows, and Web from the same code base. React native builds on top of React the best Javascript framework for building UIs. React native provides a bridge for accessing native modules through Javascript. 

In today's post, we are going to set up a React Native project and not just going to stop there. I'm going to show you how to incorporate a custom font into our application, how to add vector icons to your app and finally, we are going to add react-reanimated carousel to the application. We are going to consider the following in this post;

- How to set up a bare-bones react native project.
- How to incorporate a custom font into your app.
- How to add React Native vector icons to your app.
- How to add react-reanimated carousel to your app.

## How to set up bare-bones react native project.

To set up a new React Native project you need to run the following command;

```bash
npx react-native@latest init test_app
```
Wait for React Native to install and set up the project on your machine and when it's done navigate to the project directory and run the project to verify that everything is set up successfully.

```bash
$ cd test_app && npm run android 
```

## Incorporate a custom font into your app

First, you need to head over to [Google fonts](https://fonts.google.com/) to download the font you'd like to use, After you are done doing that you need to head to your project and create a new folder named `assets` then inside the `assets` folder you just created you need to create another folder named `fonts`. Go ahead and copy all of the font files you just downloaded, ensure to unzip downloaded font, and copy the `font.ttf` file. Paste this file into the `fonts` folder inside the `assets` folder. 

```
---assests/fonts/Nunito.ttf
```

We now need to link the font files to the project and that can be done using this command;

```bash
$ npx react-native-asset 
```

Now it's all done you can proceed to use the font to style your texts in your project.

```jsx
const styles = StyleSheet.create({
  text: {
    fontFamily: 'Nunito'
  }
});

//Inside the component
<Text 
   style={styles.text}
>
  Custom Font
</Text>
```

## Add React Native vector icons to your app.

Let's see how to incorporate `react-native-vector-icons`. This package allows us to use icons in our project. First, we need to install the package from npm with the following command;

```bash
$ npm i react-native-vector-icons
```

When the package is done installing you need to navigate to the `android/app/` folder and open the `build.gradle` file, scroll to the bottom of the page, and paste in the following content;

```gradle
project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ]
]

apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle");
```

The first line customizes the specific type of icons we want since the package bundles in icons from most of the popular icon libraries. The second line imports the `fonts.gradle` file into our project. Now you can go ahead and import the icon you'd like to use into your project as demonstrated below.

```jsx
import Icon from 'react-native-vector-icon/FontAwesome';
import {View, Text } from 'react-native';

//Inside the component
<View>
  <Icon 
     name="home" size={20} color="#000" /> 
   <Text>Icons</Text>
</View>
```

## Add a react-reanimated carousel to your app.

Let's add react-reanimated carousel into our app, this is a package that enables you to add a carousel component into your application without much of a hassle, so let's go ahead with that. First, we need to install `react-native-gesture-handler` using the following command.

```bash
$ npm install --save react-native-gesture-handler
```

Next, you need to install `react-native-reanimated` into your application, so go ahead and install the package with the following command.

```bash
$ npm install react-native-reanimated
```

Open up the `babel.config.js` file at the root of your project and add the following configurations to it.

```
module.exports = {
    plugins: [
      ...
      'react-native-reanimated/plugin',
    ],
  };
```

Next, you need to install the `react-native-reanimated-carousel` with the following command.

```bash
$ npm i react-native-reanimated-carousel
```
I did run into some issues while trying to run the app after all of this installation so make sure you have the latest version of `NDk` installed in your Android studio. Also, ensure that you have the latest version of `CMake` installed on your Android studio. Now let's use this component in our app.

```jsx
import React from 'react';
import {View, Text} from 'react-native';
import Carousel from 'react-native-reanimated-carousel';

const topics = [
  {active: true, text: 'Healthy'}, 
  {active: false, text: 'Technology'},
  {active: false, text: 'Finance'},
];


const App: React.FC = () => {
  return (
    <>
      <Carousel<{active: boolean, text: string}>
        loop
        width={360}
        height={50}
        visibleItems={3}
        mode='parallax'
        modeConfig={{parallaxScrollingOffset: 260,  parallaxAdjacentItemScale: .8}}
        autoPlay={true}
        data={topics}
        scrollAnimationDuration={500}
        renderItem={({index, item}) => (
          <View key={index}>
            <Text>{item.text}</Text>
          </View>
        )}
      />
    </>
  );
};

export default App;
```

The code snippet above creates a React Native carousel component. The carousel component is imported from the `react-native-reanimated-carousel` package.

The first thing the code does is define an array of objects called `topics`. Each object in the array has two properties: `active` and `text`. The `active` property indicates whether the topic is currently selected, and the `text` property contains the text of the topic.

The next thing the code does is create a React component called `App`. The `App` component returns a `Carousel` component. The `Carousel` component has the following props:

* `loop`: This prop specifies whether the carousel should loop back to the beginning when it reaches the end.
* `width`: This prop specifies the width of the carousel.
* `height`: This prop specifies the height of the carousel.
* `visibleItems`: This prop specifies the number of items that should be visible at a time.
* `mode`: This prop specifies the mode of the carousel. The available modes are `default`, `stack`, `cover`, and `parallax`.
* `modeConfig`: This prop is an object that specifies the configuration for the `parallax` mode. The available configuration options are `parallaxScrollingOffset` and `parallaxAdjacentItemScale`.
* `autoPlay`: This prop specifies whether the carousel should automatically play.
* `data`: This prop specifies the data that should be used to populate the carousel.
* `scrollAnimationDuration`: This prop specifies the duration of the animation when the carousel scrolls.
* `renderItem`: This prop is a function that is used to render each item in the carousel.

The `renderItem` function takes two props: `index` and `item`. The `index` prop is the index of the item in the array, and the `item` prop is the object that represents the item. The `renderItem` function returns a React component that is used to render the item.

In this case, the `renderItem` function returns a `View` component that contains a `Text` component. The `Text` component displays the text of the item.

Why did I discuss this? I recently set up a React-Native project and I had to incorporate all of the above packages I just discussed into the App I was building and it was a great experience and I decided to share it with you guys. Well, I hope you found this super useful, anyway make sure to leave your comments about your experience with React-Native and what aspect of React-Native you'd like me to write about next. See you In the next one.