Answer a question

I want to change the height of the modal to fit to the content. It always just goes to the height of the screen:

jsx:

  <Modal style={styles.modal}
    isVisible={props.categories.some(x => showModal(x))}>
    <Container style={styles.modalView}>
      <Header style={styles.header}>
        <Left>
          <Title 
            style={styles.title}>{getDisplayedCategoryLabel(props.categories)}
          </Title>
        </Left>
        <Right>
          <Button 
            small 
            transparent 
            danger 
            rounded 
            icon 
            onPress={() => props.setAllShowSubcategoriesToFalse()}>
            <Icon name="times" size={20} color='#9E9E9E' />
          </Button>
        </Right>
      </Header>
      <Content >
        <SelectMultiple
          labelStyle={styles.label}
          items={getDisplaySubcategories(props.categories)}
          selectedItems={
            props.categories.filter(category => category.selected)
          }
          onSelectionsChange={props.toggleSubcategory} />
      </Content>
    </Container>
  </Modal>

styles:

    const styles = {
  modalView: {
    flex: 1,
    backgroundColor: '#FFFFFF',
    padding: 20,
    borderRadius: 8,
    height: 100
  },
  modal: {
    padding: 10,
    height: 100
  }
    }

Changing the height of modal style doesn't do anything. I can't seem to change the height at all. What should I be doing to affect the height?

I'm using react-native-modal

Answers

How about something like:

 <Modal transparent>
   <View style={{ flex: 1, alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.5)' }}>

     {/* fill space at the top */}
     <View style={{ flex: 1, justifyContent: 'flex-start' }} />


     <View style={{ flex: 1, backgroundColor: 'white' }}>
       {/* content goes here */}
     </View>

     {/* fill space at the bottom*/}
     <View style={{ flex: 1, justifyContent: 'flex-end' }} />
   </View>
 </Modal>