diff --git a/static/assets/7.x/fundamentals/BasicAppUsingStackNavigator.jpeg b/static/assets/7.x/fundamentals/BasicAppUsingStackNavigator.jpeg new file mode 100644 index 0000000000..8b83e7f550 Binary files /dev/null and b/static/assets/7.x/fundamentals/BasicAppUsingStackNavigator.jpeg differ diff --git a/static/assets/7.x/fundamentals/NavigateBasic.mp4 b/static/assets/7.x/fundamentals/NavigateBasic.mp4 new file mode 100644 index 0000000000..fd90f68dce Binary files /dev/null and b/static/assets/7.x/fundamentals/NavigateBasic.mp4 differ diff --git a/static/assets/7.x/fundamentals/adjustHeaderStyle.png b/static/assets/7.x/fundamentals/adjustHeaderStyle.png new file mode 100644 index 0000000000..9d7e2660f7 Binary files /dev/null and b/static/assets/7.x/fundamentals/adjustHeaderStyle.png differ diff --git a/static/assets/7.x/fundamentals/buttonInHeader.png b/static/assets/7.x/fundamentals/buttonInHeader.png new file mode 100644 index 0000000000..196fb467df Binary files /dev/null and b/static/assets/7.x/fundamentals/buttonInHeader.png differ diff --git a/static/assets/7.x/fundamentals/customBack.png b/static/assets/7.x/fundamentals/customBack.png new file mode 100644 index 0000000000..057eda829c Binary files /dev/null and b/static/assets/7.x/fundamentals/customBack.png differ diff --git a/static/assets/7.x/fundamentals/headerCustomComponent.png b/static/assets/7.x/fundamentals/headerCustomComponent.png new file mode 100644 index 0000000000..a01de88655 Binary files /dev/null and b/static/assets/7.x/fundamentals/headerCustomComponent.png differ diff --git a/static/assets/7.x/fundamentals/headerTitle.png b/static/assets/7.x/fundamentals/headerTitle.png new file mode 100644 index 0000000000..ab186946f6 Binary files /dev/null and b/static/assets/7.x/fundamentals/headerTitle.png differ diff --git a/static/assets/7.x/fundamentals/lifecycleEvents.mp4 b/static/assets/7.x/fundamentals/lifecycleEvents.mp4 new file mode 100644 index 0000000000..260de6d8ee Binary files /dev/null and b/static/assets/7.x/fundamentals/lifecycleEvents.mp4 differ diff --git a/static/assets/7.x/fundamentals/navigateAgain.mp4 b/static/assets/7.x/fundamentals/navigateAgain.mp4 new file mode 100644 index 0000000000..b42fea1d26 Binary files /dev/null and b/static/assets/7.x/fundamentals/navigateAgain.mp4 differ diff --git a/static/assets/7.x/fundamentals/navigateGoBack.mp4 b/static/assets/7.x/fundamentals/navigateGoBack.mp4 new file mode 100644 index 0000000000..86c997d926 Binary files /dev/null and b/static/assets/7.x/fundamentals/navigateGoBack.mp4 differ diff --git a/static/assets/7.x/fundamentals/navigatePassParams.mp4 b/static/assets/7.x/fundamentals/navigatePassParams.mp4 new file mode 100644 index 0000000000..5c643f65c0 Binary files /dev/null and b/static/assets/7.x/fundamentals/navigatePassParams.mp4 differ diff --git a/static/assets/7.x/fundamentals/navigatePassParamsToPrevScreen.mp4 b/static/assets/7.x/fundamentals/navigatePassParamsToPrevScreen.mp4 new file mode 100644 index 0000000000..a7d09f7c18 Binary files /dev/null and b/static/assets/7.x/fundamentals/navigatePassParamsToPrevScreen.mp4 differ diff --git a/static/assets/7.x/fundamentals/navigatePopToTop.mp4 b/static/assets/7.x/fundamentals/navigatePopToTop.mp4 new file mode 100644 index 0000000000..56bbe537da Binary files /dev/null and b/static/assets/7.x/fundamentals/navigatePopToTop.mp4 differ diff --git a/static/assets/7.x/fundamentals/navigationLifecycle.mp4 b/static/assets/7.x/fundamentals/navigationLifecycle.mp4 new file mode 100644 index 0000000000..dd008d686a Binary files /dev/null and b/static/assets/7.x/fundamentals/navigationLifecycle.mp4 differ diff --git a/static/assets/7.x/fundamentals/updateHeader.mp4 b/static/assets/7.x/fundamentals/updateHeader.mp4 new file mode 100644 index 0000000000..e14632e5a7 Binary files /dev/null and b/static/assets/7.x/fundamentals/updateHeader.mp4 differ diff --git a/versioned_docs/version-6.x/header-buttons.md b/versioned_docs/version-6.x/header-buttons.md index 2bc044849a..f42b679f90 100755 --- a/versioned_docs/version-6.x/header-buttons.md +++ b/versioned_docs/version-6.x/header-buttons.md @@ -35,7 +35,7 @@ function StackScreen() { } ``` -![Header button](/assets/headers/header-button.png) +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 }) { ``` 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 ``` -![Header custom back](/assets/headers/header-back-custom.png) +Custom back button ## Overriding the back button diff --git a/versioned_docs/version-6.x/headers.md b/versioned_docs/version-6.x/headers.md index 5cfd92bad7..88fa804050 100755 --- a/versioned_docs/version-6.x/headers.md +++ b/versioned_docs/version-6.x/headers.md @@ -26,7 +26,7 @@ function StackScreen() { } ``` -![Header title](/assets/headers/header-title.png) +Header title ## Using params in the title @@ -107,7 +107,7 @@ function StackScreen() { } ``` -![Custom header styles](/assets/headers/custom_headers.png) +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) +Header custom component :::note diff --git a/versioned_docs/version-6.x/hello-react-navigation.md b/versioned_docs/version-6.x/hello-react-navigation.md index 946ea1737f..dddffdee9a 100755 --- a/versioned_docs/version-6.x/hello-react-navigation.md +++ b/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) +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. diff --git a/versioned_docs/version-6.x/navigating.md b/versioned_docs/version-6.x/navigating.md index 794fb5edb0..cdbc51aa71 100755 --- a/versioned_docs/version-6.x/navigating.md +++ b/versioned_docs/version-6.x/navigating.md @@ -52,7 +52,7 @@ function HomeScreen({ navigation }) { ``` Let's break this down: @@ -100,7 +100,7 @@ Let's suppose that we actually _want_ to add another details screen. This is pre ``` 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 }) { ``` :::note @@ -164,7 +164,7 @@ function DetailsScreen({ navigation }) { ``` ## Summary diff --git a/versioned_docs/version-6.x/navigation-lifecycle.md b/versioned_docs/version-6.x/navigation-lifecycle.md index 86976bd034..7a93894909 100755 --- a/versioned_docs/version-6.x/navigation-lifecycle.md +++ b/versioned_docs/version-6.x/navigation-lifecycle.md @@ -51,7 +51,7 @@ function App() { ``` 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() { ``` 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. diff --git a/versioned_docs/version-6.x/params.md b/versioned_docs/version-6.x/params.md index c6b796857b..446b5a1eda 100755 --- a/versioned_docs/version-6.x/params.md +++ b/versioned_docs/version-6.x/params.md @@ -65,7 +65,7 @@ function DetailsScreen({ route, navigation }) { ``` ## Initial params @@ -159,7 +159,7 @@ function CreatePostScreen({ navigation, route }) { ``` Here, after you press "Done", the home screen's `route.params` will be updated to reflect the post text that you passed in `navigate`. diff --git a/versioned_docs/version-7.x/header-buttons.md b/versioned_docs/version-7.x/header-buttons.md index 025baecf06..27e9d0e551 100755 --- a/versioned_docs/version-7.x/header-buttons.md +++ b/versioned_docs/version-7.x/header-buttons.md @@ -107,7 +107,7 @@ export default function App() { -![Header button](/assets/headers/header-button.png) +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() { -