Refresh previous screen from notification screen when press back button in react-native

Viewed 2331

I am new in react-native world. I have two screen 1). Home 2). Notification I am navigating from Home to Notification screen. When I am in Notification Screen that time when I press back button on that condition I want to refresh Home Screen. Please suggest.

Thanks in Advance!

2 Answers

Could you give us a little bit more details ? Are you using a navigator like react-navigation ? If you want to trigger a method of the parent component from a child component, you should use props.

So, you can do something like this, if you are managing your view by yourself:

export default class Wrapper extends Component
{
    state = {screen: 'Home'}

    useNewScreen = screenToUse => this.setState({screen: screenToUse})
    reloadHome = () => yourFunctionToRefreshThePage

    render = () =>
    {
        if (this.state.screen === 'Home')
            return (<Home goToNotif={() => this.useNewScreen('Notif')} />);
        else if (this.state.screen === 'Notif')
            return (<Notif onGoBack={() => this.reloadHome()} />);
    }
}

class Home extends Component
{
    render = () =>
    {
        return (
            <TouchableOpacity onPress={() => this.props.goToNotif()}/>
        );
    }
}
class Notif extends Component
{
    render = () =>
    {
        return (
            <TouchableOpacity onPress={() => this.props.onGoBack()}/>
        );
    }
}

If you are using react-navigation, you can use the same idea: You navigate to the new page with a special props

this.props.navigation.navigate('Notif', {
    onGoBack: () => this.refresh()
});

And when you want to go back, you can call this method

this.props.navigation.state.params.onGoBack();
this.props.navigation.goBack(null);

I hope this is clear enough :)

Firstly always save navigated key screen to any TempStore. Secondly set time interval to watch and compare both watching screen key and current screen key to able to call the inserted function from the screen you want to wacth and insert the screen mode to the function event..

OnScreen.js

 import React, { Component } from 'react';
    import { TempStore } from './helpers';
    import {
      Text,
      View
    } from "native-base";
    class OnScreen extends Component {
      constructor(props) {
        super(props);
        this.state = {
          lastValue:'active'
        }}

    startWatching=()=>{
        if (this.interval) { return; }
        this.interval = setInterval(this.checkView, 100);
      }

    stopWatching=()=>{
        this.interval = clearInterval(this.interval);
      }

      componentDidMount(){
          this.startWatching();
      }
        componentWillUnmount(){
        this.stopWatching();
      }
    checkView =()=> {
        const proState = {};

          proState.currentRoute=TempStore({type:'get',name:'_currentRoute'})

          if(!proState.currentRoute){
            proState.currentRoute={routeName:'Home',key:'Home'}
          }

        if(!this.props.statekey){return false}

     var isVisible;

     if(this.props.statekey === proState.currentRoute.key){
       isVisible='active'
     }else{
       isVisible='inactive'
     }

        // notify the parent when the value changes
        if (this.state.lastValue !== isVisible) {
          this.setState({
            lastValue: isVisible
          })
          this.props.onChange(isVisible);
        }
      }

    render = () => {
        return (
          <View></View>
        );
      }
    }
    export default OnScreen;

react-navigation App.js

.......
const AppNav = AppNavigator(AppNavigators)

function getActiveRouteName(navigationState) {
  if (!navigationState) {
    return null;
  }
  const route = navigationState.routes[navigationState.index];
  // dive into nested navigators
  if (route.routes) {
    return getActiveRouteName(route);
  }
  return route;
}

export default () =>
  <Root>
    <AppNav onNavigationStateChange={(prevState, currentState) => {
      TempStore({type:'set',name:'_currentRoute',value:getActiveRouteName(currentState)})}}/>
  </Root>;

AnyScreenYouWishToWatch.js

import OnScreen from '../../../helper/OnScreen';
    ......
    OnActiveToggle=(str)=> {
      if(str==='active'){
        alert('active');}
      else{
        alert('inactive');}
    }
    .....


    <OnScreen statekey={this.props.navigation.state.key} onChange={this.OnActiveToggle}/>
Related