CODEWITHSUNDEEP
react-nativenestedfocusreact-navigationtabnavigator
Onur ÇİÇEK
Onur ÇİÇEK

Reputation: 39

How to focus when screen change in react native 5x for class components?

I am using react navigation 5x with class component structure! But when view react navigation docs for 'Call a function when focused screen changes' there is no data for 'class components' only works 'functional one'. Altough 4x has what i wanted, there is nothing in 5x. What i want to do is below; Consider There are two screen as tab navigator. A and B. A has a API query and must be make this fetch and renew the screen. At first opening everything goes well and brings datas and renders screen. But after pressing B and returning A, the screen not renewing! How can i solve this problem react native 5x for 'class component'


async componentDidMount() {

  

  const datam = {
    page: this.state.page
};
//Burada kullanıcı yoksa ülkeleri getireceğiz
const rest = await fetch('https://www.birdpx.com/mobile/fotografgetir/' + this.state.page, {
    method: 'POST',
    headers: { 'Accept': 'application/json', 'Content-type': 'application/json' },
    body: JSON.stringify(datam)
});

const gelenVeri = await rest.text();
let convertedVeri = JSON.parse(gelenVeri);



this.setState({
    data: convertedVeri,

})


}

This fetch method must work every visit of that page

Upvotes: 0

Views: 1804

Answers (1)

nithinpp
nithinpp

Reputation: 2025

You can use the 'focus' event to call your API methods. This will get executed every time when your screen comes into focus

  ...
  
  componentDidMount() {
    this.unsubscribe = navigation.addListener('focus', () => {
        //do your api call
    });
  }

  componentWillUnmount(){
    if(this.unsubscribe)
      this.unsubscribe();
  }
  
  ...

Upvotes: 2

Related Questions