React-native-navigation: Pushing screen not working [v2]

[EliSadaka]

Issue Description

Pushing a screen doesn't seem to work for me. I'm able to show a screen as a modal but when I try to push one to the stack I get an error. It's a tab-based app if that makes any difference. Here is my code:

Navigation.push(this.props.componentId, {
   component: {
    name: "example.ChatroomScreen",
   }
})

But when the code runs I get this error:

Error: Could not push component: Component10. Stack with id null was not found.

---

Environment

• React Native Navigation version: 2.0.2229
• React Native version: 0.53.3
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Device / Android 8.1.0 / Debug

[guyca]

Pushing a screen to a stack in a BottomTabs screen seems to work in the playground app.
If you PR a failing e2e test I could look into this further.

[pribeh]

@guyca would you be open to reviewing a github repo using RNN?

Is there anything the error outputted above could indicate?

[guyca]

@pribeh Yes of course, If you could upload a project where this reproduces I'll gladly look into it.
Another option is to PR a failing Detox e2e test, if you need any assistance with that, ping me on Discord.

[bogobogo]

@guyca I have reproduced this issue locally. reopening.

[pribeh]

@yogevbd Is there a reason you closed the issue? We still haven't got past this hurdle.

[bogobogo]

Hey @pribeh, make sure that your tab is inside a stack and is not just a component. Note that in this example the second tab is a component without a stack, so push won't work. We should probably change this example to something more clear...

[EliSadaka]

This is what our Navigation.setRoot function looks like. Unless I've done something wrong our tabs are all inside a stack, but we're still having this issue.

Navigation.setRoot({
   bottomTabs: {
    children: [
       {
        stack: {
           children: [
            {
               component: {
                id: "HomeScreen",
                name: "HomeScreen"
               }
            }
           ],
           options: {
            bottomTab: {
               title: "Home",
                icon: require("./img/circle/circle.png") //placeholder
               }
            }
           }
        },
        {
           stack: {
            children: [
               {
                component: {
                   id: "ChatScreen",
                   name: "ChatScreen"
                }
               }
            ],
            options: {
               bottomTab: {
                title: "Chat",
                icon: require("./img/circle/circle.png") //placeholder
               }
            }
           }
        },
        {
           stack: {
            children: [
               {
                component: {
                   id: "ChallengeScreen",
                   name: "ChallengeScreen"
                }
               }
            ],
            options: {
               bottomTab: {
                title: "Challenges",
                icon: require("./img/circle/circle.png") //placeholder
               }
            }
           }
        },
        {
           stack: {
            children: [
               {
                component: {
                   id: "NotificationScreen",
                   name: "NotificationScreen"
                }
               }
            ],
            options: {
               bottomTab: {
                title: "Notifications",
                icon: require("./img/circle/circle.png") //placeholder
               }
            }
        }
       }
    ],
   }
});

[KA5558]

Is there any solution? In my case page is rendering but not opening and when I go to this page by bottomTab, Page has back button like I opened before.

[KA5558]

I think I found!
Firstly you should give id stacks then put the screen in children

stack: {
id:"myId" //Your stack Id
children: [
{
component: { //This page will not appear in first time
id: "myPage",
name: "MyPage"
}
},
{
component: { //It is your first screen
id: "NotificationScreen",
name: "NotificationScreen"
}
}
],

then call this page like this

Navigation.push("myId", { //Use your stack Id instead of this.pros.componentId
component: {
name: 'MyPage' //any children in your stack
}
})

[hto]

@EliSadaka great!!!

[vivek6923]

This seems to work perfectly fine in my case , RN version - 0.57.7 , "react-native-navigation": "^2.5.1"

`` Navigation.setRoot({ root: { // Don't forget to set the tabbar as root bottomTabs: { children: [ { stack: { . // Eachtab` must be in a separate stack
children: [
{
component: {
id: "Home",
name: 'app.CustomerHomePage'
}
}
],
options: {
bottomTab: {
title: "Home",
icon: require('../images/Home.png')
}
}
}
},
{
stack: {
children: [
{
component: {
id: "Search",
name: 'app.CustomerSearch'
}
}
],
options: {
bottomTab: {
title: 'Search',
icon: require('../images/Search.png')
}
}
}
},
{
stack: {
children: [
{
component: {
id: "Appointment",
name: 'app.UsersAppointments'
}
}
],
options: {
bottomTab: {
title: "Appointment",
icon: require('../images/Appointment.png')
}
}
}
}
]
}
}
});

[bcicube]

I too having same issue. Any workaround ?

[djnsu]

Same here.

[FahdJamy]

Still having the same push issue but my components are inside a stack too.

[Rubenvdveen]

This happened to me while using the new hot reload of React-native. After properly reloading the app, the issue disappeared.

[Luktm]

I solved my problem using this solution from this medium page image and you can copy the code below and change it to yours!!

Navigation.setRoot({
        root: {
            stack: {
                children: [{
                    component: {
                        name: 'Login',
                        options: {
                            topBar: {
                                title: {
                                    text: 'Login'
                                }
                            }
                        }
                    }
                }]
            }
        }
    });