Iconsistent behavior between Android and iOS: should overlay appear above or under Modal ?

[HectorRicardo]

🐛 Bug Report

There is inconsistent behavior regarding Overlays and Modals in Android and iOS. On Android, the overlay appears below a Modal, while on iOS, it is above the modal. Below there is a reproducible example with some screenshots to make myself clear.

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

1. Install RNN according to the guides. npm i react-native-navigation and npx rnn-link.
2. Create a simple modal and an overlay component. Here is a reproducible example example :

index.js

import {Navigation} from 'react-native-navigation';
import App from './AppWithModal';
import Overlay from './Overlay';

Navigation.registerComponent('App', () => App);
Navigation.registerComponent('Overlay', () => Overlay);

Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      component: {
        name: 'App',
      },
    },
  });

  Navigation.showOverlay({
    component: {
      name: 'Overlay',
      options: {
        layout: {
          componentBackgroundColor: 'transparent',
        },
        overlay: {
          interceptTouchOutside: false,
        },
      },
    },
  });
});

Overlay.js

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

const Overlay = () => {
  return (
    <View style={styles.root}>
      <Text>Hello</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    position: 'absolute',
    height: 100,
    width: 200,
    bottom: 100,
    borderRadius: 10,
    backgroundColor: 'green',
    padding: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default Overlay;

AppWithModal.js

import React, {useState} from 'react';
import {
  Modal,
  SafeAreaView,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
} from 'react-native';

const App = () => {
  const [modalVisible, setModalVisible] = useState(false);
  return (
    <SafeAreaView style={styles.root}>
      <Modal transparent animationType="fade" visible={modalVisible}>
        <SafeAreaView style={styles.fullModalRoot}>
          <View style={styles.modal}>
            <Text style={styles.modalText}>Hello World!</Text>
            <TouchableHighlight
              style={styles.button}
              onPress={() => setModalVisible(!modalVisible)}>
              <Text style={styles.textStyle}>Hide Modal</Text>
            </TouchableHighlight>
          </View>
        </SafeAreaView>
      </Modal>
      <TouchableHighlight
        style={styles.button}
        onPress={() => setModalVisible(true)}>
        <Text style={styles.textStyle}>Show Modal</Text>
      </TouchableHighlight>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  root: {
    flex: 1,
    justifyContent: 'space-evenly',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  fullModalRoot: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
  },
  modal: {
    height: 120,
    padding: 20,
    backgroundColor: 'white',
    justifyContent: 'space-around',
    alignItems: 'center',
    borderRadius: 10,
  },
  button: {
    backgroundColor: 'red',
    borderRadius: 10,
    padding: 10,
  },
  textStyle: {
    color: 'white',
    fontWeight: 'bold',
  },
});

export default App;

Expected behavior

Look at the screenshots below:

Actual Behavior

On Android:

On iOS:

In my opinion, the behavior on Android is correct while the one on iOS isn't.

Your Environment

• React Native Navigation version: 0.63.4
• React Native version: 0.63.4
• Platform(s) (iOS, Android, or both?): Inconsistencies between both platforms

Reproducible Demo

https://github.com/HectorRicardo/bug-rnn-modal-overlay

[danilobuerger]

Duplicate of #6185

[HectorRicardo]

Hey @danilobuerger , thanks for pointing out the duplicate bug!

The original issue says that the bug happens on Android and not on iOS. If this is the case, then my question would be: is it possible to force the overlay to be underneath the modal ? How can I achieve the screenshot below on iOS ?

Thanks

[danilobuerger]

@HectorRicardo just because the OP wrote that its a bug with Android doesn't make it so. There hasn't been a decision made on which behavior is correct. And probably none of us main contributors is going to fix it because it doesn't really make sense to provide support for rn modals as we already have our own modal support.