title: react native navigation separated process
body: <p>In my application I have some multistep form, let's say it's process of adding new employee to company and we got steps like:</p>
  <ol>
  <li>personal info</li>
  <li>car(select or add)</li>
  <li>final info</li>
  </ol>
  <p>so when a user adds a new employee application redirects him to <code>AddEmployeeStack</code> when he can go through these 3 screens.</p>
  <p>Screen 2(car) it's actually another stack - on this screen user can choose a car from the list of existing cars and can click &quot;add&quot; button and go to adding new car form(it's another stack)</p>
  <p>so it looks like:</p>
  <pre class="lang-js prettyprint-override"><code>export const NewEmployeeStack: FC = () =&gt; {
    const { t } = useTranslation();
  
    return (
      &lt;Stack.Navigator&gt;
        &lt;Stack.Screen name=&quot;personalInfo&quot; component={PersonalInfoScreen} /&gt;
        &lt;Stack.Screen name=&quot;employeeCar&quot; component={EmployeeCarStack} /&gt;
        &lt;Stack.Screen name=&quot;finalInfo&quot; component={FinalInfoScreen} /&gt;
      &lt;/Stack.Navigator&gt;
    );
  };
  
  export const EmployeeCarStack: FC = () =&gt; {
    const { t } = useTranslation();
  
    return (
      &lt;Stack.Navigator&gt;
        &lt;Stack.Screen name=&quot;carsList&quot; component={CarsListScreen} /&gt;
        &lt;Stack.Screen name=&quot;addCar&quot; component={AddCarStack} /&gt;
      &lt;/Stack.Navigator&gt;
    );
  };
  
  export const AddCarStack: FC = () =&gt; {
    const { t } = useTranslation();
  
    return (
      &lt;Stack.Navigator&gt;
        &lt;Stack.Screen name=&quot;carModel&quot; component={CarModelScreen} /&gt;
        &lt;Stack.Screen name=&quot;carRegistration&quot; component={CarRegistrationScreen} /&gt;
        &lt;Stack.Screen name=&quot;carSummary&quot; component={CarSummaryScreen} /&gt;
      &lt;/Stack.Navigator&gt;
    );
  };
  </code></pre>
  <p>so when the user is on screen no 2, car he can choose a car or add new</p>
  <p>if the user decides to add a new car then he can go through the process of adding a car after he finishes this process it's obvious that he just added this car because he wants to use it - so should be redirected just to <code>finalInfo</code> screen from the first stack</p>
  <p>I can use <code>navigation.navigate(&quot;finalInfo&quot;)</code> but then if user clicks back button(android platforms) he's gonna be redirected to summary screen from <code>AddCarStack</code></p>
  <p>I can also use <code>navigation.goBack()</code> from <code>EmployeeCarStack</code> level and then <code>navigation.navigate(&quot;finalInfo&quot;)</code> but it's actually 2 navigations and it's gonna be fast blink of this screen with cars list</p>
  <p>so I'm looking for a solution where:</p>
  <ul>
  <li>user can go to cars list and just choose the car, then go to <code>finalInfo</code></li>
  <li>user can go to cars list and then click &quot;add&quot; button, go through adding car process and from the last step of this process gonna be redirected to <code>finalInfo</code> but when he clicks back button on <code>finalInfo</code> it's gonna be acting like he just came from the cars list screen</li>
  </ul>