Floating Action Button in React Native

A Floating Action Button (FAB) is a round button that stays fixed, "floating" above the rest of the content – known from Material Design, commonly used for a screen's single most important action ("new entry", "new message").

1. Description

Technically, a FAB is an absolutely positioned, circular TouchableOpacity anchored to the bottom-right of the screen, with elevation (Android) or shadow* properties (iOS) for the characteristic shadow that lifts it off the content underneath.

2. Short example

<TouchableOpacity style={{
  position: 'absolute', right: 24, bottom: 24,
  width: 56, height: 56, borderRadius: 28,
  backgroundColor: '#2563eb', alignItems: 'center', justifyContent: 'center',
}}>
  <Text style={{ color: 'white', fontSize: 28 }}>+</Text>
</TouchableOpacity>

3. Complete project: a note list with a FAB

npx create-expo-app fab-demo
cd fab-demo

App.js

import { useState } from 'react';
import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native';

let nextId = 1;

export default function App() {
  const [notes, setNotes] = useState([]);

  function addNote() {
    setNotes((list) => [
      ...list,
      { id: nextId++, text: `Note #${list.length + 1}` },
    ]);
  }

  return (
    <View style={styles.container}>
      <FlatList
        data={notes}
        keyExtractor={(item) => String(item.id)}
        renderItem={({ item }) => (
          <View style={styles.note}>
            <Text>{item.text}</Text>
          </View>
        )}
        ListEmptyComponent={<Text style={styles.empty}>No notes yet. Tap +.</Text>}
        contentContainerStyle={styles.list}
      />
      <TouchableOpacity style={styles.fab} onPress={addNote}>
        <Text style={styles.fabIcon}>+</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 60 },
  list: { paddingHorizontal: 16 },
  note: { backgroundColor: '#f3f4f6', padding: 14, borderRadius: 10, marginBottom: 10 },
  empty: { textAlign: 'center', marginTop: 40, color: '#9ca3af' },
  fab: {
    position: 'absolute', right: 24, bottom: 24,
    width: 56, height: 56, borderRadius: 28,
    backgroundColor: '#2563eb', alignItems: 'center', justifyContent: 'center',
    elevation: 6,
    shadowColor: '#000', shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3, shadowRadius: 4,
  },
  fabIcon: { color: 'white', fontSize: 28, lineHeight: 30 },
});

4. Explanation

position: 'absolute' with right/bottom takes the button out of the normal flexbox flow and anchors it, relative to the nearest positioned ancestor (here, container), to the bottom-right corner.
elevation is an ANDROID-only property for Material shadows; shadowColor/shadowOffset/shadowOpacity/shadowRadius are the iOS equivalent – specify both sets together so the shadow appears on both platforms.
borderRadius: 28 with width/height: 56 (= half of it) produces an exact circle – the same formula as in the "Avatar" topic.
The FAB is placed as the LAST child in the JSX so that (for overlapping elements without an explicit zIndex) it renders on top of the FlatList.

5. Outputs

Ausgabe

An empty list with hint text "No notes yet. Tap +.", a blue round button with a white plus icon and a drop shadow at the bottom right. Every tap inserts a new note card at the top of the list ("Note #1", "Note #2", ...).