CODEWITHSUNDEEP
javascriptreact-nativereact-native-navigation
DucksEatTurtles
DucksEatTurtles

Reputation: 384

React-Native-Navigation, how to refresh a route when navigating to it via navigation.navigate("routename", {randomparams})

I have a bottomTabNavigator which has two stacknavigators. Each stacknavigator has their own respective screens within them. Whenever I use something like 

navigator.navigate("Stackname" {screen:"screenname", randomProp: "seomthing")

the params are sent to the stacknavigator, and not the screen itself. I kinda got past the issue by passing in 

initialParams=route.params

within the stacknavigators, but they won't refresh when I call the first block of code for a second time. Any ideas?

Upvotes: 5

Views: 37180

Answers (3)

Yusuf Arslan
Yusuf Arslan

Reputation: 61

function HomeScreenComponent( {navigation} ) {

  React.useEffect(() => {
    navigation.addListener('focus', () => {
      console.log("reloaded");
    });
  }, [navigation]);

export default HomeScreenComponent;

This will also listen to the focusing and execute the useEffect function when the screen navigates.

Upvotes: 4

Jonathan
Jonathan

Reputation: 131

Instead of:

navigator.navigate("StackName" {screen:"screenName", paramPropKey: "paramPropValue");

Use this:

navigator.navigate("screenName", {'paramPropKey': 'paramPropValue'});

In screenName:

export default ({route}) => {
   useEffect(() => {
      // do something
   }, [route]);
};

Upvotes: 9

Ford Prefect
Ford Prefect

Reputation: 46

That is because the screen is already mounted & initial params won't update. What you can do, though, is create a wrapper component enhanced with 'withNavigationFocus' that 'react-native-navigation' offers.

https://reactnavigation.org/docs/1.x/with-navigation-focus/

ComponentWithFocus

import React, {Component, useState} from 'react';
import { withNavigationFocus } from 'react-navigation';

const ComponentWithFocus = (props) => {
  const {isFocused, onFocus, onBlur} = props;
  const [focused, setFocused] = useState(false);

  if(isFocused !== focused) {
    if(isFocused) {
      typeof onFocus === 'function' ? onFocus() : null;
      setFocused(true)
    } else {
      typeof onBlur === 'function' ? onBlur() : null;
      setFocused(false)
    }
  }
  return (
    props.children
  )
}

export default withNavigationFocus(ComponentWithFocus);

And use it in your screen like this:

...
onFocus = () => {
 //your param fetch here and data get/set
 this.props.navigation.getParam('param')
 //get
 //set
}

...
render() {
 <ComponentWithFocus onFocus={this.onFocus}>
   /// Your regular view JSX
 </ComponentWithFocus>
}

Note: If params aren't updated still, than you should reconsider your navigating approach. For example, there is no need to navigate from your tabBar like this:

navigator.navigate("Stackname" {screen:"screenname", randomProp: "seomthing")

You could instead do the following:

navigator.navigate("screenName", {'paramPropKey': 'paramPropValue'})

This will work because '.navigate' function finds the first available screen that matches the name and if it isn't already mounted it mounts it onto the stack (firing componentDidMount method). If the screen already exists, it just navigates to it, ignoring 'componentDidMount' but passing the 'isFocused' prop which, luckily, we hooked on to in our 'ComponentWithFocus'.

Hope this helps.

Upvotes: 3

Related Questions