How to Use a Floating Action Button in React Native?
- A Floating Action Button (FAB) is a round button that floats above the UI, commonly used for main actions like Add, Create, or Edit.
- React Native doesn’t have a built-in FAB, but you can create one with TouchableOpacity and icon libraries like Feather.
- FABs are great for navigation, launching modals, or adding new items in to-do, notes, and calendar apps.
- A well-designed FAB uses color, size, shadow, and position to stand out from the rest of the UI.
AppFabButton Component Example
AppFabButton.tsx
import React, { ComponentProps } from 'react';
import { StyleSheet, TouchableOpacity, ViewStyle } from 'react-native';
import { Feather } from '@expo/vector-icons';
import { Colors } from '@/src/style';
type FabProps = {
onPress: () => void;
iconName: ComponentProps<typeof Feather>['name'];
style?: ViewStyle;
iconColor?: string;
iconSize?: number;
};
export const AppFabButton = ({
onPress,
iconName,
style,
iconColor = '#fff',
iconSize = 24,
}: FabProps) => {
return (
<TouchableOpacity onPress={onPress} activeOpacity={0.7} style={[styles.container, style]}>
<Feather name={iconName} size={iconSize} color={iconColor} />
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
container: {
position: 'absolute',
bottom: 12,
right: 12,
width: 56,
height: 56,
borderRadius: 28,
backgroundColor: Colors.PrimaryLighter, // Default iOS-like blue; change as needed
justifyContent: 'center',
alignItems: 'center',
elevation: 4, // Android shadow
shadowColor: '#000', // iOS shadow
shadowOpacity: 0.3,
shadowRadius: 3,
shadowOffset: { width: 0, height: 2 },
},
});- AppFabButton is a reusable floating action button that accepts any Feather icon and custom styles.
- It positions itself in the bottom-right corner by default, but you can override the style prop to move it anywhere.
- The iconName prop lets you pick any Feather icon (like plus, edit, camera, etc).
- TouchableOpacity provides smooth feedback and supports accessibility.
- You can easily adjust the icon color and size with props.
Key Takeaways
- You can add a floating action button in React Native using TouchableOpacity and an icon component.
- FABs are perfect for main app actions and improve user workflow in any mobile app.
- AppFabButton is fully customizable—change its icon, color, size, and position to fit your needs.
- Position your FAB absolutely to float above other UI elements.
- Add elevation and shadow for a Material Design look and feel on Android and iOS.
- You can combine multiple FABs for advanced actions or multi-step workflows.