title: react-native-paper Modal not hiding all others elements when visible
body: <p>My modal does not go completely above all the other components under Android but works well under Ios.</p>
  <p>I tried to change hierarchy of my components, play with zIndex and absolute position but my green button is always visible but not touchable when modal show up.</p>
  <p><strong>Modal not visible (Android &amp; Ios):</strong></p>
  <p><a href="https://i.stack.imgur.com/tklnHm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tklnHm.png" alt="Modal not visible (Android &amp; Ios)" /></a></p>
  <p><strong>Modal visible (Android) <em>button is still visible</em>:</strong></p>
  <p><a href="https://i.stack.imgur.com/j7kLtm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/j7kLtm.png" alt="Modal visible (Android)" /></a></p>
  <p><strong>Modal visible (Ios) <em>button is NOT visible</em>:</strong></p>
  <p><a href="https://i.stack.imgur.com/iDV3Zm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iDV3Zm.png" alt="Modal visible (Ios)" /></a></p>
  <p>My component:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;View style={styles.container}&gt;
    &lt;Spinner
      visible={spinner}
      textContent={'Recherche de jardins...'}
      textStyle={styles.spinnerTextStyle}
    /&gt;
    &lt;View style={[styles.noThreadContainer, {flex: 5}]}&gt;
      &lt;View style={styles.noThreadView}&gt;
        &lt;Title style={styles.noThreadTitle}&gt;
          Personne autour de vous à {toKm(finalDistance)} km
        &lt;/Title&gt;
        &lt;Button icon=&quot;map-marker-distance&quot; mode=&quot;contained&quot; onPress={showModal}&gt;
          Modifier la distance
        &lt;/Button&gt;
      &lt;/View&gt;
    &lt;/View&gt;
    &lt;SliderModal style={{flex: 1}} /&gt;
  &lt;/View&gt;;
  
  </code></pre>
  <p>SliderModal:</p>
  <pre class="lang-js prettyprint-override"><code>const SliderModal = () =&gt; {
    const minValue = 5000;
    const maxValue = 200000;
    const [kmValue, setKmValue] = useState(finalDistance || 5000);
    return (
      &lt;Provider&gt;
        &lt;Portal&gt;
          &lt;Modal
            visible={visible}
            dismissable={false}
            onDismiss={hideModal}
            contentContainerStyle={styles.sliderContainer}&gt;
            &lt;Title style={{alignSelf: 'center', marginBottom: 40}}&gt;
              Modifier la distance
            &lt;/Title&gt;
            &lt;View style={styles.kmContainer}&gt;
              &lt;Text&gt;{toKm(minValue)} km&lt;/Text&gt;
              &lt;Title&gt;{toKm(kmValue)} km&lt;/Title&gt;
              &lt;Text&gt;{toKm(maxValue)} km&lt;/Text&gt;
            &lt;/View&gt;
            &lt;Slider
              onValueChange={setKmValue}
              value={finalDistance}
              step={5000}
              style={styles.slider}
              minimumValue={minValue}
              maximumValue={maxValue}
              minimumTrackTintColor=&quot;brown&quot;
              maximumTrackTintColor=&quot;#77DD77&quot;
            /&gt;
            &lt;View style={[styles.kmContainer, styles.buttonContainer]}&gt;
              &lt;Button color=&quot;brown&quot; onPress={hideModal}&gt;
                Fermer
              &lt;/Button&gt;
              &lt;Button
                labelStyle={{color: 'white'}}
                color=&quot;#77DD77&quot;
                mode=&quot;contained&quot;
                onPress={() =&gt; {
                  hideModal();
                  setFinalDistance(kmValue);
                }}&gt;
                Valider
              &lt;/Button&gt;
            &lt;/View&gt;
          &lt;/Modal&gt;
        &lt;/Portal&gt;
      &lt;/Provider&gt;
    );
  };
  </code></pre>
  <p>StyleSheet:</p>
  <pre class="lang-js prettyprint-override"><code>const styles = StyleSheet.create({
      container: {
        flex: 1,
      },
      sliderContainer: {backgroundColor: 'white', padding: 20},
      slider: {width: '100%', height: 40},
      kmContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
      },
      buttonContainer: {
        marginTop: 30,
      },
      noThreadView: {
        alignSelf: 'center',
        justifyContent: 'center',
        width: width * 0.8,
      },
      noThreadContainer: {
        flex: 1,
        alignContent: 'center',
        justifyContent: 'center',
      },
      noThreadTitle: {
        marginBottom: 15,
        alignSelf: 'center',
      },
      spinnerTextStyle: {
        color: '#FFF',
      },
    });
  </code></pre>