Back button to correct position of flatlist

Question

I have a flatlist with many product . E.g. I click lot 20, it will proceed to screen with product detail. In product detail screen have a search function to other product. If search for lot 1 it will show product detail for lot 1. But when click back button it show the flatlist screen at the position of product 20, I want it to show the flatlist screen at the position of product 1. I am using react native class component. Can someone help?

flatlist.js

 class FlatlistScreen extends React.Component {
  constructor(props) {

    super(props);
    this.state = {
    };

  }

componentDidMount(){

}

render(){
   return(
     <SafeAreaView style={{flex: 1}}>
        <AnimatedFlatList
        style={{flex: 1}}
        ref={(ref) => this.flatListRef = ref}
          data={this.props.APIE}
          renderItem={this.renderItem}
          contentContainerStyle={{paddingTop: Platform.OS !== 'ios' ? HEADER_MAX_HEIGHT : 0,}}
          keyExtractor={item => item._id}
          refreshing={this.state.refreshing}
          removeClippedSubviews={Platform.OS == "android" ? this.state.sticky.length > 0 : true}
          scrollEventThrottle={1}
          refreshControl={
            <RefreshControl
              refreshing={this.state.refreshing}
              onRefresh={
                this.onRefresh.bind(this)
              }
              progressViewOffset={HEADER_MAX_HEIGHT}
            />
          }
          contentInset={{
            top: HEADER_MAX_HEIGHT,
          }}
          contentOffset={{
            y: -HEADER_MAX_HEIGHT,
          }}
          onScroll={Animated.event(
            [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
            { useNativeDriver: true },
          )}
        />
      </SafeAreaView>
)
}
}

productDetail.js

class ProductDetailScreen extends React.Component {
  constructor(props) {

    super(props);
    this.state = {
    };

  }

componentDidMount(){
     BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
}

handleBackButtonClick() {

    return true;
}

render(){
   return(
       <Text>Product Detail</Text>
   )
}
}

Does this answer your question? [React-Native scroll to top with Flatlist](https://stackoverflow.com/questions/50436635/react-native-scroll-to-top-with-flatlist) — Giovanni Esposito, Sep 03 '21 at 08:31
@GiovanniEsposito no.. my issue is the back button from another screen. when i back from product 1 detail screen suppose show the flatlist screen with product 1,2,3 but now it show 19,20,21 — Roann, Sep 03 '21 at 08:46
When you click `go back` you need just to intercept this event and call `this.flatListRef.scrollToOffset({ animated: true, offset: 0 });`. That's the reason why I think your question is a duplicate. — Giovanni Esposito, Sep 03 '21 at 08:48
I suppose that `ProductDetailScreen` will be opened when you click on one flatlist element right? I mean, `FlatlistScreen` is the parent component of `ProductDetailScreen` right? — Giovanni Esposito, Sep 03 '21 at 09:53

score 0 · Answer 1 · answered Sep 09 '21 at 07:03

On this.renderItem you probably use ProductDetailScreen to render this.props.APIE elements. Well, you could add a prop to ProductDetailScreen like:

<ProductDetailScreen onGoBack={this.scrollToTop} /*other props*/ />

this.scrollToTop looks like:

scrollToTop() {
   this.flatListRef.scrollToOffset({ animated: true, offset: 0 });
}

So this is the function that scoll the Flatlist to top.

Ok, now on ProductDetailScreen component, when we go back (I mean, on handleBackButtonClick function) we can call props.onGoBack():

class ProductDetailScreen extends React.Component {
    ...
    handleBackButtonClick() {
       props.onGoBack();
       return true;
    }
    ...
}

Thats it. Now when you go back from product details, FlatList will scroll to top.

Back button to correct position of flatlist

1 Answers1