react-native: components with zIndex in flatlist does not seem to work

Question

The main render:

  render() {
    return (

    <View>
      <FlatList
      ListEmptyComponent={() => <DialogBox type="internet" />}
      ...
    </View>
     );

<DialogBox type="internet" /> container styled via absolute position:

export const dialogBox = EStyleSheet.create({
   container : {
       position: 'absolute',
       justifyContent: 'center',
       alignItems: 'center',
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
       zIndex:10000

   },
   .... 

and DialogBox:

  <View style={dialogBox.container}>
       <View style={dialogBox.box}>
       ...

If I remove absolute form container, It shows. But I want show it in middle of screen (not middle of flatlist).

But why dosen't work zIndex in absolute?

I try change the code to this:

    <View style={{position: 'absolute',zIndex:1}}>
      <FlatList
      style={{position: 'absolute',zIndex:2}}

or this:

    <View style={{position: 'relative'}}>
      <FlatList
      style={{position: 'relative'}}

But it's not work

Answer 1

You can add CellRendererComponent to the FlatList, even simply adding this seems to work:

CellRendererComponent={({children}) => children}

Note: Android will crash unless you add:

removeClippedSubviews={false}