How to Create a Floating Button in React Native: A Step-by-Step Guide

#reactnative #mobile #ui #tutorial

Floating buttons in mobile application design help a user easily access the main action, such as creating a new item or navigating to another screen. In this tutorial, we will guide you through making a floating button in React Native with an example implementation.

Why Use Floating Buttons?

Floating buttons are excellent for emphasizing primary actions in an app, such as:

Adding new items
Navigating to a specific screen
Triggering user interactions

What We’ll Build

We will design a screen with a floating button using the TouchableOpacity component. It will show an icon and alert on press. A scrollable list will be shown below the button using FlatList.

Prerequisites

Before diving into the code, ensure you have the following:

A working React Native project.
@expo/vector-icons library installed for the icon:

npm install @expo/vector-icons

Floating Button Example

Here’s the complete code for the floating button and list:

import React from "react";
import {
  Text,
  StyleSheet,
  SafeAreaView,
  TouchableOpacity,
  View,
  FlatList,
} from "react-native";
import Octicons from "@expo/vector-icons/Octicons";
import { colors } from "@/components/styles/appStyles";

const App = () => {
  // Action when the floating button is pressed
  const handlePress = () => {
    alert("Floating Button Pressed!");
  };

  // Sample data for the list
  const data = Array.from({ length: 50 }, (_, index) => ({
    id: index.toString(),
    title: `Item ${index + 1}`,
  }));

  // Render each item in the FlatList
  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text style={styles.title}>{item.title}</Text>
    </View>
  );

  return (
    <SafeAreaView style={styles.container}>
      {/* Floating Button */}
      <TouchableOpacity style={styles.floatingButton} onPress={handlePress}>
        <Octicons name="diff-added" size={24} color="white" />
      </TouchableOpacity>

      {/* Scrollable List */}
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={renderItem}
        contentContainerStyle={styles.list}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
    padding: 20,
    justifyContent: "center",
    alignItems: "center",
  },
  title: {
    fontSize: 18,
    fontWeight: "bold",
    color: "white",
  },
  floatingButton: {
    backgroundColor: colors.primary, // Replace with your primary color
    width: 60,
    height: 60,
    borderRadius: 30,
    justifyContent: "center",
    alignItems: "center",
    position: "absolute",
    bottom: 40,
    right: 30,
    elevation: 5, // For Android shadow
    shadowColor: "#000", // For iOS shadow
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  },
  list: {
    padding: 10,
  },
  item: {
    backgroundColor: colors.secondary, // Replace with your secondary color
    padding: 10,
    marginVertical: 8,
    borderRadius: 8,
    width: "100%",
  },
});

export default App;

Understanding the Code

1. Floating Button

The floating button is implemented using the TouchableOpacity component, which is styled to float above other content. Key style properties include:

position: 'absolute': Makes the button float above other content.
bottom and right: Specify the button's position relative to the screen.
Shadows: elevation for Android and shadowColor, shadowOffset, shadowOpacity, shadowRadius for iOS.

2. Icon

We use the Octicons component from @expo/vector-icons to add an icon to the button.

3. Scrollable List

The list is rendered using FlatList, which efficiently handles long, scrollable data.

4. Data Array

A mock array of 50 items is created to populate the list dynamically using Array.from().

Demo

Conclusion

This tutorial gave a general view of how to structure a simple and workable floating button in React Native. Once combined with things like FlatList, it provides excellent usability and design elements for the user and your app. Try editing styles and functionalities that fit your needs!

Thank you for reading! Feel free to connect with me on LinkedIn or GitHub.

Deliver your unique apps, your own way.

Heroku tackles the toil — patching and upgrading, 24/7 ops and security, build systems, failovers, and more. Stay focused on building great data-driven applications.

Learn More