React Native navigation reset does not work

Question

I have two stack in my application

Tab Navigator (main stack)
Stack Navigator (app stack)

Stack Navigator elements

Home Screen
Detail Screen
Login Screen

Tab Navigator elements

Home Screen (Stack Navigor)
Economy News
Politic News
Social News

I want to go Detail screen from Economy News, Politic News and Social News because I render the all news in these screens and when the user click the any new, must go to the Detail screen with new which clicked. I used navigate('Home', {screen: 'Detail', params: {id: new.ID}}); But it always render the previous new detail.

Also I tried

navigation.dispatch(
  CommonActions.reset({
    routes: [
      {
        name: 'Home',
      },
      {
        name: 'Detail',
        params: {
          id: new.ID,
        },
      },
    ],
  }),
);

But still it does not work I need to help about this issue I have tried so many things but always render the previous screen detail.

can you post more code because navigate('Home', {screen: 'Detail', params: {id: new.ID}}); should reset your param — anthony willis muñoz, Nov 01 '20 at 23:46

score 1 · Answer 1 · answered Nov 02 '20 at 08:24

1

That's my home stack nav

<Stack.Navigator
  initialRouteName="Home"
  headerMode="none"
  transitionConfig={transitionConfig}
>
  <Stack.Screen
    name="Detail"
    component={DetailScreen}
    initialParams={props.route.params}
  />
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Profile" component={ProfileScreen} />
  <Stack.Screen name="Login" component={LoginPage} />
  <Stack.Screen name="Settings" component={SettingsScreen} />
</Stack.Navigator>

and that one is my main tab nav

     <Tab.Navigator
        tabBar={props => <Footer {...props} />}
        transitionConfig={transitionConfig}
      >
        <Tab.Screen name="Home" component={StackNavigator} />
        <Tab.Screen name="EconomyNews" component={ContentScreen} />
        <Tab.Screen name="PoliticNews" component={ContentScreen} />
        <Tab.Screen name="SocialNews" component={ContentScreen} />
      </Tab.Navigator>

I want to go to Detail Screen from EconomyNews, PoliticNews or SocialNews screens with new values like id but it always render the previous screen

answered Nov 02 '20 at 08:24

crazycoder

39
6

all looks fine add DetailScreen full code and ContentScreen as well – anthony willis muñoz Nov 02 '20 at 12:31
i can't share all code cause when i share the moderator is deleting my answer but i can share little bit. – crazycoder Nov 02 '20 at 12:49
`const Detail = React.memo(props => { const [content, setContent] = useState(null); const dispatch = useDispatch(); const contentProps = useSelector(state => state.contentReducer); const { loading, error, detail } = contentProps; useEffect(() => {function fetchData() {dispatch(getDetail({endpoint: `URL`}));}fetchData();}, []);return ({content.title}{content.overview});});` – crazycoder Nov 02 '20 at 12:54
Content Screen > `const Content = React.memo(props => {const { item, navigation } = props; return ( { navigation.navigate('Home', {screen: 'Detail', params: {id: item.ID}});}}> {item.original_title} ({item.title}) {item.overview} ); });` – crazycoder Nov 02 '20 at 13:01

score 0 · Answer 2 · answered Nov 02 '20 at 15:57

Hard to follow your code but I don't see that you are using in Detail component the id so is imposible that you have another data. You don't need memo in your case ...

const Detail = props => { 
const [content, setContent] = useState(null); 
const dispatch = useDispatch(); 
const contentProps = useSelector(state => state.contentReducer); 
const { loading, error, detail } = contentProps; 
const URL = `URL/${props.navigation?.route?.params?.id}`
useEffect(() => {
function fetchData() {
dispatch(getDetail({endpoint: URL}));}
fetchData();
}, [dispatch, props.navigation?.route?.params?.id]);
return (<Container><Image source={{uri:'URL'}}/><View style={styles.content_container}><Title>{content.title}</Title><OverView style={styles.content}>{content.overview}</OverView></Container>);};

score 0 · Answer 3 · answered Nov 02 '20 at 17:48

0

I use the id in url which in fetch function. I use it to get data from service that's why i did not write the exactly url. The main goal is open the Detail Screen with reset. I also tried another way today and it has not been worked;

import {useNavigation} from '@react-navigation/native';
const Content = (props => {
   const _nav = useNavigation();
   const goToRoute = () => {
      _nav.reset({
         index: 1,
         routes: [
         {
           name: 'Home',
         },
         {
           name: 'Detail',
           params: {
             id: item.ID,
           },
         },
      ],
   });
 };
});

answered Nov 02 '20 at 17:48

crazycoder

39
6

could you make a snack because you don't need use reset. To reset the params something is wrong and I can't see it. Here is a template with react navigation v5 ready https://snack.expo.io/@anthowm/41a9b3 – anthony willis muñoz Nov 02 '20 at 19:37
https://snack.expo.io/ye!rF6rv6 this is my snack code similar – crazycoder Nov 02 '20 at 20:52
In this expo all working u get fresh param all time. – anthony willis muñoz Nov 02 '20 at 23:17
I have fixed the issue :) thank you for all help. I just realized I was keep fresh my params but was not React state, I changed a little code about my params. While i get the params i assigned the react state and i started to use these react state variables in my useEffect function and it works. It's all about the react statement and virtual dom. I was not understand this issue. Now it works :D :D – crazycoder Nov 03 '20 at 06:43

React Native navigation reset does not work

3 Answers3