The popularity of React Native framework in terms of building web apps or mobile apps is significant. It combines the power of React with the flexibility of native development. One common UI component that many apps use is a Floating Action Button (FAB). Adding a FAB to a React Native app can be done with just a few lines of code, but it does require some knowledge of React and the React Native component library. In this blog article, we will cover the basics of adding a FAB to a React Native app. We will start by explaining what a FAB is and why it’s useful, and then we will walk through the steps needed to add one to your app. By the end of this tutorial, you should have a clear understanding of how to add a FAB to your React Native app and how to customize it to fit your needs.
Table of Contents
Significance of a Floating Action Button
FABs are circular buttons that appear to float on the app screen. You can place t his button wherever you like. It is possibly located in the bottom corner on the right side.
In addition to their practical use, FABs can also add a touch of style and personality to an app. This is customizable with different colors, icons, and animations to match the overall design and branding of the app.
Not only FAB enhances the visual appeal of an app but also saves space for adding other important UI elements.
However, there are substitutes that you can consider in place of a Floating Action button. It includes an Action bar, bottom navigation bar, Contextual action bar, and floating contextual menu.
Setting up the environment for the project
Environment setup is the first task that you have to undertake. The steps depend on the tools you choose. For example, the environment setup process is different for React Native CLI and Expo CLI. Here, we are considering Expo CLI. You don’t need to install numerous software. Just get the Android Studio and Visual Code editor. VS Code editor is the IDE in which you will design your code and with Android Studio, you will be able to run the program.
Visit the attached link for detailed information. If you want to develop your project using React Native CLI, then this article may not be suitable for your requirements.
Creating a basic template
It is another step that every developer of React Native app development company performs before proceeding further with their project. Select any folder in your local system. Run the cmd from that folder. As you are directed to the terminal run the following command on the terminal.
npx create-expo-app Floating-Action-button
cd Floating-Action-button
npx expo start
Here, the name of the project will be ‘Floating-Action-button’. You can give it a different name. In that case, you have to change the name from the above-given command as well.
You can check the template that is already built in your local folder.
Installation of react-native-social-fab
As we want to make this project-building process much easier, we have to get the third-party plugin react-native-social-fab and use the FloatingButton component in our codebase.
To download this third-party library, you have to pass a command on a terminal mentioned below.
npm I react-native-social-fab
If you are wondering what exactly is the third-party plugin. It is the software components that add functionality to an existing software application or system. It is an excellent way to get components from contributors and add them to your codebase.
However, it is important to use plugins from trusted sources and to ensure they are compatible with the software application in question to avoid potential security risks or compatibility issues.
Framing the coding part for the project
Image 1
Firstly, import the components. Here the code imports StatusBar, StyleSheet, View, Linking, Text, and FloatingButton components.
StatusBar is not used in the present case. The text component is used to add the text element. The View component is to add the main container.
Linking is one of the main components used to add the login URL of the social media account. This component is also used to open URLs, send emails, make calls, and deep link.
Image 2
Export default is used to define the main Functional component App(). Following this, the View component is considered to build space for the container. A styling object ‘container’ is added. This is mentioned in the later part of the project.
Three social media handle is linked with the floating action button. For this, the code uses three props namely OnPressFacebook, OnPressTwitter, and OnPressInstagram.
Linking. OpenURL is a function used to open a specified URL in the user’s default browser.
As you can see, three login URLs are linked to each of the props. As the user clicks on the icon, it will take the to the corresponding social media platform (Facebook, Twitter, and Instagram).
Image 3
In React Native, the “StyleSheet” component is used for creating styles for components. This is similar to CSS in the web app or mobile app development. The “StyleSheet” component provides a way to define the visual styles for UI components in a structured and efficient manner.
Stylesheets help to ensure that the visual appearance of your application is consistent across all screens and components. By defining a set of common styles in a central stylesheet, you can ensure that all components use the same colors, fonts, and other design elements.
Here, the ‘container’ is used as the styling object to design the container of the Floating action button.
Executing the program on the virtual device
Open the project from the VS Code editor and make a terminal. Here, you need to pass two commands. The first one is the npm install and the second one is the npm start. Pass both these commands one after another.
Wait till the app starts on the virtual device. You will see your floating action button on your emulator. Consider image 4.
Image 4
You can also customize your FAB by adding other action elements to it.
Start coding and get smarter.
react native app development company
