ScrollView doesn't keep track of current position. When tapped it resets back to previous location

Question

Steps of the problem: 1: Scroll down page from location x 2: Page Scrolls to location y 3: Release finger 4: User taps finger again to continue scrolling 5: Location on the ScrollView resets back to location x causing a jump back and prevents further scrolling

I've tried to look up information regarding react-native-modal and ScrollView to find the issue & can't find any occurrences of this

Library-in-use: react-native-modal

scrollOffset: 0  
scrollViewRef

handleScrollTo = p => {
  if (this.scrollViewRef) {
    this.scrollViewRef.scrollTo(p);
  }
};

    <Modal
      isVisible={this.state.visibleModal}
      onSwipeComplete={() => this.setState({ visibleModal: false })}
      swipeDirection="down"
      scrollTo={this.handleScrollTo}
      scrollOffset={this.state.scrollOffset}
      scrollOffsetMax={400 - 300} // content height - ScrollView height
      style={screenStyles.bottomModal}
      useNativeDriver
    >
      {this._renderModalContent()}
    </Modal>


      // Render modal content (there's a view wrapping this)
      <ScrollView 
        style ={{flex: 8, paddingLeft: '10%', paddingTop: '10%'}}
        ref={ref => (this.scrollViewRef = ref)}
        onScroll={event => {this.state.scrollOffset = event.nativeEvent.contentOffset.y}}
        scrollEventThrottle={16}>
      >
        {Object.keys(balances).map(
            symbol =>
              symbolPriceTicker[`${symbol}USDT`] &&
              COIN_INFO[symbol] &&  (
                <TouchableOpacity
                  key={`c-${symbol}`}
                  style={screenStyles.assetSelector.selector}
                  onPress={() => this.selectAsset(symbol)}
                >
                  <View style={{flexDirection: 'row'}}>
                    <Image
                      style={screenStyles.assetSelector.coinAvatar}
                      source={COIN_INFO[symbol] ? COIN_INFO[symbol].avatar_32 : null}
                    />
                    <Text style={screenStyles.assetSelector.coinName}>
                      {COIN_INFO[symbol].name}
                    </Text>
                  </View>
                </TouchableOpacity>
              ),
          )}
      </ScrollView>

Answer 1

Its may be the problem with props in the Model which is related to scroll.

as you use ScrollView inside the Model, assuming that , you need a dismissable scrollview

Please checkout a sample related to that : https://gist.github.com/mmitchellgarcia/6ee4d5b5c79162e3cc13b67d743777e6#file-dismissablescrollview-js

For more : https://github.com/react-native-community/react-native-modal/issues/109

Hope it helps