react navigation: How to insert a card within the exist stack?

How to / Third Party Tooling
1

Here is the question: How do I navigate back to a screen I have never been to? In other words:

Screen A → B → C

Once on screen C I want to hit back (from the header) and go the screen B1 that now exists due to an action on Screen C:

Screen A ← B ← B1 ← C

2

I believe you need to provide your own component for the back button. In addition, to handle the physical back button on an Android device, you can use AndroidBackHandler:

import { AndroidBackHandler } from "react-navigation-backhandler";
...
    <AndroidBackHandler
      onBackPress={() => {
        props.navigation.replace("B1");
        return true;
      }}
    >
...
    </AndroidBackHandler>
3

Thanks @wodin for your reply! I already got the back button figured. My problem is more about the navigation aspect. “replace” is the closest solution but it doesn’t provide the slide back effect.

Maybe I should try and call B and B1 at the same time, with B1 hidden behind B… Sounds complicated tho and hackish.

4

I see. Well, I’m no React Navigation expert :sweat_smile:

If nobody here gives you a more satisfactory answer, perhaps you would have more luck asking the React Navigation people.

1 Like