How to find the end offset while going down in the screen of react-native-flatlist

[nihp]

I have used scrollOffset and scrollToEnd and scrollToIndex to load the items 15 wise. After loaded all items then I need to gotoUp and down only with items need to be go up and 15 item need to go down of the screen.

My issue is offset value of goToBottom is incorrect and it always adding space and it always goes to the else part and indexRange is not known to it. So it will leads to show empty space at the end. Here is my code.

  <View style={{flex:1}}>
            <FlatList
              ref={(ref) => { this.flatListRef = ref; }}
              data={filteredItems}
              renderItem={({ item }) => this.renderItem(item)}
              numColumns={2}
              extraData={this.props.pagination}
              keyExtractor={item => item.id}
              onEndReached={this._handleMoreItems}
              onEndReachedThreshold={0.001}
              ListFooterComponent={this._renderFooter}
              /*onScroll={event => {
                this.yOffset = event.nativeEvent.contentOffset.y
              }}*/
              scrollEventThrottle={2}
              onMomentumScrollEnd={e => this.scroll(e.nativeEvent.contentOffset)}
            />
            <TouchableOpacity onPress={()=> this.goToTop()} style={{ position: 'absolute', width: 50, height: 50, alignItems: 'center', justifyContent: 'center', right: 1, bottom: 40}}>
               <Image style={{width: '45%', height: '45%'}} source={{"up"}}/>
              </TouchableOpacity>
              <TouchableOpacity onPress={()=> this.gotoBottom()} style={{position: 'absolute', width: 50, height: 50, alignItems: 'center', justifyContent: 'center',right: 1, bottom: 0}}>
                <Image style={{width: '45%', height: '45%'}} source={{ "down"}}/>
              </TouchableOpacity>
          </View>



goToTop = () => {
    const indexInRange = this.state.index - itemsUpDown >= 0;
   if (indexInRange) {
     this.flatListRef.scrollToOffset({
       offset:(this.state.index-itemsUpDown)*deviceHeight+(this.state.index-itemsUpDown)*2
     });
     this.setState({
       index: this.state.index - itemsUpDown,
     });
   } else {
     this.flatListRef.scrollToIndex({ index: 0 });
     this.setState({
       index: 0,
     });
   }
  }




  gotoBottom = () => {
  const indexInRange = this.state.index + itemsUpDown <= this.props.pagination - 1;
    if (indexInRange) {
    this.flatListRef.scrollToOffset({
         offset: (this.state.index+itemsUpDown)*deviceHeight+(this.state.index+itemsUpDown)
       });
       this.setState({
         index: this.state.index + itemsUpDown,
});
    } else {
   this.flatListRef.scrollToEnd();
        this.setState({
          index: this.props.pagination - 1,
        });
    }
  }

[react-native-bot]

Thanks for submitting your issue. Can you take another look at your description and make sure the issue template has been filled in its entirety?

👉 Click here if you want to take another look at the Bug Report issue template.

[nihp]

Need to find the screenEndOffset, but it not working

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.