jeremybarbet/react-native-modalize

how to let modalize cover safeareaview in android ?

alainib opened this issue · 1 comments

Describe the bug
i didn't found a way to let Modalize to cover safearea or camera notch on Android, it work on IOS

Reproduce

Capture d’écran 2024-06-05 à 11 54 09

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

 <Portal>
      <Modalize
        HeaderComponent={
          <HeaderContainer>
            <SponsorshipSVGContainer>
              <SponsorshipSVG />
            </SponsorshipSVGContainer>
            <TopCloseButton onPress={onClose} />
          </HeaderContainer>
        }
        modalTopOffset={0}
        modalHeight={windowHeight}
        modalStyle={{
            backgroundColor: theme.colors.blue,
            borderTopLeftRadius: 30,
            borderTopRightRadius: 30,
        }}
        childrenStyle={ {
             borderTopLeftRadius: 30,
             borderTopRightRadius: 30,
             backgroundColor: theme.colors.white,
             paddingHorizontal: 30,
             paddingTop: 30,
         }}
        withHandle={false}
        scrollViewProps={{
          keyboardShouldPersistTaps: 'handled',
          showsVerticalScrollIndicator: false,
        }}
        ref={modalizeRef}>
        {renderContent()}
      </Modalize>
    </Portal>
    
    
  const HeaderContainer = styled.View`
      width: ${windowWidth}px;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      height: 200px;
`;

Dependencies:

  • react-native-modalize ^2.1.1
  • react-native 0.73.5
  • react-native-gesture-handler ~2.15.0
  • @react-navigation/bottom-tabs ^6.5.12
  • @react-navigation/material-top-tabs ^6.6.6
  • @react-navigation/native 6.1.10
  • @react-navigation/stack. 6.3.21

edit founded a way
i was using the wrong dimensions

const {height: windowHeight, width: windowWidth} = Dimensions.get('screen');