The Ultimate Guide to Customizing Your React Native App

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;

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.

$ cd test_app && npm run android 

Incorporate a custom font into your app

First, you need to head over to Google fonts 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;

$ npx react-native-asset 

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

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;

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

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.

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.

$ 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.

$ 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.

$ 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.

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.