Fixes to examples

Author: satya164

Diff for: versioned_docs/version-7.x/auth-flow.md

@@ -33,7 +33,7 @@ We want the following behavior from our authentication flow:
 We can configure different screens to be available based on some condition. For example, if the user is signed in, we can define `Home`, `Profile`, `Settings` etc. If the user is not signed in, we can define `SignIn` and `SignUp` screens.
 
 <Tabs groupId="config" queryString="config">
-<TabItem value="static" label="Static">
+<TabItem value="static" label="Static" default>
 
 To do this, we need a couple of things:
 
@@ -449,9 +449,9 @@ In our component, we will:
 
 So our component will look like this:
 <Tabs groupId="config" queryString="config">
-<TabItem value="static" label="Static">
+<TabItem value="static" label="Static" default>
 
-```js name="Signing in and signing out with AuthContext" snack version=7
+```js name="Signing in and signing out with AuthContext" snack version=7 dependencies=expo-secure-store
 // codeblock-focus-start
 import * as React from 'react';
 import * as SecureStore from 'expo-secure-store';
@@ -625,7 +625,6 @@ const RootStack = createNativeStackNavigator({
       screen: SignInScreen,
       options: {
         title: 'Sign in',
-        animationTypeForReplace: state.isSignout ? 'pop' : 'push',
       },
       if: useIsSignedOut,
     },
@@ -639,7 +638,7 @@ const Navigation = createStaticNavigation(RootStack);
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Signing in and signing out with AuthContext" snack version=7
+```js name="Signing in and signing out with AuthContext" snack version=7 dependencies=expo-secure-store
 // codeblock-focus-start
 import * as React from 'react';
 import * as SecureStore from 'expo-secure-store';
@@ -843,7 +842,7 @@ You can similarly fill in the other screens according to your requirements.
 Consider the following example:
 
 <Tabs groupId="config" queryString="config">
-<TabItem value="static" label="Static">
+<TabItem value="static" label="Static" default>
 
 ```js
 const RootStack = createNativeStackNavigator({
@@ -898,7 +897,7 @@ This can be a problem, we probably want the user to be taken to the `SignIn` scr
 So our updated code will look like following:
 
 <Tabs groupId="config" queryString="config">
-<TabItem value="static" label="Static">
+<TabItem value="static" label="Static" default>
 
 ```js
 const RootStack = createNativeStackNavigator({
@@ -957,7 +956,7 @@ const RootStack = createNativeStackNavigator({
 If you have a bunch of shared screens, you can also use [`navigationKey` with a `Group`](group.md#navigationkey) to remove all of the screens in the group. For example:
 
 <Tabs groupId="config" queryString="config">
-<TabItem value="static" label="Static">
+<TabItem value="static" label="Static" default>
 
 ```js
 const RootStack = createNativeStackNavigator({

Diff for: versioned_docs/version-7.x/drawer-based-navigation.md

@@ -120,7 +120,7 @@ export default function App() {
 
 To open and close drawer, use the following helpers:
 <Tabs groupId="config" queryString="config">
-<TabItem value="static" label="Static">
+<TabItem value="static" label="Static" default>
 
 ```js name="Drawer open and close" snack version=7
 import * as React from 'react';
@@ -432,7 +432,7 @@ export default function App() {
 Each of these functions, behind the scenes, are simply dispatching actions:
 
 <Tabs groupId="config" queryString="config">
-<TabItem value="static" label="Static">
+<TabItem value="static" label="Static" default>
 
 ```js name="Navigation dispatcher" snack version=7
 import * as React from 'react';

Diff for: versioned_docs/version-7.x/elements.md

@@ -164,7 +164,7 @@ For example, you can use this with `headerTransparent` to render a blur view to
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Header blur" snack version=7 dependencies=expo-blur@~12.9.1
+```js name="Header blur" snack version=7 dependencies=expo-blur
 import * as React from 'react';
 import { Button, View, StyleSheet } from 'react-native';
 import {
@@ -231,7 +231,7 @@ export default App;
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Header blur" snack version=7 dependencies=expo-blur@~12.9.1
+```js name="Header blur" snack version=7 dependencies=expo-blur
 import * as React from 'react';
 import { Button, View, StyleSheet } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';

Diff for: versioned_docs/version-7.x/group.md

@@ -40,7 +40,7 @@ After creating the navigator, it can be used as children of the `Navigator` comp
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Stack groups" snack version=7 dependencies=@react-navigation/elements
+```js name="Stack groups" snack version=7
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';
@@ -105,7 +105,7 @@ export default function App() {
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Stack groups" snack version=7 dependencies=@react-navigation/elements
+```js name="Stack groups" snack version=7
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';

Diff for: versioned_docs/version-7.x/handling-safe-area.md

@@ -328,7 +328,7 @@ To fix this you can, once again, apply safe area insets to your content. This wi
 In some cases you might need more control over which paddings are applied. For example, you can only apply the top and the bottom padding by changing the `style` object:
 
 <Tabs groupId="config" queryString="config">
-<TabItem value="static" label="Static">
+<TabItem value="static" label="Static" default>
 
 ```js name="useSafeAreaInsets hook" snack version=7
 import * as React from 'react';

Diff for: versioned_docs/version-7.x/navigating-without-navigation-prop.md

@@ -79,7 +79,7 @@ export function navigate(name, params) {
 Then, in any of your javascript modules, import the `RootNavigation` and call functions which you exported from it. You may use this approach outside of your React components and, in fact, it works as well when used from within them.
 
 <Tabs groupId="config" queryString="config">
-<TabItem value="static" label="Static">
+<TabItem value="static" label="Static" default>
 
 ```js name="Using navigate in any js module" snack version=7
 import * as React from 'react';
@@ -237,7 +237,7 @@ For an example, consider the following scenario, you have a screen somewhere in
 To avoid this, you can use the `isReady()` method available on the ref as shown in the above examples.
 
 <Tabs groupId="config" queryString="config">
-<TabItem value="static" label="Static">
+<TabItem value="static" label="Static" default>
 
 ```js name="Handling navigation init" snack version=7
 import * as React from 'react';

Diff for: versioned_docs/version-7.x/navigation-container.md

@@ -67,7 +67,7 @@ Example:
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Using refs" snack version=7 dependencies=@react-navigation/elements
+```js name="Using refs" snack version=7
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';
@@ -115,7 +115,7 @@ export default function App() {
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Using refs" snack version=7 dependencies=@react-navigation/elements
+```js name="Using refs" snack version=7
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';

Diff for: versioned_docs/version-7.x/navigation-context.md

@@ -16,7 +16,7 @@ Example:
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Navigation context" snack version=7 dependencies=@react-navigation/elements
+```js name="Navigation context" snack version=7
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';
@@ -80,7 +80,7 @@ export default App;
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Navigation context" snack version=7 dependencies=@react-navigation/elements
+```js name="Navigation context" snack version=7
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';

Diff for: versioned_docs/version-7.x/navigation-object.md

@@ -75,7 +75,7 @@ The `navigate` method lets us navigate to another screen in your app. It takes t
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Navigate method" snack version=7 dependencies=@react-navigation/elements
+```js name="Navigate method" snack version=7
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';
@@ -143,7 +143,7 @@ export default App;
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Navigate method" snack version=7 dependencies=@react-navigation/elements
+```js name="Navigate method" snack version=7
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';
@@ -249,7 +249,7 @@ By default, `goBack` will go back from the screen that it is called from:
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Navigate method" snack version=7 dependencies=@react-navigation/elements
+```js name="Navigate method" snack version=7
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';
@@ -316,7 +316,7 @@ export default App;
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Navigate method" snack version=7 dependencies=@react-navigation/elements
+```js name="Navigate method" snack version=7
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';
@@ -380,7 +380,7 @@ The `reset` method lets us replace the navigator state with a new state:
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Navigate - replace and reset" snack version=7 dependencies=@react-navigation/elements
+```js name="Navigate - replace and reset" snack version=7
 import * as React from 'react';
 import { Button } from '@react-navigation/elements';
 import { View, Text } from 'react-native';
@@ -498,7 +498,7 @@ export default App;
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Navigate - replace and reset" snack version=7 dependencies=@react-navigation/elements
+```js name="Navigate - replace and reset" snack version=7
 import * as React from 'react';
 import { Button } from '@react-navigation/elements';
 import { View, Text } from 'react-native';
@@ -620,7 +620,7 @@ The `setParams` method lets us update the params (`route.params`) of the current
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Navigate - setParams" snack version=7 dependencies=@react-navigation/elements
+```js name="Navigate - setParams" snack version=7
 import * as React from 'react';
 import { Button } from '@react-navigation/elements';
 import { View, Text } from 'react-native';
@@ -708,7 +708,7 @@ export default App;
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Navigate - setParams" snack version=7 dependencies=@react-navigation/elements
+```js name="Navigate - setParams" snack version=7
 import * as React from 'react';
 import { Button } from '@react-navigation/elements';
 import { View, Text } from 'react-native';
@@ -796,7 +796,7 @@ The `setOptions` method lets us set screen options from within the component. Th
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Navigate - setOptions" snack version=7 dependencies=@react-navigation/elements
+```js name="Navigate - setOptions" snack version=7
 import * as React from 'react';
 import { View, Text, TextInput } from 'react-native';
 import { Button } from '@react-navigation/elements';
@@ -872,7 +872,7 @@ export default App;
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Navigate - setOptions" snack version=7 dependencies=@react-navigation/elements
+```js name="Navigate - setOptions" snack version=7
 import * as React from 'react';
 import { View, Text, TextInput } from 'react-native';
 import { Button } from '@react-navigation/elements';
@@ -957,7 +957,7 @@ Screens can add listeners on the `navigation` object with the `addListener` meth
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Navigation events" snack version=7 dependencies=@react-navigation/elements
+```js name="Navigation events" snack version=7
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';
@@ -1022,7 +1022,7 @@ export default function App() {
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Navigation events" snack version=7 dependencies=@react-navigation/elements
+```js name="Navigation events" snack version=7
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';

Diff for: versioned_docs/version-7.x/screen-options.md

@@ -20,7 +20,7 @@ You can pass a prop named `options` to the `Screen` component to configure a scr
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Screen title option" snack version=7 dependencies=@react-navigation/elements
+```js name="Screen title option" snack version=7
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import Button from '@react-navigation/elements';
@@ -83,7 +83,7 @@ export default function App() {
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Screen title option" snack version=7 dependencies=@react-navigation/elements
+```js name="Screen title option" snack version=7
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import Button from '@react-navigation/elements';
@@ -186,7 +186,7 @@ Example:
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Screen options for group" snack version=7 dependencies=@react-navigation/elements
+```js name="Screen options for group" snack version=7
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';
@@ -248,7 +248,7 @@ export default function App() {
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Screen options for group" snack version=7 dependencies=@react-navigation/elements
+```js name="Screen options for group" snack version=7
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';

Diff for: versioned_docs/version-7.x/testing.md

@@ -63,7 +63,7 @@ We recommend using [React Native Testing Library](https://callstack.github.io/re
 Example:
 
 <Tabs groupId="config" queryString="config">
-<TabItem value="static" label="Static">
+<TabItem value="static" label="Static" default>
 
 ```js name='Testing with jest'
 import * as React from 'react';

Diff for: versioned_docs/version-7.x/themes.md

@@ -329,7 +329,7 @@ import { DefaultTheme, DarkTheme } from '@react-navigation/native';
 On iOS 13+ and Android 10+, you can get user's preferred color scheme (`'dark'` or `'light'`) with the ([Appearance API](https://reactnative.dev/docs/appearance)).
 
 <Tabs groupId="config" queryString="config">
-<TabItem value="static" label="Static">
+<TabItem value="static" label="Static" default>
 
 ```js name="Operating system color theme" snack version=7
 import * as React from 'react';
@@ -554,7 +554,7 @@ export default function App() {
 To gain access to the theme in any component that is rendered inside the navigation container:, you can use the `useTheme` hook. It returns the theme object:
 
 <Tabs groupId="config" queryString="config">
-<TabItem value="static" label="Static">
+<TabItem value="static" label="Static" default>
 
 ```js name="System themes" snack version=7
 import * as React from 'react';