Floating Action Button with FlatList in React Native

Full code for creating Floating Action Button along with FlatList in React Native

The FAB can be created above the FlatList component to do certain task. So we are creating a app to display a floating action button on top of the FlatList. You can run the final app in both iOS and android using Expo Snack at https://snack.expo.io/@ajmalpkc/floating-action-button-with-flatlist.

The app will run on both react native project with expo and native code. You can also create this floating action button with other react native components

So first we create a basic container with heading for our App and import required react native components:

App.js

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

export default class FAB extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View style={styles.container}>
      
        <View style={styles.heading}>
          <Text style={styles.headingTest}>FAB with FlatList</Text>
        </View>

      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  heading: {
    height: 60,
    backgroundColor: '#03A9F4',
    alignItems: 'center',
    justifyContent: 'center',
  },
  headingTest: {
    fontSize: 20,
    color: 'white',
    fontWeight: 'bold',
  },
});

Next we will create a FlatList component with few sample data's as below

App.js

export default class FAB extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      data: [ 
        { name: 'John', age: 18 }, 
        { name: 'Lilli', age: 23 }, 
        { name: 'Lavera', age: 46 }, 
        { name: 'Paul', age: 32 }, 
        { name: 'Jene', age: 14 }, 
        { name: 'Felipe', age: 42 }, 
        { name: 'Shawn', age: 26 }, 
        { name: 'Carey', age: 24 }, 
        { name: 'Mark', age: 33 } 
      ] 
    }
  }

  render() { 
    const { data } = this.state; 
    return ( 
      <View style={styles.container}>
        ...
        ...        
        <FlatList 
          data={data} 
          renderItem={({ item }) => <View style={styles.list}> 
            <Text>Name : {item.name}</Text> 
            <Text>Age : {item.age}</Text> 
          </View>} 
        />
      </View>
    )
  }
}
const styles = StyleSheet.create({ 
  ...
  ... 
  list: { 
    margin: 5, 
    backgroundColor: 'white', 
    height: 80, 
    justifyContent: 'space-around', 
    paddingLeft: 10, 
    elevation: 1 
    },
});

Finally lets add FAB button using TouchableOpacity and Text component of react native

App.js

export default class FAB extends Component {
  ...
  ...

  render() { 
    const { data } = this.state; 
    return ( 
      <View style={styles.container}>
        ...
        ...
        <TouchableOpacity onPress={() => alert('FAB clicked')} style={styles.fab}>
          <Text style={styles.fabIcon}>+</Text>
        </TouchableOpacity>
      </View>
    )
  }
}
const styles = StyleSheet.create({ 
  ...
  ...
  fab: { 
    position: 'absolute', 
    width: 56, 
    height: 56, 
    alignItems: 'center', 
    justifyContent: 'center', 
    right: 20, 
    bottom: 20, 
    backgroundColor: '#03A9F4', 
    borderRadius: 30, 
    elevation: 8 
    }, 
    fabIcon: { 
      fontSize: 40, 
      color: 'white' 
    }
});

Screenshot for both android and ios

FAB Button in Android and iOS

You can get final complete code at Expo Snack and can run on device using expo client at https://snack.expo.io/@ajmalpkc/floating-action-button-with-flatlist.