Skip to main content

Basic Usage

tip

The Fab component provides a simple way to add floating action buttons to your React Native application. This is perfect for actions that should be easily accessible to users.

Basic Usage:​

The Fab component offers a powerful and flexible way to integrate floating action buttons into your application. This is particularly useful for implementing quick actions that enhance user interaction.

Here's a basic example demonstrating how to use the Fab component in your application:

import React from 'react';
import { View, ScrollView, Text, StyleSheet } from 'react-native';
import { Fab } from '@masumdev/rn-fab';

export default function App() {
  return (
    <View style={styles.container}>
      <ScrollView
        scrollEventThrottle={16}
        style={styles.scrollView}
        contentContainerStyle={styles.contentContainer}
      >
        {/* Your content */}
        <View style={styles.container}>
          <Fab
            variant="single"
            icon={<YourIconComponent />} // Custom component for the icon
            onPress={() => console.log('FAB pressed')}
            theme="light" // or "dark"
            style={{ // Optional custom styles
              backgroundColor: '#007AFF'
            }}
          />
          <Text style={styles.content}>Your content here</Text>
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  scrollView: {
    flex: 1,
    marginTop: 60, // Same as header height
  },
  contentContainer: {
    paddingHorizontal: 15,
    paddingTop: 10,
    paddingBottom: 20,
  },
  content: {
    fontSize: 16,
    marginBottom: 15,
    textAlign: 'center',
  },
  item: {
    backgroundColor: 'white',
    padding: 15,
    borderRadius: 8,
    marginBottom: 10,
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 1,
  },
});
Video Tutorial