Source:  Twitter logo

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

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>
7 users liked answer #0dislike answer #07
Dan Chenier profile pic
Dan Chenier

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

1 users liked answer #1dislike answer #11
Chiamaka Nwolisa profile pic
Chiamaka Nwolisa

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).