How to create custom FAB(Floating Action Button) in React Native?

Last Updated : 24 May, 2025

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 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 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. Let’s watch a short video to see what we are going to create.

Demo VIdeo

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.

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

Step 2: Run Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

For the Android users,
- For the Android Emulator, press "a" as mentioned in the image below.
- For Physical Device, Download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.
For iOS users, simply scan the QR code using the Camera app.
If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Create a new component folder (optional)

You can create a new folder called "components" to organize all component files better, as mentioned in the image below. Alternatively, you can write the component code directly in App.js.

Step 4: Working with FAB.js

- Import libraries: Import required libraries at the top of the file.

JavaScript

import { 
  Pressable,   // Pressable component for handling touch events
  StyleSheet,  // StyleSheet for styling components 
  Text         //  Text component for displaying text
} from "react-native";   // Import necessary components from React Native
import React from "react"; // Import React library

- StyleSheet: Create a StyleSheet to style components like the container and title.

JavaScript

// Styles for the FAB component
const styles = StyleSheet.create({
  container: {
    justifyContent: "center", // Center content vertically
    alignItems: "center", // Center content horizontally
    borderRadius: 10, // Rounded corners
    position: "absolute", // Position the button absolutely
    bottom: 70, // Distance from the bottom of the screen
    right: 40, // Distance from the right of the screen
    backgroundColor: "#26653A", // Background color of the button
    paddingHorizontal: 20, // Horizontal padding
    paddingVertical: 10, // Vertical padding
  },
  title: {
    fontSize: 18, // Font size of the title
    color: "#fff", // Text color
    fontWeight: "bold", // Bold font weight
  },
});

- FAB Component: Create a FAB Component with a Text Component wrapped with Pressable Component, also make sure to export it.

JavaScript

// Floating Action Button (FAB) component
export const FAB = (props) => {
  return (
    // Pressable component to handle user interactions
    <Pressable 
      style={styles.container} // Apply container styles
      onPress={props.onPress} // Trigger the onPress function passed via props
    >
      {/* Display the button title */}
      <Text style={styles.title}>{props.title}</Text>
    </Pressable>
  );
};

FAB.js:

JavaScript

import {
  Pressable,   // Pressable component for handling touch events
  StyleSheet,  // StyleSheet for styling components 
  Text         //  Text component for displaying text
} from "react-native";   // Import necessary components from React Native
import React from "react"; // Import React library

// Floating Action Button (FAB) component
export const FAB = (props) => {
  return (
    // Pressable component to handle user interactions
    <Pressable
      style={styles.container} // Apply container styles
      onPress={props.onPress} // Trigger the onPress function passed via props
    >
      {/* Display the button title */}
      <Text style={styles.title}>{props.title}</Text>
    </Pressable>
  );
};


// Styles for the FAB component
const styles = StyleSheet.create({
  container: {
    justifyContent: "center", // Center content vertically
    alignItems: "center", // Center content horizontally
    borderRadius: 10, // Rounded corners
    position: "absolute", // Position the button absolutely
    bottom: 70, // Distance from the bottom of the screen
    right: 40, // Distance from the right of the screen
    backgroundColor: "#26653A", // Background color of the button
    paddingHorizontal: 20, // Horizontal padding
    paddingVertical: 10, // Vertical padding
  },
  title: {
    fontSize: 18, // Font size of the title
    color: "#fff", // Text color
    fontWeight: "bold", // Bold font weight
  },
});

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.

Step 5: Working with App.js

Now call this FAB Component in the main "App" Component in App.js.

App.js:

JavaScript

// Import necessary components from React Native
import { StyleSheet, View } from "react-native"; 
// Import the custom Floating Action Button (FAB) component
import FAB from "./components/FAB"; 

// Main App component
export default function App() {
  // Function to display an alert message
  const displayAlert = () => {
    alert("Welcome to GeeksforGeeks");
  };

  return (
    // Main container view with styling
    <View style={styles.container}>
      {/* Floating Action Button with an onPress handler */}
      <FAB onPress={displayAlert} title="Add" />
    </View>
  );
}

// Styles for the App component
const styles = StyleSheet.create({
  container: {
    flex: 1, // Take up the full screen
    backgroundColor: "#fff", // Set background color to white
  },
});

Or

You can write the whole code in one file, i.e, App.js.

Complete Source Code

App.js:

JavaScript

// Import the custom Floating Action Button (FAB) component
import {
  StyleSheet, View,
  Pressable,   // Pressable component for handling touch events
  Text         //  Text component for displaying text
} from "react-native";   // Import necessary components from React Native
import React from "react"; // Import React library

// Floating Action Button (FAB) component
 const FAB = (props) => {
  return (
    // Pressable component to handle user interactions
    <Pressable
      style={styles.container} // Apply container styles
      onPress={props.onPress} // Trigger the onPress function passed via props
    >
      {/* Display the button title */}
      <Text style={styles.title}>{props.title}</Text>
    </Pressable>
  );
};


// Main App component
export default function App() {
  // Function to display an alert message
  const displayAlert = () => {
    alert("Welcome to GeeksforGeeks");
  };

  return (
    // Main container view with styling
    <View style={styles.containermain}>
      {/* Floating Action Button with an onPress handler */}
      <FAB onPress={displayAlert} title="Add" />
    </View>
  );
}

// Styles for the App component
const styles = StyleSheet.create({
  containermain: {
    flex: 1, // Take up the full screen
    backgroundColor: "#fff", // Set background color to white
  },
  container: {
    justifyContent: "center", // Center content vertically
    alignItems: "center", // Center content horizontally
    borderRadius: 10, // Rounded corners
    position: "absolute", // Position the button absolutely
    bottom: 70, // Distance from the bottom of the screen
    right: 40, // Distance from the right of the screen
    backgroundColor: "#26653A", // Background color of the button
    paddingHorizontal: 20, // Horizontal padding
    paddingVertical: 10, // Vertical padding
  },
  title: {
    fontSize: 18, // Font size of the title
    color: "#fff", // Text color
    fontWeight: "bold", // Bold font weight
  },
});

Output :

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.

How to add a Progress Bar in react-native using react-native-paper library ?

brijenmakwana

Improve

Article Tags :

How to create custom FAB(Floating Action Button) in React Native?

Demo VIdeo

Approach

Step-by-Step Implementation

Step 1: Create a React Native Project

Project Structure:

Step 2: Run Application

Step 3: Create a new component folder (optional)

Step 4: Working with FAB.js

Step 5: Working with App.js

Or

Complete Source Code

Similar Reads

React Native Basics

React Native Components

React Native UI Elements

React Native API

React Native Questions

React Native Projects

Thank You!

What kind of Experience do you want to share?