Why am I not able to press the button on iOS?

Question

I have a button that I need displayed on top of another element in React Native. I have given the button a position of "absolute" and a flex: 1, and it works and looks beautiful on android, but on iOS, it doesn't let the user click the button. Is there something I am missing?

The element that the button needs to be on top of is a video player, which the user also needs to be able to click to pause/play.

Here are the elements:

 <VideoPlayer
          shouldPlay={true}
          useNativeControls={true}
          resizeMode={"contain"}
          source={{
            uri:
              "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
          }}
          style={styles.video}
        />
        <View style={styles.exitButton}>
          <ExitButton onPress={backNavigation} />
        </View>

Here are the styles:

  exitButton: {
    position: "absolute",
    alignItems: "flex-end",
    justifyContent: "flex-end",
    flex: 1,
    width: "100%",
    paddingBottom: 250
  },
  video: {
    height: "100%",
    width: "100%",
    flex: 2
  },

Answer 1

Try adding zIndex in style like below

exitButton: {
    position: "absolute",
    alignItems: "flex-end",
    justifyContent: "flex-end",
    flex: 1,
    width: "100%",
    paddingBottom: 250,
    zIndex: 1
  }

Answer 2

zIndex will help you to add your button on top of the current layer. You can give any positive number in index.

Also, add some height as well. As if you have a smaller image, then its very small touchable area.

You can get more info on this document .

exitButton: {
    position: "absolute",
    alignItems: "flex-end",
    justifyContent: "flex-end",
    height: 50,
    width: "100%",
    paddingBottom: 250
  },