Saturday, May 21, 2022
HomeiOS Developmentjavascript - Scrollview with react-native-modals shouldn't be working correctly on IOS

javascript – Scrollview with react-native-modals shouldn’t be working correctly on IOS


I have an issue with scroll view inside Swipe model using react-native-modals. The problem is in Android the scrolling is smooth and working perfectly. However, with iOS scrolling is with short amount only it scrolls for tiny amount then it stops meaning i have to repeat scrolling for 10 times over the screen to view the bottom with small contents only. This is the code for the model.

 <Modal
propagateSwipe={true}
visible={this.props.visible}
useNativeDriver={true}
modalAnimation={
  new SlideAnimation({
    initialValue: 0, // optional
    slideFrom: 'bottom', // optional
    useNativeDriver: false, // optional
  })
}
style={stylesSwipeCard.modal}
rounded={true}
modalStyle={[
  stylesSwipeCard.customModal,
  this.props.customModalStyle,
  {maxHeight: height * this.props.height},
]}
onTouchOutside={() => this.props.closeModal(false)}
swipeDirection={['down']} // can be string or an array
swipeThreshold={100} // default 100
onSwipeOut={(event) => {
  this.props.closeModal(false);
}}
containerStyle={stylesSwipeCard.modalContainer}
footer={this.props.hasFooter && this.props.footerContent}>
<ModalContent style={stylesSwipeCard.modalContent}>
  <View
    style={[stylesSwipeCard.container, this.props.modalContainerStyle]}>
    <Image source={line_swipe} style={{alignSelf: 'center'}} />

    <ScrollView>
      <TouchableHighlight>
        <TouchableWithoutFeedback>
          <View>{this.props.children}</View>
        </TouchableWithoutFeedback>
      </TouchableHighlight>
    </ScrollView>
  </View>
</ModalContent>

Screenshot of modal content

I would appreciate any help or suggestions 😄. Thanks

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments