Htykuut

I'm using flickr image search api to render images in grid format using flatlist. Using maximumZoomScale and minimumZoomScale of scrollView(iOS only) I am able to implement zoomin to change grid structure from 3 column to two columns and vice versa, However, on changing this layout,(due to re render) the flatlist again starts from the top even if I have scrolled the image to the bottom. Is there any way to keep the flatlist showing the same item even on dynamically changing the number of columns?

 export default class BrowserHome extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      isLoading: false,

      tagParam: "cat",

      pageNum: -1,

      data: ,

      photosObj: "",

      totalColumn: 3

    };

    this.handleScroll = this.handleScroll.bind(this);

  }



  state = { onEndReachedCalledDuringMomentum: true };



  //Lifecycle methods

  componentDidMount() {

    this.setState({

      isLoading: true

    });

    try {

      this.makeRequest();

    } catch {

      console.log("error has occurred");

    }

  }



  makeRequest = () => {

    const { tagParam, pageNum } = this.state;

    let url = `https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=${apiKey}&format=json&tags=${tagParam}&per_page=30&page=${pageNum +

      1}&nojsoncallback=1`;

    fetch(url, {

      method: "GET"

    })

      .then(response => response.json())

      .then(responseJSON => {

        this.setState({

          //data: responseJSON.photos.photo,

          data: this.state.data.concat(responseJSON.photos.photo),

          isLoading: false,

          pageNum: responseJSON.photos.page

        });

      })

      .catch(error => {

        console.log(error);

        this.setState({ isLoading: false });

        throw error;

      });

  };



  render() {   

    return (

      <View

        style={{

          flex: 1,

          height: 200,

          justifyContent: "flex-start",

          width: screenSize.width,

          backgroundColor: "black"

        }}

      >

        <Text>This is browserhome</Text>

        <FlatList

          minimumZoomScale={0.8}

          maximumZoomScale={2}

          key={this.state.totalColumn}

          onScroll={this.handleScroll}

          style={{

            width: screenSize.width

          }}

          numColumns={this.state.totalColumn}

          data={this.state.data}

          keyExtractor={item => item.id}

          bounces={false}

          onEndReachedThreshold={0.5}

          onMomentumScrollBegin={() => {

            this.onEndReachedCalledDuringMomentum = false;

          }}

          onEndReached={({ distanceFromEnd }) => {

            if (!this.onEndReachedCalledDuringMomentum) {

              this.loadMoreItem();

              this.onEndReachedCalledDuringMomentum = true;

            }

          }}

          renderItem={({ item, index }) => (

            <>

              <ImageTile

                imageURL={this.createImageURL(item)}

                column={this.state.totalColumn}

              />

              {/* <Text style={{ color: "white" }}>

                {index}

                {console.log(index)}

              </Text> */}

            </>

          )}

        />

      </View>

    );

  }



  loadMoreItem() {

    this.makeRequest();

  }



  handleScroll(event) {

    console.log(event.nativeEvent.zoomScale);

    if (event.nativeEvent.zoomScale > 1) {

      this.setState({

        totalColumn: 2

      });

    } else if (event.nativeEvent.zoomScale < 0.95) {

      this.setState({

        totalColumn: 3

      });

    }

  }

}