CODEWITHSUNDEEP
androidreactjsreact-native
Martin Kjellberg
Martin Kjellberg

Reputation: 615

Can't get popup with position absolute to work on android

I am having big problems with zIndex and positioning using React Native. I have View that contains the main app, from the root component I have a popup that can be activated through redux. On iOS everything works great (with the zIndex) however on Android it completely breaks.

The popup is placed above the main view but I can still drag and interact with the view below.

https://www.dropbox.com/s/7cjajxl5ctwkdph/Video%202019-01-30%2014%2018%2008.mov?dl=0

See in the video above the behavior.

The video below shows expected behavior: https://www.dropbox.com/s/vx7sr3j4dw7igh9/Video%202019-01-30%2014%2029%2020.mp4?dl=0

Any ideas on how to fix this? I am using elevation and zIndex. Even tried setting zIndex to 0 for android but didn't change anything.

Main View:

<View style={{flex: 1}}>
  { props.showPopUp ?
    <PopupMain payload={props.popUpPayload} /> :
    null
  }
  <AppContainerCreator
    style={{zIndex:0, elevation:0, position:'absolute', width:'100%', height:'100%', bottom:0,top:0,left:0,right:0}}
    persistenceKey={props.persistenceKey}
    processNavigation={props.processNavigation}
    screenProps={props.screenProps}
    ref={navigatorRef => props.setNavRef(navigatorRef)}
  />
</View>

PopupMain:

<View style={{
    position:'absolute',
    width:'100%',
    height:'100%',
    bottom:0,
    top:0,
    right:0,
    overflow:'visible',
    left:0,
    zIndex:1,
    elevation:1
  }}>
    <Animated.View style={{
      position:'absolute',
      width:'100%',
      height:'100%',
      bottom:0,
      top:0,
      right:0,
      left:0,
      elevation:2,
      backgroundColor:'#000',
      opacity:this.state.opacityAnimation,
      zIndex:2
    }}>
    </Animated.View>
    <Animated.View
      style={{
        position: 'absolute',
        width: '93%',
        height: '93%',
        bottom:!this.state.animating ? this.state.offset : this.state.offsetAnimation,
        elevation:3,
        zIndex:3,
        left:'3.5%',
        opacity:1,
        backgroundColor:'white',
        borderTopLeftRadius: 20,
        borderTopRightRadius: 20,
        overflow:'hidden'
      }}
      >
        <View style={{height:60, width:'100%'}}>
          {header}
        </View>
        <ScrollView
          style={{width:'100%', height:(Dimensions.get('window').height * 0.93) - 60, overflow:'hidden', zIndex:4, elevation:4, left:0, right:0, bottom:0}}
          alwaysBounceVertical={true}
          onScroll={this.handleScroll}
          scrollEventThrottle={8}
        >
          {popup}
        </ScrollView>
    </Animated.View>
  </View>
);

Also for some reason the content inside popup is not showing on android either. It is hidden behind the view.

All elements are positioned the correct way except for the content inside the scrollview that is hidden. However I can still interact with the views below.

On iOS everything works exactly as expected.

Thanks in advance!

Upvotes: 0

Views: 696

Answers (1)

RegularGuy
RegularGuy

Reputation: 3676

yeah absolute requires some handling of the events in the views that are below...

Don't make your life difficult, the recommended if you want to block the background ui is to use a modal. React native has a modal component build in, but there is also the react-native-modal module, wich has all animations of react-native-animatable built in, swipe to dismiss support, and more ;) i use it for popups, desplegable menus, sometimes even custom alerts and dropdown pickers

Upvotes: 1

Related Questions