Height of modal being ignored by android

Hey @maxs15!

Thank you for building such an amazing component.

It's working perfectly on iOS right now. For some strange reason, it's not working on android though. Specifically, it's just ignoring the heights and filling the screen no matter what.

I've tried adding and removing flexes, widths, heights, margins, but nothing seems to work at all.

Here is what it looks right now on both devices.

It seems that if I remove the flex and try and just add margin, then it just ignores it on the right and bottom. Any idea why this might be?

Here is my code:

const FilterModal = ({ visible, valueChange, falseSwitchIsOn, onClosed }) => {
  return (
      <Modal
        isOpen={visible}
        backdropPressToClose
        entry={'top'}
        style={styles.containerStyle}
        onClosed={onClosed}
      >
        <View style={styles.modalTitle}>
          <Text style={styles.titleStyle}>Filter Feed</Text>
        </View>
        <TopicList />
        <View style={styles.uniButtonContainer}>
          <Text style={styles.uniTextStyle}>
            Just my university?
          </Text>
          <Switch
            onValueChange={valueChange}
            value={falseSwitchIsOn}
            style={{ marginLeft: 7 }}
          />
        </View>
      </Modal>
  );
};

const styles = {
  containerStyle: {
    flex: 1,
    backgroundColor: 'white',
    borderRadius: 6,
    flexDirection: 'column',
    justifyContent: 'space-between',
    width: Dimensions.get('window').width * 0.95,
    marginBottom: 40,
    elevation: 5
  },
  uniButtonContainer: {
    backgroundColor: 'white',
    height: 60,
    borderTopWidth: 1,
    borderBottomLeftRadius: 6,
    borderBottomRightRadius: 6,
    borderColor: '#D8D8D8',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
    elevation: 1
  },
  uniTextStyle: {
    color: Colors.mainDarkText,
    fontFamily: medium,
    fontSize: fontSize.eighteen,
    marginRight: 7
  },
  modalTitle: {
    backgroundColor: 'white',
    height: 60,
    borderTopLeftRadius: 6,
    borderTopRightRadius: 6,
    borderBottomWidth: 1,
    borderColor: '#D8D8D8',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
    elevation: 1
  },
  titleStyle: {
    color: Colors.mainPurple,
    fontFamily: demiBold,
    paddingTop: 7,
    fontSize: fontSize.twenty
  }
};

Thank you!

Reproduce the Android modal using the supplied FilterModal component and containerStyle, comparing its behavior with iOS. Start by tracing the Modal component's Android layout and sizing handling. Done means the configured width and height-related spacing are honored on Android without filling the screen.