Update snacks in guides (#598)

* Update snacks in guides

* Add minor fixes

Author: WoLewicki

docs/drawer-based-navigation.md

@@ -14,6 +14,7 @@ Before continuing, first install [`@react-navigation/drawer`](https://github.com
 
 To use this drawer navigator, import it from `@react-navigation/drawer`:  
 (swipe right to open)
+
 <samp id="drawer-based-navigation" />
 
 ```js
@@ -24,7 +25,7 @@ import { NavigationNativeContainer } from '@react-navigation/native';
 
 function HomeScreen({ navigation }) {
   return (
-    <View style={{ flex: 1, flexDirection: 'column-reverse' }}>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button
         onPress={() => navigation.navigate('Notifications')}
         title="Go to notifications"
@@ -35,7 +36,7 @@ function HomeScreen({ navigation }) {
 
 function NotificationsScreen({ navigation }) {
   return (
-    <View style={{ flex: 1, flexDirection: 'column-reverse' }}>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button onPress={() => navigation.goBack()} title="Go back home" />
     </View>
   );
@@ -57,7 +58,7 @@ export default function App() {
 
 ## Opening and closing drawer
 
-To open and close drawer, use the following helpers to open and close the drawer:
+To open and close drawer, use the following helpers:
 
 ```js
 navigation.openDrawer();

docs/function-after-focusing-screen.md

@@ -20,11 +20,13 @@ With this approach, we will only be able to call an action when the screen focus
 
 Example:
 
+<samp id="focus-event-listener" />
+
 ```js
 import * as React from 'react';
 import { View } from 'react-native';
 
-export default function TabScreen({ navigation }) {
+function ProfileScreen({ navigation }) {
   React.useEffect(() => {
     const unsubscribe = navigation.addListener('focus', () => {
       // The screen is focused
@@ -47,6 +49,8 @@ React Navigation provides a [hook](https://reactjs.org/docs/hooks-intro.html) th
 
 This is particularly handy when we are trying to stop something when the page is unfocused, like stopping a video or audio file from playing, or stopping the tracking of a user's location.
 
+<samp id="simple-focus-effect" />
+
 ```js
 import { useFocusEffect } from '@react-navigation/native';
 
@@ -73,6 +77,8 @@ The hook will return `true` when the screen is focused and `false` when our comp
 
 The `useIsFocused` hook will cause our component to re-render when we focus and unfocus a screen. Using this hook component may introduce unnecessary component re-renders as a screen comes in and out of focus. This could cause issues depending on the type of action we're calling on focusing. Hence we recommend to use this hook only if you need to trigger a re-render. For side-effects such as subscribing to events or fetching data, use the methods described above.
 
+<samp id="use-is-focused" />
+
 ```js
 import * as React from 'react';
 import { Text } from 'react-native';
@@ -86,4 +92,4 @@ function Profile() {
 }
 ```
 
-This example is also documented in the <a href="/docs/use-is-focused.html">`useIsFocused` API documentation</a>.
+This example is also documented in the [`useIsFocused` API documentation](use-is-focused.md).

docs/handling-safe-area.md

@@ -128,6 +128,8 @@ To fix this you can, once again, apply safe area insets your content. This will
 
 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:
 
+<samp id="use-safe-area" />
+
 ```jsx
 import { useSafeArea } from 'react-native-safe-area-context';
 

docs/localization.md

@@ -36,15 +36,18 @@ console.log(Localization.locale);
 Next let's store our `locale` in the state of our root app component and then thread it through `LocalizationContext` to make it available throughout our app.
 
 ```js
-export const LocalizationContext = React,createContext();
+export const LocalizationContext = React.createContext();
 
 export default function App() {
   const [locale, setLocale] = React.useState(Localization.locale);
-  const localizationContext = React.useMemo(() => ({
-    t: (scope, options) => i18n.t(scope, { locale, ...options }),
-    locale,
-    setlocale,
-  }), [locale]);
+  const localizationContext = React.useMemo(
+    () => ({
+      t: (scope, options) => i18n.t(scope, { locale, ...options }),
+      locale,
+      setLocale,
+    }),
+    [locale]
+  );
 
   return (
     <LocalizationContext.Provider value={localizationContext}>
@@ -58,7 +61,9 @@ export default function App() {
 
 Now in our screens we can use these `LocalizationContext` as follows:
 
-```jsx
+<samp id="localization" />
+
+```js
 function MyScreen() {
   const { t, locale, setLocale } = React.useContext(LocalizationContext);
 
@@ -83,6 +88,8 @@ function MyScreen() {
 
 We can also use it for screen options:
 
+<samp id="localization-with-title" />
+
 ```js
 function MyStack() {
   const { t } = React.useContext(LocalizationContext);
@@ -99,4 +106,4 @@ function MyStack() {
 }
 ```
 
-Refer to [themes](themes.html) and the [React documentation on context](https://reactjs.org/docs/context.html) for help.
+Refer to [themes](themes.md) and the [React documentation on context](https://reactjs.org/docs/context.html) for help.

docs/navigating-without-navigation-prop.md

@@ -8,7 +8,7 @@ Calling functions such as `navigate` or `popToTop` on the `navigation` prop is n
 
 You can get access to the root navigation object through a `ref` and pass it to the `NavigationService` which we will later use to navigate.
 
-```javascript
+```js
 // App.js
 
 import { NavigationNativeContainer } from '@react-navigation/native';
@@ -25,7 +25,7 @@ export default function App() {
 
 In the next step, we define `NavigationService` which is a simple module with functions that dispatch user-defined navigation actions.
 
-```javascript
+```js
 // NavigationService.js
 
 import * as React from 'react';
@@ -41,7 +41,9 @@ export function navigate(name, params) {
 
 Then, in any of your javascript modules, just import the `NavigationService` and call functions which you exported from it. You may use this approach outside of your React components and, in fact, it works just as well when used from within them.
 
-```javascript
+ <samp id="no-nav-prop" />
+
+```js
 // any js module
 import * as NavigationService from './path/to/NavigationService.js';
 

docs/redux-integration.md

@@ -4,7 +4,7 @@ title: Redux integration
 sidebar_label: Redux integration
 ---
 
-It is extremely easy to use Redux in an app with React Navigation. It's basically no different than without React Navigation. The following example shows how to do it end to end: https://snack.expo.io/@react-navigation/redux-example. The most important piece from it is the following:
+It is extremely easy to use Redux in an app with React Navigation. It's basically no different than without React Navigation.
 
 ```js
 import { Provider } from 'react-redux';
@@ -28,12 +28,14 @@ Notice that we wrap our components in a `Provider` like we'd normally do with `r
 
 Create a component, `connect` it to the store, then use that component in the `title`.
 
+ <samp id="redux-integration" />
+
 ```js
-function Count({ value }) {
+function Counter({ value }) {
   return <Text>Count: {value}</Text>;
 }
 
-const CountContainer = connect(state => ({ value: state.count }))(Count);
+const CounterContainer = connect(state => ({ value: state.count }))(Counter);
 ```
 
 ```js
@@ -50,10 +52,10 @@ If the value isn't expected to change, you can just pass it from a `connect`ed c
 
 ```js
 <Button
-  title="Go to static count screen"
+  title="Go to static counter screen"
   onPress={() =>
     props.navigation.navigate('StaticCounter', {
-      count: props.count,
+      count,
     })
   }
 />
@@ -69,34 +71,16 @@ function StaticCounter({ route }) {
 }
 ```
 
+ <samp id="redux-integration-nav-param" />
+
 ```js
-<Screen
-  name="Counter"
+<RootStack.Screen
+  name="StaticCounter"
   component={StaticCounter}
-  options={({ route }) => ({ title: () => route.params.count })}
+  options={({ route }) => ({ title: route.params.count })}
 />
 ```
 
-### setParams from your screen
-
-Let's modify the `StaticCounter` from the previous example as follows:
-
-```js
-function StaticCounter({ count, route, navigation }) {
-  React.useEffect(() => {
-    navigation.setParams({ count });
-  }, [navigation, count]);
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.paragraph}>{route.params.count}</Text>
-    </View>
-  );
-}
-```
-
-Now whenever the store updates we update the `count` param and the title updates accordingly.
-
 ## Can I store the navigation state in Redux too?
 
 This is not possible. We don't support it because it's too easy to shoot yourself in the foot and slow down / break your app.

docs/screen-options-resolution.md

@@ -12,58 +12,70 @@ In this document we'll explain how this works when there are multiple navigators
 
 Let's take for example a tab navigator that contains a stack in each tab. What happens if we set the `options` on a screen inside of the stack?
 
+<samp id="stack-in-tab-nav-options" />
+
 ```js
 const Tab = createTabNavigator();
 const HomeStack = createStackNavigator();
 const SettingsStack = createStackNavigator();
 
 function HomeStackScreen() {
   return (
-    <Tab.Navigator>
-      <Tab.Screen name="A" component={A} options={{ tabBarLabel: 'Home!' }} />
-    </Tab.Navigator>
+    <HomeStack.Navigator>
+      <HomeStack.Screen
+        name="A"
+        component={A}
+        options={{ tabBarLabel: 'Home!' }}
+      />
+    </HomeStack.Navigator>
   );
 }
 
 function SettingsStackScreen() {
   return (
-    <Tab.Navigator>
-      <Tab.Screen
+    <SettingsStack.Navigator>
+      <SettingsStack.Screen
         name="B"
         component={B}
         options={{ tabBarLabel: 'Settings!' }}
       />
-    </Tab.Navigator>
+    </SettingsStack.Navigator>
   );
 }
 
 export default function App() {
   return (
-    <Tab.Navigator>
-      <Tab.Screen name="Home" component={HomeStackScreen} />
-      <Tab.Screen name="Settings" component={SettingsStack} />
-    </Tab.Navigator>
+    <NavigationNativeContainer>
+      <Tab.Navigator>
+        <Tab.Screen name="Home" component={HomeStackScreen} />
+        <Tab.Screen name="Settings" component={SettingsStackScreen} />
+      </Tab.Navigator>
+    </NavigationNativeContainer>
   );
 }
 ```
 
 As we mentioned earlier, you can only modify navigation options for a navigator from one of its screen components. `A` and `B` above are screen components in `HomeStack` and `SettingsStack` respectively, not in the tab navigator. So the result will be that the `tabBarLabel` property is not applied to the tab navigator. We can fix this though!
 
+<samp id="stack-in-tab-nav-options-fixed" />
+
 ```js
 export default function App() {
   return (
-    <Tab.Navigator>
-      <Tab.Screen
-        name="Home"
-        component={HomeStackScreen}
-        options={{ tabBarLabel: 'Home!' }}
-      />
-      <Tab.Screen
-        name="Settings"
-        component={SettingsStack}
-        options={{ tabBarLabel: 'Settings!' }}
-      />
-    </Tab.Navigator>
+    <NavigationNativeContainer>
+      <Tab.Navigator>
+        <Tab.Screen
+          name="Home"
+          component={HomeStackScreen}
+          options={{ tabBarLabel: 'Home!' }}
+        />
+        <Tab.Screen
+          name="Settings"
+          component={SettingsStackScreen}
+          options={{ tabBarLabel: 'Settings!' }}
+        />
+      </Tab.Navigator>
+    </NavigationNativeContainer>
   );
 }
 ```
@@ -74,6 +86,8 @@ When we set the `options` directly on `Screen` components containing the `HomeSt
 
 Imagine the following configuration:
 
+<samp id="parent-options-from-child-start" />
+
 ```js
 const Tab = createBottomTabNavigator();
 
@@ -89,12 +103,14 @@ function HomeTabs() {
 
 const Stack = createStackNavigator();
 
-function App() {
+export default function App() {
   return (
-    <Stack.Navigator>
-      <Stack.Screen name="Home" component={HomeTabs} />
-      <Stack.Screen name="Settings" component={SettingsScreen} />
-    </Stack.Navigator>
+    <NavigationNativeContainer>
+      <Stack.Navigator>
+        <Stack.Screen name="Home" component={HomeTabs} />
+        <Stack.Screen name="Settings" component={SettingsScreen} />
+      </Stack.Navigator>
+    </NavigationNativeContainer>
   );
 }
 ```
@@ -127,6 +143,7 @@ function getHeaderTitle(route) {
 Then we can use this function in 2 ways:
 
 1. Using `options` prop on `Screen` (recommended):
+   <samp id="parent-options-from-child-opt1" />
 
    ```js
    <Stack.Screen
@@ -139,6 +156,7 @@ Then we can use this function in 2 ways:
    ```
 
 2. Using `navigation.setOptions`:
+   <samp id="parent-options-from-child-opt2" />
 
    ```js
    function HomeTabs({ navigation, route }) {
@@ -168,6 +186,8 @@ In many cases, similar behavior can be achieved by reorganizing our navigators.
 
 For example, for the above use case, instead of adding a tab navigator inside a stack navigator, we can add a stack navigator inside each of the tabs.
 
+<samp id="reorganized-navigators" />
+
 ```js
 const FeedStack = createStackNavigator();
 

docs/screen-tracking.md

@@ -15,6 +15,8 @@ To get notified of state changes, we can use the `onStateChange` prop on `Naviga
 
 This example shows how to do screen tracking and send to Google Analytics. The approach can be adapted to any other analytics SDK.
 
+ <samp id="screen-tracking-for-analytics" />
+
 ```js
 import * as React from 'react';
 import analytics from '@react-native-firebase/analytics';