chore: migrate examples to react-navigation v7 (#2194)

## Description

This PR intents to migrate examples to react-navigation v7.
Documentation: https://reactnavigation.org/docs/7.x/upgrading-from-6.x/

As for now I have only found ~~two~~ few files that needed changes. I
ensured that nothing crashes in the example.

## Changes

- migrated navigating to nested screen
- replaced `navigate` with `popTo` when explicitly going back to a
specific screen
- ensured nothing crashes

<!--

## Screenshots / GIFs

Here you can add screenshots / GIFs documenting your change.

You can add before / after section if you're changing some behavior.

### Before

### After

-->

## Test code and steps to reproduce

<!--
Please include code that can be used to test this change and short
description how this example should work.
This snippet should be as minimal as possible and ready to be pasted
into editor (don't exclude exports or remove "not important" parts of
reproduction example)
-->

## Checklist

- [x] Ensured that CI passes

apps/examples/src/screens/Animations.tsx

@@ -113,7 +113,7 @@ const NavigateScreen = ({
 
   return (
     <View style={{ ...styles.container, backgroundColor: 'pink' }}>
-      <Button title="Go back" onPress={() => navigation.navigate('Main')} />
+      <Button title="Go back" onPress={() => navigation.popTo('Main')} />
     </View>
   );
 };

apps/test-examples/src/Test1097.tsx

@@ -123,7 +123,7 @@ function Second({ navigation }: { navigation: NavigationProp<ParamListBase> }) {
     <ScrollView contentInsetAdjustmentBehavior="automatic">
       <Button
         title="Tap me for first screen"
-        onPress={() => navigation.navigate('First')}
+        onPress={() => navigation.popTo('First')}
       />
       <Button
         title="Tap me for third screen"
@@ -165,7 +165,7 @@ function Third({ navigation }: { navigation: NavigationProp<ParamListBase> }) {
       keyboardDismissMode="on-drag">
       <Button
         title="Tap me for the first screen"
-        onPress={() => navigation.navigate('First')}
+        onPress={() => navigation.popTo('First')}
       />
       <Button
         title="Focus search bar"
@@ -197,7 +197,7 @@ function Third({ navigation }: { navigation: NavigationProp<ParamListBase> }) {
       />
       <Button
         title="Tap me for the first screen"
-        onPress={() => navigation.navigate('First')}
+        onPress={() => navigation.popTo('First')}
       />
       <Button
         title="Focus search bar"

apps/test-examples/src/Test1166/AndroidDifferentScreenSearch.tsx

@@ -60,7 +60,7 @@ function Second({
       headerSearchBarOptions: {
         autoCapitalize: 'none',
         autoFocus: true,
-        onClose: () => navigation.navigate('First'),
+        onClose: () => navigation.popTo('First'),
         onChangeText: e => setText(e.nativeEvent.text),
         barTintColor: text,
       },

apps/test-examples/src/Test556.js

@@ -29,7 +29,7 @@ function Second({ navigation }) {
   return (
     <Button
       title="Tap me for second screen"
-      onPress={() => navigation.navigate('First')}
+      onPress={() => navigation.popTo('First')}
     />
   );
 }

apps/test-examples/src/Test624.js

@@ -71,7 +71,7 @@ function ThirdScreen({ navigation }) {
       <View style={styles.flexOne}>
         <TouchableOpacity
           style={[styles.centeredContainer, styles.buttonExtras]}
-          onPress={() => navigation.navigate('Second')}>
+          onPress={() => navigation.popTo('Second')}>
           <Text style={styles.buttonText}>Tap me for second screen</Text>
         </TouchableOpacity>
       </View>
@@ -122,7 +122,7 @@ function NestedSecond({ navigation }) {
       <View style={styles.centeredContainer}>
         <TouchableOpacity
           style={[styles.centeredContainer, styles.buttonExtras]}
-          onPress={() => navigation.navigate('NestedFirst')}>
+          onPress={() => navigation.popTo('NestedFirst')}>
           <Text style={styles.buttonText}>Tap me for second screen</Text>
         </TouchableOpacity>
       </View>

apps/test-examples/src/Test645.js

@@ -36,7 +36,7 @@ function DetailsScreen({ navigation }) {
 function SettingsScreen({ navigation }) {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button onPress={() => navigation.navigate('Home')} title="Go to Home" />
+      <Button onPress={() => navigation.popTo('Main', {screen: 'Home'})} title="Go to Home" />
       <Text>Details</Text>
     </View>
   );

apps/test-examples/src/Test648.js

@@ -36,7 +36,7 @@ function Second({ navigation }) {
     <ScrollView>
       <Button
         title="Tap me for first screen"
-        onPress={() => navigation.navigate('First')}
+        onPress={() => navigation.popTo('First')}
       />
     </ScrollView>
   );

apps/test-examples/src/Test649.js

@@ -35,7 +35,7 @@ function Second({ navigation }) {
     <ScrollView>
       <Button
         title="Tap me for first screen"
-        onPress={() => navigation.navigate('First')}
+        onPress={() => navigation.popTo('First')}
       />
     </ScrollView>
   );

apps/test-examples/src/Test654.js

@@ -37,7 +37,7 @@ function Second({ navigation }) {
   return (
     <Button
       title="Tap me for second screen"
-      onPress={() => navigation.navigate('First')}
+      onPress={() => navigation.popTo('First')}
     />
   );
 }