Hot to overlap button on react-native flatlist?

Question

I am working with a react-native flatlist, desgining a mobile screen. I would like to overlap a simple button (like a 'plus' button) over the list, at the bottom right. That button will add or remove items from the list. Given a flatlist, how can I overlap a button?

Render snippet code:

 render(){return ( <View style={styles.feed_list}> <FlatList data={this.state.data} keyExtractor={this._keyExtractor} renderItem={({item}) => ( <ListItem ... /> )} /> </View> ); } 

Expected behavior:

Answer 1

I found the solution simply adding a component and fixing its absolute position, inside the general view. For example:

render() {return (
            <View style={styles.feed_list}>

                <FlatList
                    refreshControl={ <RefreshControl refreshing={this.state.refreshing} onRefresh={this._onRefresh} />}
                    data={this.state.data}
                    keyExtractor={this._keyExtractor}
                    renderItem={({item}) => {

                        ...     })            
                />
            <TouchableOpacity
                style={{
                    borderWidth:1,
                    borderColor:'rgba(0,0,0,0.2)',
                    alignItems:'center',
                    justifyContent:'center',
                    width:70,
                    position: 'absolute',                                          
                    bottom: 10,                                                    
                    right: 10,
                    height:70,
                    backgroundColor:'#fff',
                    borderRadius:100,
                }}
                >
                <Icon name="plus"  size={30} color="#01a699" />
            </TouchableOpacity>
            </View>
        );
}

Answer 2

you can use react-native-action-button library for this.

check out here

It is easy to use and you don't need to apply any extra style for set the button

here is the example

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import ActionButton from 'react-native-action-button';
import Icon from 'react-native-vector-icons/Ionicons';


class App extends Component {

  render() {
    return (
      <View style={{flex:1, backgroundColor: '#f3f3f3'}}>
        {/* Rest of the app comes ABOVE the action button component !*/}
        <ActionButton buttonColor="rgba(231,76,60,1)">
          <ActionButton.Item buttonColor='#9b59b6' title="New Task" onPress={() => console.log("notes tapped!")}>
            <Icon name="md-create" style={styles.actionButtonIcon} />
          </ActionButton.Item>
          <ActionButton.Item buttonColor='#3498db' title="Notifications" onPress={() => {}}>
            <Icon name="md-notifications-off" style={styles.actionButtonIcon} />
          </ActionButton.Item>
          <ActionButton.Item buttonColor='#1abc9c' title="All Tasks" onPress={() => {}}>
            <Icon name="md-done-all" style={styles.actionButtonIcon} />
          </ActionButton.Item>
        </ActionButton>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  actionButtonIcon: {
    fontSize: 20,
    height: 22,
    color: 'white',
  },
});