React Native is a well-known framework for building mobile applications, and one of its prime features is the ability to create user interface elements quickly and easily. One of these elements is the Floating Action Button (FAB). Here, in this blog, we will learn how to create one FAB in the easiest way possible.

Table of Contents

Toggle

Define a Floating Action Button

Refer to a FAB or a Floating Action Button as a GUI or a Graphical User interface element. It appears on the app screen as a circular button shape. You can build a Floating action button in web apps and mobile apps by seeking help from the developers of React native app development company. It helps users to perform frequently-used and prominent actions. The actions can be making calls, going to a different platform such as social media account, and others. It is visible on the app screen and it appears as if it is floating on the screen. Thus, the name ‘Floating Action Button’.

This kind of button is usually built to achieve prominence, consistency, and accessibility. Actually, the FAB is a versatile and useful design element that is meant for improving user experience.

Also, this button saves space on your main screen. This floating action button hides numerous segments within it. These are visible when users click on the FAB.

Let’s find out the prior-needed tasks.

Environment set up– Here, I have used Expo CLI. This is another tool to build a React Native project. Expo CLI has an easier setup method. With Expo CLI, you can create a new project with just a few commands. You dont need to download heavy software in your system. Also, Expo CLI comes with a number of built-in features that are not available in React Native CLI such as in-app purchases and others.

So, whether you want to build an app for android or iOS devices, you have to get the Expo Go app on your devices. This way you can easily run your app on your phone devices.

Build a simple template for your project– Consider a folder in your local system where you need to build a simple expo project. Open the terminal or cmd from this folder and run the below-mentioned command

npx create-expo-app Fab_project

cd Fab_project

npx expo start

This is an important step that you need to perform. Without this step, you cannot design your codebase and start developing the project. Here, the project is built with the name ‘Fab_project’.

Installing react-native-social-fab– To get this library get linked to your project, you have to run a terminal from your project folder and pass npm i react-native-social-fab.

Getting components from third-party libraries saves effort and time for developers. You, being the developer do not have to indulge in creating components from the start. You can simply import the components you are looking for and use them in your codebase. Adding a Floating action button on your app and increasing its user experience becomes much easier with the FloatingButton component. Not only this, but you can also customize the button and place it wherever on the screen you prefer.

How to add the codebase for the project?

Open the Fab_project folder from the VS code editor and go to the App.js folder. Delete all the code lines already present in the App.js folder.

For every React Native project, we have to start with importing components. The components are StatusBar, StyleSheet, View, Linking, Text, and FloatingButton.

Stylesheet, Text, and View are primarily for the app’s UI.

The Linking component in React Native provides a method to implement the mobile deep linking feature. It allows you to navigate to a particular screen or content within an app from another app or web page.

Although StatusBar is not used in the actual codebase, it has been imported from the ‘expo-status-bar’ library.

The main component in this project is the FloatingButton taken from react-native-social-fab. Using this component has made the entire process much easier.

With the ‘export default’ statement, the code defines the prime component. Here, it is the App(). It comprises the top-level structure and logic of the app, like the routing, state management, and layout.

Later, in the codebase, the View component is used to make space for the main container. A styling element is added to it.

Three event handler functions are used. These are onPressFacebook, onPressTwitter and onPressInstagram. These are used to handle user interactions with the attached buttons. In this case, the buttons are Facebook, Twitter, and Instagram respectively. Also, the Linking component is used for each of the social media platforms. This will allow users to get directed to the Facebook, Twitter, and Instagram platforms.

As you can from the codebase of image 2, a specific URL is attached to each of the social media icons.

This is the designing part of the codebase. It is quite similar to how you design elements and buttons in CSS.

However, in React Native, you have to build a styling object. Here, it is the container. The properties that are used with the container include flex, backgroundColor, alignItems, and justifyContent. For the text color or background color, you have to mention the color using a color code. Here, the background color is made white using the code #fff.

You can give it a different property and value pair for your styling object. You can also add other styling objects to make your app’s UI more dynamic.

Now, we have successfully completed designing the codebase. You need to check the accuracy of the codebase.

To run the app on the emulator

Make a new terminal from your project folder. Here, you have to run two commands namely npm install and npm start. Wait for some time till it completeness the bundling process.

It may take 5 to 10 minutes.

Consider image 4 as the project’s output.

Creating a FAB becomes easier when you select the scalable framework. Here, it is the React Native framework. Hope, this article has helped you to get more familiar with the framework.