Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Not clear how to use scrollOffsetMax

See original GitHub issue

First, thank you really much for this nice component.

After looking at the Readme, the examples and the issues mentioning it, I’m still not sure to understand what scrollOffsetMax exactly does and what value I should set.

I’m trying to implement a modal with a scrollable content + drag-down to dismiss feature: it’s working pretty well except for one thing.

When my scrollview is scrolled at the top and I tried to scroll to the bottom of it, it feels like there is an “invisible force” always bringing to scroll view to the top. If I scroll a lot, then this force stops and I manage to properly scroll within my view.

When I place a few logs, I’ve noticed that the “weird” behavior is always happening when the scrollTo callback is called. After a while, it’s not called anymore and everything goes smoothly.

Here’s my implementation:

const MyModal: React.FC<Props> = ({ isOpen, onClose }) => {
  const { data } = useData()

  const [scrollOffset, setScrollOffset] = React.useState(0)
  const scrollViewRef = React.useRef<ScrollView | null>(null)

  const handleOnScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
    setScrollOffset(event.nativeEvent.contentOffset.y)
  }

  const handleScrollTo = (p: any) => {
    if (p.y > 0) {
      scrollViewRef.current?.scrollTo(p)
    }
  }

  return (
    <Modal
      isVisible={isOpen}
      onBackButtonPress={onClose}
      onSwipeComplete={onClose}
      swipeDirection={['down']}
      propagateSwipe
      scrollTo={handleScrollTo}
      scrollOffset={scrollOffset}
    >
      <View style={styles.root}>
        <ScrollView ref={scrollViewRef} onScroll={handleOnScroll} scrollEventThrottle={16}>
          {data && (
            <HTML
              html={data}
              baseFontStyle={{
                fontSize: 16,
              }}
              classesStyles={{
                underline: { textDecorationLine: 'underline' },
              }}
            />
          )}
        </ScrollView>
      </View>
    </Modal>
  )
}

This is on Android, I need to check on iOS.

Issue Analytics

State:
Created 3 years ago
Reactions:2
Comments:10 (1 by maintainers)

Top GitHub Comments

2reactions

dharshatharancommented, Jan 10, 2021

The following code seemed to give me smooth scrolling. I added a TouchableOpacity component inside the scroll view.

  handleOnScroll = (event: any) => {
    this.setState({
      scrollOffset: event.nativeEvent.contentSize.height - event.nativeEvent.layoutMeasurement.height,
    });
  };

            <ScrollView
              ref={this.scrollViewRef}
              onScroll={this.handleOnScroll}
              scrollEventThrottle={16}>
              <TouchableOpacity activeOpacity={1}>
                <View style={styles.scrollableModalContent1}>
                  <Text style={styles.scrollableModalText1}>
                    You can scroll me up! 👆
                  </Text>
                </View>
                <View style={styles.scrollableModalContent2}>
                  <Text style={styles.scrollableModalText2}>
                    Same here as well! ☝
                  </Text>
                </View>
              </TouchableOpacity>
            </ScrollView>

2reactions

papigerscommented, Apr 19, 2020

As far as I understand it the maxScrollOffset value should be the difference between the height of the scroll view content and, the height of the scroll view wrapper (not necessary parent, but the element that limits the height of the scroll view). This can be easily calculated here:

  const onScroll = React.useCallback((e) => {
    setScrollOfsset(e.nativeEvent.contentOffset.y);
    setMaxScrollOfsset(
      e.nativeEvent.contentSize.height - e.nativeEvent.layoutMeasurement.height,
    );
  }, []);

That being said, I’m still not getting the wanted result. It seemed that sometimes the scroll view content loses focus and swiping just causes the modal to swipe.