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

Question

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?

Answer 1

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.

Answer 2

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]);
};