docs: Updated assets in Fundamentals section

versioned_docs/version-5.x/hello-react-navigation.md

@@ -59,7 +59,7 @@ function App() {
 export default App;
 ```
 
-![Basic app using stack navigator](/assets/navigators/stack/basic_stack_nav.png)
+<img src="/assets/7.x/fundamentals/basicAppUsingStackNavigator.jpeg" width="300" alt="Basic app using stack navigator" />
 
 If you run this code, you will see a screen with an empty navigation bar and a grey content area containing your `HomeScreen` component (shown above). The styles you see for the navigation bar and the content area are the default configuration for a stack navigator, we'll learn how to configure those later.
 

versioned_docs/version-6.x/header-buttons.md

@@ -35,7 +35,7 @@ function StackScreen() {
 }
 ```
 
-![Header button](/assets/headers/header-button.png)
+<img src="/assets/7.x/fundamentals/buttonInHeader.png" width="500" alt="Button right in the header" />
 
 When we define our button this way, the `this` variable in `options` is _not_ the `HomeScreen` instance, so you can't call `setState` or any instance methods on it. This is pretty important because it's extremely common to want the buttons in your header to interact with the screen that the header belongs to. So, we will look how to do this next.
 
@@ -82,7 +82,7 @@ function HomeScreen({ navigation }) {
 ```
 
 <video playsInline autoPlay muted loop>
-  <source src="/assets/headers/header-update-screen.mp4" />
+  <source src="/assets/7.x/fundamentals/updateHeader.mp4" />
 </video>
 
 Here we update the `headerRight` with a button with `onPress` handler that has access to the component's state and can update it.
@@ -109,7 +109,7 @@ To customize the back button image, you can use `headerBackImageSource` ([read m
 </Stack.Navigator>
 ```
 
-![Header custom back](/assets/headers/header-back-custom.png)
+<img src="/assets/7.x/fundamentals/customBack.png" width="500" alt="Custom back button" />
 
 ## Overriding the back button
 

versioned_docs/version-6.x/headers.md

@@ -26,7 +26,7 @@ function StackScreen() {
 }
 ```
 
-![Header title](/assets/headers/header-title.png)
+<img src="/assets/7.x/fundamentals/headerTitle.png" width="500" alt="Header title" />
 
 ## Using params in the title
 
@@ -107,7 +107,7 @@ function StackScreen() {
 }
 ```
 
-![Custom header styles](/assets/headers/custom_headers.png)
+<img src="/assets/7.x/fundamentals/adjustHeaderStyle.png" width="500" alt="Adjust header style" />
 
 There are a couple of things to notice here:
 
@@ -175,7 +175,7 @@ function StackScreen() {
 }
 ```
 
-![Header custom title](/assets/headers/header-custom-title.png)
+<img src="/assets/7.x/fundamentals/headerCustomComponent.png" width="500" alt="Header custom component" />
 
 :::note
 

versioned_docs/version-6.x/hello-react-navigation.md

@@ -59,7 +59,7 @@ function App() {
 export default App;
 ```
 
-![Basic app using stack navigator](/assets/navigators/stack/basic_stack_nav.png)
+<img src="/assets/7.x/fundamentals/basicAppUsingStackNavigator.jpeg" width="300" alt="Basic app using stack navigator" />
 
 If you run this code, you will see a screen with an empty navigation bar and a grey content area containing your `HomeScreen` component (shown above). The styles you see for the navigation bar and the content area are the default configuration for a stack navigator, we'll learn how to configure those later.
 

versioned_docs/version-6.x/navigating.md

@@ -52,7 +52,7 @@ function HomeScreen({ navigation }) {
 ```
 
 <video playsInline autoPlay muted loop>
-  <source src="/assets/navigators/stack/simple-details.mp4" />
+  <source src="/assets/7.x/fundamentals/NavigateBasic.mp4" />
 </video>
 
 Let's break this down:
@@ -100,7 +100,7 @@ Let's suppose that we actually _want_ to add another details screen. This is pre
 ```
 
 <video playsInline autoPlay muted loop>
-  <source src="/assets/navigators/stack/stack-push.mp4" />
+  <source src="/assets/7.x/fundamentals/navigateAgain.mp4" />
 </video>
 
 Each time you call `push` we add a new route to the navigation stack. When you call `navigate` it first tries to find an existing route with that name, and only pushes a new route if there isn't yet one on the stack.
@@ -130,7 +130,7 @@ function DetailsScreen({ navigation }) {
 ```
 
 <video playsInline autoPlay muted loop>
-  <source src="/assets/navigators/stack/back-home.mp4" />
+  <source src="/assets/7.x/fundamentals/navigateGoBack.mp4" />
 </video>
 
 :::note
@@ -164,7 +164,7 @@ function DetailsScreen({ navigation }) {
 ```
 
 <video playsInline autoPlay muted loop>
-  <source src="/assets/navigators/stack/pop-to-top.mp4" />
+  <source src="/assets/7.x/fundamentals/navigatePopToTop.mp4" />
 </video>
 
 ## Summary

versioned_docs/version-6.x/navigation-lifecycle.md

@@ -51,7 +51,7 @@ function App() {
 ```
 
 <video playsInline autoPlay muted loop>
-  <source src="/assets/navigators/lifecycle.mp4" />
+  <source src="/assets/7.x/fundamentals/navigationLifecycle.mp4" />
 </video>
 
 We start on the `HomeScreen` and navigate to `DetailsScreen`. Then we use the tab bar to switch to the `SettingsScreen` and navigate to `ProfileScreen`. After this sequence of operations is done, all 4 of the screens are mounted! If you use the tab bar to switch back to the `HomeStack`, you'll notice you'll be presented with the `DetailsScreen` - the navigation state of the `HomeStack` has been preserved!
@@ -96,10 +96,12 @@ function Profile() {
   useFocusEffect(
     React.useCallback(() => {
       // Do something when the screen is focused
+      Alert.alert('ProfileScreen focus effect');
 
       return () => {
         // Do something when the screen is unfocused
         // Useful for cleanup functions
+        Alert.alert('ProfileScreen focus effect cleanup');
       };
     }, [])
   );
@@ -109,7 +111,7 @@ function Profile() {
 ```
 
 <video playsInline autoPlay muted loop>
-  <source src="/assets/navigators/lifecycle-focus.mp4" />
+  <source src="/assets/7.x/fundamentals/lifecycleEvents.mp4" />
 </video>
 
 If you want to render different things based on if the screen is focused or not, you can use the [`useIsFocused`](use-is-focused.md) hook which returns a boolean indicating whether the screen is focused.

versioned_docs/version-6.x/params.md

@@ -65,7 +65,7 @@ function DetailsScreen({ route, navigation }) {
 ```
 
 <video playsInline autoPlay muted loop>
-  <source src="/assets/navigators/passing-params.mp4" />
+  <source src="/assets/7.x/fundamentals/navigatePassParams.mp4" />
 </video>
 
 ## Initial params
@@ -159,7 +159,7 @@ function CreatePostScreen({ navigation, route }) {
 ```
 
 <video playsInline autoPlay muted loop>
-  <source src="/assets/navigators/params-to-parent.mp4" />
+  <source src="/assets/7.x/fundamentals/navigatePassParamsToPrevScreen.mp4" />
 </video>
 
 Here, after you press "Done", the home screen's `route.params` will be updated to reflect the post text that you passed in `navigate`.

versioned_docs/version-7.x/header-buttons.md

@@ -107,7 +107,7 @@ export default function App() {
 </TabItem>
 </Tabs>
 
-![Header button](/assets/headers/header-button.png)
+<img src="/assets/7.x/fundamentals/buttonInHeader.png" width="500" alt="Button right in the header" />
 
 When we define our button this way, the `this` variable in `options` is _not_ the `HomeScreen` instance, so you can't call `setState` or any instance methods on it. This is pretty important because it's common to want the buttons in your header to interact with the screen that the header belongs to. So, we will look how to do this next.
 
@@ -236,8 +236,8 @@ export default function App() {
 </TabItem>
 </Tabs>
 
-<video playsInline autoPlay muted loop >
-  <source src="/assets/headers/header-update-screen.mp4" />
+<video playsInline autoPlay muted loop>
+  <source src="/assets/7.x/fundamentals/updateHeader.mp4" />
 </video>
 
 Here we update the `headerRight` with a button with `onPress` handler that has access to the component's state and can update it.
@@ -287,7 +287,7 @@ const MyStack = createNativeStackNavigator({
 </TabItem>
 </Tabs>
 
-![Header custom back](/assets/headers/header-back-custom.png)
+<img src="/assets/7.x/fundamentals/customBack.png" width="500" alt="Custom back button" />
 
 ## Overriding the back button
 

versioned_docs/version-7.x/headers.md

@@ -101,7 +101,7 @@ export default function App() {
 </TabItem>
 </Tabs>
 
-![Header title](/assets/headers/header-title.png)
+<img src="/assets/7.x/fundamentals/headerTitle.png" width="500" alt="Header title" />
 
 ## Using params in the title
 
@@ -416,7 +416,7 @@ export default function App() {
 </TabItem>
 </Tabs>
 
-![Custom header styles](/assets/headers/custom_headers.png)
+<img src="/assets/7.x/fundamentals/adjustHeaderStyle.png" width="500" alt="Adjust header style" />
 
 There are a couple of things to notice here:
 
@@ -671,12 +671,11 @@ export default function App() {
 }
 ```
 
-![Header custom title](/assets/headers/header-custom-title.png)
-
-You might be wondering, why `headerTitle` when we provide a component and not `title`, like before? The reason is that `headerTitle` is a property that is specific to stack navigators, the `headerTitle` defaults to a `Text` component that displays the `title`.
 </TabItem>
 </Tabs>
 
+<img src="/assets/7.x/fundamentals/headerCustomComponent.png" width="500" alt="Header custom component" />
+
 :::note
 
 You might be wondering, why `headerTitle` when we provide a component and not `title`, like before? The reason is that `headerTitle` is a property that is specific to headers, whereas `title` will be used for tab bars, drawers etc. as well. The `headerTitle` defaults to a `Text` component that displays the `title`.

versioned_docs/version-7.x/hello-react-navigation.md

@@ -118,7 +118,7 @@ export default function App() {
 </TabItem>
 </Tabs>
 
-![Basic app using stack navigator](/assets/navigators/stack/basic_stack_nav.png)
+<img src="/assets/7.x/fundamentals/basicAppUsingStackNavigator.jpeg" width="300" alt="Basic app using stack navigator" />
 
 If you run this code, you will see a screen with an empty navigation bar and a grey content area containing your `HomeScreen` component (shown above). The styles you see for the navigation bar and the content area are the default configuration for a stack navigator, we'll learn how to configure those later.
 

versioned_docs/version-7.x/navigating.md

@@ -82,7 +82,7 @@ export default function App() {
 ```
 
 <video playsInline autoPlay muted loop>
-  <source src="/assets/navigators/stack/simple-details.mp4" />
+  <source src="/assets/7.x/fundamentals/NavigateBasic.mp4" />
 </video>
 
 Let's break this down:
@@ -213,7 +213,7 @@ export default function App() {
 ```
 
 <video playsInline autoPlay muted loop>
-  <source src="/assets/navigators/stack/stack-push.mp4" />
+  <source src="/assets/7.x/fundamentals/navigateAgain.mp4" />
 </video>
 
 Each time you call `push` we add a new route to the navigation stack. When you call `navigate` it first tries to find an existing route with that name, and only pushes a new route if there isn't yet one on the stack.
@@ -281,7 +281,7 @@ export default function App() {
 ```
 
 <video playsInline autoPlay muted loop>
-  <source src="/assets/navigators/stack/back-home.mp4" />
+  <source src="/assets/7.x/fundamentals/navigateGoBack.mp4" />
 </video>
 
 :::note
@@ -353,7 +353,7 @@ export default function App() {
 ```
 
 <video playsInline autoPlay muted loop>
-  <source src="/assets/navigators/stack/pop-to-top.mp4" />
+  <source src="/assets/7.x/fundamentals/navigatePopToTop.mp4" />
 </video>
 
 ## Summary