CODEWITHSUNDEEP
react-nativereact-navigationreact-native-iosreact-native-navigation
Belgin Android
Belgin Android

Reputation: 307

Update Component when Focused screen changes

I Have Two Tabs in BottomTabNavigator ( React Navigation V5 ) News Screen And Saved Screen . When I Click On Bookmark In One Of The News It Will get Updated To The Async Store And Using this.props.navigation.navigate("saved") I Move To Saved Screen

The Issues Is Once The Screen Is Navigated To Saved I Don't See Any Changes. I Need To Update The Component . With The Value From getMyObject() I need to Call This Below Function and Upadte The Component Each Time The Saved Screen is Focused. Full Code - https://snack.expo.io/@belgin/news-app

   getMyObject = async () => {
    try {
      const jsonValue = await AsyncStorage.getItem('BookMarks');
      if (jsonValue) {
        const data = JSON.parse(jsonValue);
        this.setState({ BookMark_Item : data })
      }
    } catch (e) {
    // read error
    }
};

Full Code https://snack.expo.io/@belgin/news-app

Thanks For The Help

Upvotes: 1

Views: 3651

Answers (3)

Handi
Handi

Reputation: 67

BTW, you have to remove ( this.getMyObject()) that you called in your constructor, since you have used componentDidMount.

constructor(props){
    super(props);
    this.state={
      isLoading : false,
      BookMark_Item:[],
      value:0
    }
    this.getMyObject() // <= remove this
  }

SOLUTION: add below to your code:

componentDidMount() {
    const {navigation} = this.props

    this._unsubscribe = navigation.addListener('focus', () => {
      this.getMyObject()
    });
  }

  componentWillUnmount() {
    this._unsubscribe();
  }

more : https://reactnavigation.org/docs/navigation-events/#navigationaddlistener

Upvotes: 1

Rajshekhar
Rajshekhar

Reputation: 624

    import { useIsFocused } from '@react-navigation/native';

function Profile() {
  // This hook returns `true` if the screen is focused, `false` otherwise
  const isFocused = useIsFocused();

  return <Text>{isFocused ? 'focused' : 'unfocused'}</Text>;
}

u can call thin in useEffect()

===== updated====

 componentDidMount() {
    this.props.navigation.addListener('focus', this._onFocus);
    this.props.navigation.addListener('blur', this._onBlur);
  }

  componentWillUnmount() {
    this.props.navigation.removeListener('blur', this._onBlur);
    this.props.navigation.removeListener('focus', this._onFocus);
  }


  _onFocus = () => {
    console.log("=====_onFocus")
      this.getMyObject()
    // Update focus state. Latter state update is to refresh the content once
    // focus state is updated. Temp fix for react navigation tab swiping issues.
    // See https://github.com/react-community/react-navigation/issues/1257
    this.setState({isFocused: true}, () => { this.setState(this.state)});
  };

  _onBlur = () => {
    this.setState({isFocused: false});
        console.log("=====_onBlur")

  };

That might help : Link

Upvotes: 2

Belgin Android
Belgin Android

Reputation: 307

I Got The Answer ! You can Just Use This Code So It Starts The Listener To Check If It Is Focused Or Not

  componentDidMount(){
    this.props.navigation.addListener('focus', () => {
      this.getMyObject()
    });
  }

Upvotes: 0

Related Questions