Stretch height to fit content in react native

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

Answer 1

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>

Answer 2

This is just a guess but how about you give paddingTop a value of 0 and see how that works out. Remove the generic padding you have and specify it exactly using paddingLeft, paddingRight, paddingBottom according to the style you want to achieve.

Hopefully, that helps some bit