Use device frame in fundamentals docs

Author: satya164

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

@@ -107,8 +107,12 @@ export default function App() {
 </TabItem>
 </Tabs>
 
+<div className="device-frame">
+
 ![Header button](/assets/fundamentals/header-button.png)
 
+</div>
+
 When we define our button this way, you can't access or update the screen component's state in 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.
 
 ## Header interaction with its screen component
@@ -230,9 +234,11 @@ export default function App() {
 </TabItem>
 </Tabs>
 
+<div className="device-frame">
 <video playsInline autoPlay muted loop >
   <source src="/assets/fundamentals/header-screen-interaction.mp4" />
 </video>
+</div>
 
 Here we update `headerRight` with a button that has `onPress` handler that can access and update the component's state, since it's defined inside the component. We also specify a placeholder button without `onPress` in the screen's `options` to reserve the header space and avoid a layout shift when `setOptions` replaces it on mount.
 

versioned_docs/version-7.x/headers.md

@@ -49,8 +49,12 @@ export default function App() {
 }
 ```
 
+<div className="device-frame">
+
 ![Header title](/assets/fundamentals/header-title.png)
 
+</div>
+
 ## Using params in the title
 
 To use params in the title, make `options` a function that returns a configuration object. React Navigation calls this function with `{ navigation, route }` - so you can use `route.params` to access the params:
@@ -229,8 +233,12 @@ export default function App() {
 }
 ```
 
+<div className="device-frame">
+
 ![Custom header styles](/assets/fundamentals/header-styles.png)
 
+</div>
+
 There are a couple of things to notice here:
 
 1. On iOS, the status bar text and icons are black by default, which doesn't look great over a dark background. We won't discuss it here, but see the [status bar guide](status-bar.md) to configure it.
@@ -352,8 +360,12 @@ export default function App() {
 }
 ```
 
+<div className="device-frame">
+
 ![Header custom title](/assets/fundamentals/header-title-custom.png)
 
+</div>
+
 :::note
 
 `headerTitle` is header-specific, while `title` is also used by tab bars and drawers, or as page title on web. `headerTitle` defaults to displaying the `title` in a `Text` component.

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

@@ -128,8 +128,12 @@ In a typical React Native app, the `NavigationContainer` should be only used onc
 </TabItem>
 </Tabs>
 
+<div className="device-frame">
+
 ![Basic app using stack navigator](/assets/fundamentals/basic-stack.png)
 
+</div>
+
 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). These are the default styles for a stack navigator - we'll learn how to customize them later.
 
 :::tip

versioned_docs/version-7.x/navigating.md

@@ -144,9 +144,11 @@ export default function App() {
 }
 ```
 
+<div className="device-frame">
 <video playsInline autoPlay muted loop>
   <source src="/assets/fundamentals/navigate.mp4" />
 </video>
+</div>
 
 The [`useNavigation`](use-navigation.md) hook returns the navigation object. We can call `navigate` with the route name we want to go to.
 
@@ -272,9 +274,11 @@ export default function App() {
 }
 ```
 
+<div className="device-frame">
 <video playsInline autoPlay muted loop>
   <source src="/assets/fundamentals/stack-push.mp4" />
 </video>
+</div>
 
 Each `push` call adds a new route to the stack, while `navigate` only pushes if you're not already on that route.
 
@@ -340,9 +344,11 @@ export default function App() {
 }
 ```
 
+<div className="device-frame">
 <video playsInline autoPlay muted loop>
   <source src="/assets/fundamentals/go-back.mp4" />
 </video>
+</div>
 
 :::note
 
@@ -415,9 +421,11 @@ export default function App() {
 }
 ```
 
+<div className="device-frame">
 <video playsInline autoPlay muted loop>
   <source src="/assets/fundamentals/pop-to-top.mp4" />
 </video>
+</div>
 
 ## Summary
 

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

@@ -263,8 +263,16 @@ function SettingsStackScreen() {
 function Root() {
   return (
     <MyTabs.Navigator screenOptions={{ headerShown: false }}>
-      <MyTabs.Screen name="HomeStack" component={HomeStackScreen} options={{ tabBarLabel: 'Home' }} />
-      <MyTabs.Screen name="SettingsStack" component={SettingsStackScreen} options={{ tabBarLabel: 'Settings' }} />
+      <MyTabs.Screen
+        name="HomeStack"
+        component={HomeStackScreen}
+        options={{ tabBarLabel: 'Home' }}
+      />
+      <MyTabs.Screen
+        name="SettingsStack"
+        component={SettingsStackScreen}
+        options={{ tabBarLabel: 'Settings' }}
+      />
     </MyTabs.Navigator>
   );
 }
@@ -282,9 +290,11 @@ export default function App() {
 </TabItem>
 </Tabs>
 
+<div className="device-frame">
 <video playsInline autoPlay muted loop>
   <source src="/assets/fundamentals/lifecycle.mp4" />
 </video>
+</div>
 
 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!
 
@@ -618,9 +628,11 @@ export default function App() {
 </TabItem>
 </Tabs>
 
+<div className="device-frame">
 <video playsInline autoPlay muted loop>
   <source src="/assets/fundamentals/focus-effect.mp4" />
 </video>
+</div>
 
 To render different things based on whether the screen is focused, we can use the [`useIsFocused`](use-is-focused.md) hook which returns a boolean indicating whether the screen is focused.
 

versioned_docs/version-7.x/params.md

@@ -98,9 +98,11 @@ export default function App() {
 }
 ```
 
+<div className="device-frame">
 <video playsInline autoPlay muted loop>
   <source src="/assets/fundamentals/passing-params.mp4" />
 </video>
+</div>
 
 ## Initial params
 
@@ -278,9 +280,11 @@ export default function App() {
 }
 ```
 
+<div className="device-frame">
 <video playsInline autoPlay muted loop>
   <source src="/assets/fundamentals/passing-params-back.mp4" />
 </video>
+</div>
 
 After pressing "Done", the home screen's `route.params` will be updated with the post text.
 

versioned_docs/version-8.x/auth-flow.md

@@ -1002,5 +1002,6 @@ const RootStack = createNativeStackNavigator({
 The `routeNamesChangeBehavior` option allows you to control how React Navigation handles navigation when the available screens change because of conditions such as authentication state. When `lastUnhandled` is specified, React Navigation will remember the last screen that couldn't be handled, and after the condition changes, it'll automatically navigate to that screen if it's now available.
 
 <video playsInline autoPlay muted loop style={{ width: '500px', aspectRatio: 1 / 1 }}>
+
   <source src="/assets/deep-linking/deep-link-auth.mp4" />
 </video>

versioned_docs/version-8.x/elements.md

@@ -722,9 +722,7 @@ It can also be a function that returns a React Element to render any component:
 
 ```js
 <HeaderBackButton
-  icon={({ tintColor }) => (
-    <MyCustomBackIconComponent tintColor={tintColor} />
-  )}
+  icon={({ tintColor }) => <MyCustomBackIconComponent tintColor={tintColor} />}
   onPress={() => console.log('back pressed')}
 />
 ```

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

@@ -55,8 +55,12 @@ export default function App() {
 }
 ```
 
+<div className="device-frame">
+
 ![Header button](/assets/fundamentals/header-button.png)
 
+</div>
+
 When we define our button this way, you can't access or update the screen component's state in 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.
 
 ## Header interaction with its screen component
@@ -117,9 +121,11 @@ export default function App() {
 }
 ```
 
+<div className="device-frame">
 <video playsInline autoPlay muted loop >
   <source src="/assets/fundamentals/header-screen-interaction.mp4" />
 </video>
+</div>
 
 Here we update `headerRight` with a button that has `onPress` handler that can access and update the component's state, since it's defined inside the component. We also specify a placeholder button without `onPress` in the screen's `options` to reserve the header space and avoid a layout shift when `setOptions` replaces it on mount.
 

versioned_docs/version-8.x/headers.md

@@ -52,8 +52,12 @@ export default function App() {
 }
 ```
 
+<div className="device-frame">
+
 ![Header title](/assets/fundamentals/header-title.png)
 
+</div>
+
 ## Using params in the title
 
 To use params in the title, make `options` a function that returns a configuration object. React Navigation calls this function with `{ navigation, route }` - so you can use `route.params` to access the params:
@@ -235,8 +239,12 @@ export default function App() {
 }
 ```
 
+<div className="device-frame">
+
 ![Custom header styles](/assets/fundamentals/header-styles.png)
 
+</div>
+
 There are a couple of things to notice here:
 
 1. On iOS, the status bar text and icons are black by default, which doesn't look great over a dark background. We won't discuss it here, but see the [status bar guide](status-bar.md) to configure it.
@@ -358,8 +366,12 @@ export default function App() {
 }
 ```
 
+<div className="device-frame">
+
 ![Header custom title](/assets/fundamentals/header-title-custom.png)
 
+</div>
+
 :::note
 
 `headerTitle` is header-specific, while `title` is also used by tab bars and drawers, or as page title on web. `headerTitle` defaults to displaying the `title` in a `Text` component.