> For the complete documentation index, see [llms.txt](https://ajmalpkc.gitbook.io/floating-action-button-with-flatlist/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ajmalpkc.gitbook.io/floating-action-button-with-flatlist/master.md).

# Floating Action Button with FlatList in React Native

![](/files/-LCS0pqX7-RMeCciDI4o)

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>.

{% hint style="info" %}
&#x20;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
{% endhint %}

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

{% code title="App.js" %}

```jsx
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',
  },
});

```

{% endcode %}

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

{% code title="App.js" %}

```jsx
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 
    },
});

```

{% endcode %}

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

{% code title="App.js" %}

```jsx
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' 
    }
});

```

{% endcode %}

Screenshot for both android and ios

![FAB Button in Android and iOS](/files/-LCjIvPyQChIFKd9LjOU)

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>.