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 aredefault
,stack
,cover
, andparallax
. -
modeConfig
: This prop is an object that specifies the configuration for theparallax
mode. The available configuration options areparallaxScrollingOffset
andparallaxAdjacentItemScale
. -
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.
Top comments (0)