reactnatively

FAB

A floating action button for the primary action on a screen. Supports solid and glass variants, optional text labels for extended FAB patterns, and built-in corner positioning.

Import

typescript

import { FAB } from 'reactnatively';

Feed screen with compose FAB

FeedScreen.tsx

1import { View, FlatList, StyleSheet } from 'react-native';2import { Ionicons } from '@expo/vector-icons';3import { FAB } from 'reactnatively';4import { PostCard } from './PostCard';56export function FeedScreen({ posts, onCompose }) {7  return (8    <View style={styles.root}>9      <FlatList10        data={posts}11        keyExtractor={(p) => p.id}12        renderItem={({ item }) => <PostCard post={item} />}13        contentContainerStyle={styles.list}14      />15      <FAB16        icon={<Ionicons name="create-outline" size={24} color="#fff" />}17        label="New Post"18        variant="solid"19        color="#6366f1"20        position="bottomRight"21        onPress={onCompose}22      />23    </View>24  );25}2627const styles = StyleSheet.create({28  root: { flex: 1 },29  list: { padding: 16, paddingBottom: 100 },30});

Glass variant

MapScreen.tsx

1import { View, StyleSheet } from 'react-native';2import { Ionicons } from '@expo/vector-icons';3import { FAB } from 'reactnatively';45export function MapScreen() {6  return (7    <View style={styles.root}>8      {/* Map component here */}9      <FAB10        icon={<Ionicons name="locate" size={22} color="#fff" />}11        variant="glass"12        size="md"13        position="bottomRight"14        onPress={() => console.log('Locate current position')}15      />16      <FAB17        icon={<Ionicons name="layers-outline" size={22} color="#fff" />}18        variant="glass"19        size="sm"20        position="topRight"21        onPress={() => console.log('Toggle map layers')}22      />23    </View>24  );25}2627const styles = StyleSheet.create({28  root: { flex: 1 },29});

Props

Prop	Type	Default	Description
icon	ReactNode	—	Required. Icon displayed inside the button.
label	string	undefined	Optional text label rendered beside the icon (extended FAB).
size	'sm' \| 'md' \| 'lg'	"md"	Controls the diameter and icon size.
variant	'solid' \| 'glass'	"solid"	Visual style.
color	string	undefined	Custom background color.
position	'bottomRight' \| 'bottomLeft' \| 'bottomCenter' \| 'topRight'	"bottomRight"	Screen-corner positioning (uses absolute layout).
onPress	(e) => void	undefined	Called when the FAB is pressed.
isDisabled	boolean	false	Prevents interaction.
style	StyleProp<ViewStyle>	undefined	Style applied to the outer container.