React Native 浮动操作按钮 Touchable 不起作用

Question

I have a FlatList and FAB on screen. FAB is positioned absolute. whenever I try to click on FAB a FlatList item behind fab gets clicked.

When I remove the position absolute FAB works, I tried wrapping touchable inside View and also tried changing the view order but nothing worked

Attaching the screenshot

Note: it's working on iOS but Not on Android

import React from "react";
import {
  View,
  Text,
  FlatList,
  StyleSheet,
  Platform,
  Image,
  TouchableOpacity
} from "react-native";
import RF from "react-native-responsive-fontsize";
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp
} from "react-native-responsive-screen";

import AddIcon from "../../libs/fabActions/AddIcon";

export default class TemplateScreen extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
    };
  }

  keyExtractor = (item, index) => {
    return index.toString();
  };

  renderItem = ({ item, index }) => {
    const { navigate } = this.props.navigation;

    return (
      <TouchableOpacity>
        <View style={styles.item}>
          <Text style={styles.name}>Christmas Template</Text>
        </View>
      </TouchableOpacity>
    );
  };

  render() {
    const { navigate } = this.props.navigation;

    return (
      <View style={styles.container}>
        <FlatList
          contentContainerStyle={styles.list}
          data={this.state.data}
          extraData={this.state}
          renderItem={this.renderItem}
          keyExtractor={this.keyExtractor}
        />

          <TouchableOpacity>
            <View style={styles.addButton}>
              <AddIcon width={wp(4)} height={wp(4)} />
            </View>
          </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f0f2ff"
  },
  item: {
    backgroundColor: "#ffffff",
    marginHorizontal: "4%",
    marginVertical: "1.2%",
    paddingHorizontal: "4.5%",
    paddingVertical: "5%",
    ...Platform.select({
      ios: {
        shadowColor: "rgba(71, 75, 165, 0.1)",
        shadowOffset: {
          width: 0,
          height: 1
        },
        shadowRadius: 9.7,
        shadowOpacity: 1
      },
      android: {
        elevation: 1
      }
    })
  },
  name: {
    fontSize: RF(2.3),
    color: "#474ba5"
  },
  addButton: {
    position: "absolute",
    bottom: 20,
    right: 30,
    width: 46,
    height: 46,
    backgroundColor: "#ffffff",
    borderRadius: 46,
    alignContent: "center",
    justifyContent: "center",
    zIndex: 10,
    ...Platform.select({
      ios: {
        shadowColor: "rgba(71, 75, 165, 0.1)",
        shadowOffset: {
          width: 0,
          height: 1
        },
        shadowRadius: 9.7,
        shadowOpacity: 1
      },
      android: {
        elevation: 4
      }
    })
  },
  list: {
    paddingBottom: hp(8),
    paddingTop: "2%"
  }
});

Answer 1

the thing to understand is in Android if the absolute positioned button is outside its parent it will not catch events. You can verify this hypothesis by making a square view and float the button in such a way that half of it is outside that view, and the other half is inside the view. when u click on the half that is inside the parent view, the event will trigger; but if u click on the half outside the parent view it will not work.

so the conclusion is to always make sure that the button is inside the parent view. in the case of floating action button, if u want it to work u need to hook it up to the root view of the screen, or in other words it should be a direct child of the root view of the screen. sure u will make it last child also to not be hidden. this way u will be sure it always inside the parent view. another things to look to is if u create a project in android studio say to make native app, and u select the option with floating action button, u will see that the FAB is a direct child of the ConstraintLayout container which validate what I'm saying here.

In The case provided in the question the TouchableOpacity who needs to be positioned absolutely not the view inside it