React Native ScrollView within Overlay not scrolling

Question

I'm using the Overlay component from react-native-elements which is supposed to be built over the underlying react-native Modal component. I have tried to place a simple ScrollView within the Overlay but the content just renders till the end of the Overlay and truncates the rest of it.

I suspect it might be a style issue but I have looked through all the possible props without luck.

<Overlay style={{height: height - 20, width: width}}>
<ScrollView>
... Content longer than screen ...
</ScrollView>
</Overlay>

ScrollView is working fine for the content which longer than screen. I think the way that you handling style is wrong. could you share your source code — SDushan, Jan 21 '20 at 06:10

score 0 · Answer 1 · answered Jul 16 '20 at 19:17

I also have faced the same issue. using the below code.

<Overlay
    isVisible={this.props.visible}
    onBackdropPress={this.props.onClose}
    overlayStyle={styles.overlayStyle}>
      <ScrollView contentContainerStyle={{flex:1}}>
          ... Content longer than screen ...
      </ScrollView>
</Overlay>

I solved this by removing the flex:1 from the contentContainerStyle props. Working code

<Overlay
    isVisible={this.props.visible}
    onBackdropPress={this.props.onClose}
    overlayStyle={styles.overlayStyle}>
      <ScrollView>
          ... Content longer than screen ...
      </ScrollView>
</Overlay>

React Native ScrollView within Overlay not scrolling

1 Answers1