React Native doesn’t come with any FAB component built-in. A floating action button (FAB) is used whenever you want to display a button on the top of everything. If you have used ScrollView and the user can scroll up and down, this FAB button will always stay at the same position and doesn’t move with the scrolling. You can make this button in a circle or in a square shape. You can put icons or text in the middle.
There are multiple libraries that give you pre-build FAB buttons. But you can also create one on your own to get maximum flexibility so that you customize it any way you want.
Approach: We will create a custom component called FAB which we can reuse everywhere we want to display FAB on the screen. This custom component FAB will take some props so that we can customize it any way we want.
Creating React Application:
Step 1: Open your Terminal and run the below command. It will install Expo CLI globally in your system.
npm install -g expo-cli
Step 2: Now, create a new React Native Project by running the below command.
expo init "Your_Project_Name"
Step 3: You’ll be asked to choose a template. Select blank template.
Step 4: Create a new file called FAB.js, This file is a custom component to create a FAB button.
mkdir FAB.js
Step 5: Now go to the project folder and run the below command to start the server.
cd "Your_Project_Name" npm start
Project Structure: It will look like the following:
FAB component
Example: Open the FAB.js file and write the below code in that file.
This file contains the code for the custom FAB component. It will take 2 props, text for the FAB button, and a function that will be called when the user presses the button. This component will have a background color and a text at the center. You can also add icons according to your requirement. The function which is received as a prop will be assigned to the onPress event of the Pressable component.
Javascript
import { Pressable, StyleSheet, Text } from "react-native"; import React from "react"; const FAB = (props) => { return ( <Pressable style={styles.container} onPress={props.onPress}> <Text style={styles.title}>{props.title}</Text> </Pressable> ); }; export default FAB; const styles = StyleSheet.create({ container: { justifyContent: "center", alignItems: "center", borderRadius: 10, position: "absolute", bottom: 70, right: 40, backgroundColor: "#26653A", paddingHorizontal: 20, paddingVertical: 10, }, title: { fontSize: 18, color: "#fff", fontWeight: "bold", }, }); |
- App.js: It is the main file that renders first when you run your app. In this file, we will use the custom FAB component that we have just created. We will pass a text as a string and a function that we want to call every time when the user presses the button. Here in this example, we have created a function called displayAlert, which will invoke an alert box with a message.
Javascript
import { StyleSheet, View } from "react-native"; import FAB from "./FAB"; export default function App() { const displayAlert = () => { alert("Welcome to neveropen"); }; return ( <View style={styles.container}> <FAB onPress={displayAlert} title="Add" /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", }, }); |
Output:
FAB component
This is how you can create a custom FAB button on your own in React Native, it will provide you much more flexibility than a third-party pre-build component.
