react-native-paper Modal not hiding all others elements when visible

Question

My modal does not go completely above all the other components under Android but works well under Ios.

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.

Modal not visible (Android & Ios):

Modal visible (Android) button is still visible:

Modal visible (Ios) button is NOT visible:

My component:

<View style={styles.container}>
  <Spinner
    visible={spinner}
    textContent={'Recherche de jardins...'}
    textStyle={styles.spinnerTextStyle}
  />
  <View style={[styles.noThreadContainer, {flex: 5}]}>
    <View style={styles.noThreadView}>
      <Title style={styles.noThreadTitle}>
        Personne autour de vous à {toKm(finalDistance)} km
      </Title>
      <Button icon="map-marker-distance" mode="contained" onPress={showModal}>
        Modifier la distance
      </Button>
    </View>
  </View>
  <SliderModal style={{flex: 1}} />
</View>;

SliderModal:

const SliderModal = () => {
  const minValue = 5000;
  const maxValue = 200000;
  const [kmValue, setKmValue] = useState(finalDistance || 5000);
  return (
    <Provider>
      <Portal>
        <Modal
          visible={visible}
          dismissable={false}
          onDismiss={hideModal}
          contentContainerStyle={styles.sliderContainer}>
          <Title style={{alignSelf: 'center', marginBottom: 40}}>
            Modifier la distance
          </Title>
          <View style={styles.kmContainer}>
            <Text>{toKm(minValue)} km</Text>
            <Title>{toKm(kmValue)} km</Title>
            <Text>{toKm(maxValue)} km</Text>
          </View>
          <Slider
            onValueChange={setKmValue}
            value={finalDistance}
            step={5000}
            style={styles.slider}
            minimumValue={minValue}
            maximumValue={maxValue}
            minimumTrackTintColor="brown"
            maximumTrackTintColor="#77DD77"
          />
          <View style={[styles.kmContainer, styles.buttonContainer]}>
            <Button color="brown" onPress={hideModal}>
              Fermer
            </Button>
            <Button
              labelStyle={{color: 'white'}}
              color="#77DD77"
              mode="contained"
              onPress={() => {
                hideModal();
                setFinalDistance(kmValue);
              }}>
              Valider
            </Button>
          </View>
        </Modal>
      </Portal>
    </Provider>
  );
};

StyleSheet:

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',
    },
  });

Answer 1

Use react-native-modal Modal instead of react-native-paper Modal. The problem will gone after.

> npm i react-native-modal

import Modal from 'react-native-modal';

Close the server and re-run commmand

> npm run android

Or

> npx react-native run-android

Answer 2

Just before button add !visible, like this:

 { !visible && <Button icon="map-marker-distance" mode="contained" onPress={showModal}>
                  Modifier la distance
                </Button>
 }