Toast on iOS is under Modal

[sapjax]

Toast on iOS (Also existed in previous versions.) is rendered under react-navigation modal

[sapjax]

I found that the presentation option of react-navigation Modal must be containedModal or containedTransparentModal, otherwise the modal is on top of everything, I think this is an issue about react-navigation, so just close it.

[sekizlipenguen]

I ask you to add the following parameter and try it, if the solution is provided, let's add this code

toast.js

zIndex:99999

  toast: {
    position: 'absolute',
    width: '100%',
    alignSelf: 'center',
    borderRadius: 0,
    shadowColor: defaultBackgroundColor,
    alignItems: 'center',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
    flexDirection: 'row',
    borderWidth: 0,
    zIndex:99999
  },

[sapjax]

I ask you to add the following parameter and try it, if the solution is provided, let's add this code

toast.js

zIndex:99999

  toast: {
    position: 'absolute',
    width: '100%',
    alignSelf: 'center',
    borderRadius: 0,
    shadowColor: defaultBackgroundColor,
    alignItems: 'center',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
    flexDirection: 'row',
    borderWidth: 0,
    zIndex:99999
  },

zIndex has no effect, the modal is over everything, there should be a solution on react-navigation side, if I find it, I'll update this issue.

[sapjax]

Hi @sekizlipenguen I found a solution at https://github.com/software-mansion/react-native-screens/issues/525 and use the fullwindowoverlay wrapped the Toast instance in Root.js can display toast on top of the native modal on iOS.

import React, {Component} from 'react';
import {Dimensions} from 'react-native';

import PropTypes from 'prop-types';
import Popup from './Popup';
import Toast from './Toast';
import SPSheet from './SPSheet';
import { FullWindowOverlay } from 'react-native-screens'    // <= added

const {width, height} = Dimensions.get('window');

class Root extends Component {
    render() {
        return (
            <>
                {this.props.children}
                <Popup
                    ref={c => {
                        if (c) {
                            Popup.popupInstance = c;
                        }
                    }}
                />
                <FullWindowOverlay>      // <= added
                    <Toast
                        ref={c => {
                            if (c) {
                                Toast.toastInstance = c;
                            }
                        }}
                    />
                </FullWindowOverlay>
                <SPSheet
                    ref={c => {
                        if (c) {
                            SPSheet.spsheetInstance = c;
                        }
                    }}
                />
            </>
        );
    }
}

Root.propTypes = {
    style: PropTypes.oneOfType([
        PropTypes.object,
        PropTypes.number,
        PropTypes.array
    ])
}

export default Root