Floating Action Button - adhikari-bishal/elite-native GitHub Wiki

Floating Action Button

A reusable and customizable Floating Action Button (FAB) component for React Native.

✨ Features

  • Allows passing any icon
  • Configurable position: left, center, or right
  • Customizable colors and styles
  • Simple and reusable

📦 Usage

import { FloatingActionButton } from 'elite-native';

<FloatingActionButton
  icon={<YourCustomIconComponent />}
  onPress={() => console.log("FAB Pressed")}
  position="center"
  fabColor="#6200ee"
  containerStyle={{ elevation: 10 }}
/>

⚙️ Props

Prop Type Default Description
icon React.ReactNode — The icon component to render inside the FAB
onPress () => void — Function called when the FAB is pressed
fabColor string colors.primary Background color of the FAB
position 'left' | 'center'|'right' 'right' Position of the FAB on the screen
containerStyle StyleProp<ViewStyle> undefined Custom style for the FAB container
...props TouchableOpacityProps — Additional props passed to the TouchableOpacity

🧱 Internal Styles

The default FAB has the following dimensions and styling:

  • Width: 56
  • Height: 56
  • Border Radius: 28
  • Elevation and shadow for Android/iOS

📝 Notes

  • This component is ideal for single FAB use-cases.
  • For multiple FAB actions, consider using an Expandable FAB or FAB Group component instead.
⚠️ **GitHub.com Fallback** ⚠️