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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ajmalpkc.gitbook.io/floating-action-button-with-flatlist/master.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.