Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

createNativeStackNavigator not working correctly on android

See original GitHub issue

I have a pretty “big” navigation stack, which works absolutely perfect on iOS and feels so incredibly smooth right now. I am very happy. Unfortunately, it is not working perfectly on android.

const timelineStack = createNativeStackNavigator({
    Timeline: {screen: Timeline},
    Story: {screen: Story},
}, StackNavigatorOptions);

const messagesStack = createNativeStackNavigator({
    Messages: {screen: Messages},
}, StackNavigatorOptions);

const profileStack = createNativeStackNavigator({
    Profile: {screen: Profile},
    EditProfile: {screen: EditProfile},
    AddCar: {screen: AddCar},
    Account: {screen: Account},
    EditAccount: {screen: EditAccount},
    Blocked: {screen: Blocked},
    SelectVehicle: {screen: SelectVehicle},
    SelectMake: {screen: SelectMake},
    SelectModel: {screen: SelectModel},
    SelectType: {screen: SelectType},
    SelectEngine: {screen: SelectEngine},
    SelectPicture: {screen: SelectPicture},

}, StackNavigatorOptions);

const messageStack = createNativeStackNavigator({
    Message: {screen: Message},
}, StackNavigatorOptions);

const userStack = createNativeStackNavigator({
        User: {screen: User},
        UserImage: {screen: UserImage},
    },
    {
        ...StackNavigatorOptions,
        transparentCard: true,
        cardStyle: {
            backgroundColor: "transparent"
        },
        transitionConfig: () => springyFadeIn(),
    },
);

const storyStack = createNativeStackNavigator({
    AddStory: {screen: AddStory},
}, {...StackNavigatorOptions, navigationOptions: { gesturesEnabled: false }});

const TabNavigator = createMaterialTopTabNavigator({
    Timeline: timelineStack,
    Messages: messagesStack,
    Profile: profileStack
}, TabNavigatorOptions(tabs));


const AppNavigator = createNativeStackNavigator({
    Home: TabNavigator,
    Message: messageStack,
    User: userStack,
}, StackNavigatorOptions);


export const SocialNavigator = createNativeStackNavigator(
    {
        Home: AppNavigator,
        AddStory: storyStack
    },
    {
        transparentCard: false,
        mode: 'modal',
        headerMode: 'none',
    }
);

Everything works as expect on iOS and on Android, but Android can’t push/navigate to Screen “Message” and to screen “User” and “AddStory”.

I added those as single stacks because they don’t belong to any tab and they have to be pushable/navigateable from everywhere.

It has nothing to do with the cardStyle or anything else, I tried it naked (as “Message” (not Messages) is also a usual stack without any special settings). I know, its pretty encapsulated but it should also work on Android, since it works as expected on iOS.

When I set “User” and “Message” to “createStackNavigator”, they open as expected but the app crash on back handler/pop/goBack