React native Modal box content overflow

Question

I am having the following modal box. Problem is whatever renderContent displays gets overflows visually outside the right boundary of modal box. How to fix it?

  <Modal
        transparent
        animationType="fade"
        visible={this.state.visible}
        onRequestClose={this.hideModal}
   >
        <Container style={styles.overlay}>
          <View style={[styles.container]}>
            { this.renderContent() }
          </View>
        </Container>
  </Modal>


  renderContent = () => {
    return (
      <ShopList
          ref={ref => (this.shopList = ref)}
          loadData={this.props.fetch}
      />
    );
  };

styles

    overlay: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: Colors.overlay,
    },
    container: {
      backgroundColor: Colors.white,
      borderRadius: Metrics.WIDTH * 0.04,
      flexDirection: 'column',
      width: '96%',
    },

score 0 · Answer 1 · answered Aug 12 '19 at 20:03

0

Did you try this?

container: {
      overflow: hidden,
      backgroundColor: Colors.white,
      borderRadius: Metrics.WIDTH * 0.04,
      flexDirection: 'column',
      width: '96%',
    },

If not work, define max and min lengths to width content

answered Aug 12 '19 at 20:03

silvablack

11
1

React native Modal box content overflow

1 Answers1