feat: add snacks to api reference docs (#616)

* feat: add snacks to api reference docs

* fix: add requested changes

Author: WoLewicki

docs/bottom-tab-navigator.md

@@ -16,22 +16,24 @@ yarn add @react-navigation/bottom-tabs@next
 
 To use this tab navigator, import it from `@react-navigation/bottom-tabs`:
 
+<samp id="tab-based-navigation-minimal" />
+
 ```js
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
 const Tab = createBottomTabNavigator();
 
-function App() {
+function MyTabs() {
   return (
     <Tab.Navigator>
-      <Tab.Screen name="Feed" component={Feed} />
-      <Tab.Screen name="Article" component={Article} />
+      <Tab.Screen name="Home" component={HomeScreen} />
+      <Tab.Screen name="Settings" component={SettingsScreen} />
     </Tab.Navigator>
   );
 }
 ```
 
-> For a complete usage guide please visit [Tab Navigation](https://reactnavigation.org/docs/tab-based-navigation.html)
+> For a complete usage guide please visit [Tab Navigation](tab-based-navigation.md)
 
 ### Props
 
@@ -68,6 +70,8 @@ Function that returns a React element to display as the tab bar.
 
 Example:
 
+<samp id="custom-tab-bar" />
+
 ```js
 import { View, Text, TouchableOpacity } from 'react-native';
 
@@ -196,7 +200,9 @@ This event is fired when the user presses the tab button for the current screen
   - If the screen for the tab renders a scroll view, scroll to top is performed by `useScrollToTop`
   - If the screen for the tab renders a stack navigator, a `popToTop` action is performed on the stack
 
-To prevent the default behavior, you can call `eventPreventDefault`:
+To prevent the default behavior, you can call `event.preventDefault`:
+
+<samp id="bottom-tab-prevent-default">
 
 ```js
 navigation.addListener('tabPress', e => {
@@ -225,19 +231,23 @@ Navigates to an existing screen in the tab navigator. The method accepts followi
 - `name` - _string_ - Name of the route to jump to.
 - `params` - _object_ - Screen params to merge into the destination route (found in the pushed screen through `route.params`).
 
+<samp id="tab-jump-to">
+
 ```js
-navigation.jumpTo('Profile', { name: 'Michaś' });
+navigation.jumpTo('Profile', { owner: 'Michaś' });
 ```
 
 ## Example
 
+<samp id="bottom-tab-example">
+
 ```js
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { MaterialCommunityIcons } from 'react-native-vector-icons';
 
 const Tab = createBottomTabNavigator();
 
-function App() {
+function MyTabs() {
   return (
     <Tab.Navigator
       initialRouteName="Feed"

docs/custom-navigators.md

@@ -14,7 +14,7 @@ We include some commonly needed navigators such as:
 
 - [`createStackNavigator`](stack-navigator.html) - Renders one screen at a time and provides transitions between screens. When a new screen is opened it is placed on top of the stack.
 - [`createNativeStackNavigator`](native-stack-navigator.html) - Similar to `createStackNavigator`, but implemented using native navigation primitives such as `UINavigationController` on iOS and `Fragment` on Android.
-- [`createDrawerNavigator`](drawer-navigator.html) - Provides a drawer that slides in from the left of the screen.
+- [`createDrawerNavigator`](drawer-navigator.html) - Provides a drawer that slides in from the left of the screen by default.
 - [`createBottomTabNavigator`](bottom-tab-navigator.html) - Renders a tab bar that lets the user switch between several screens.
 - [`createMaterialTopTabNavigator`](material-top-tab-navigator.html) - Renders tab view which lets the user switch between several screens using swipe gesture or the tab bar.
 - [`createMaterialBottomTabNavigator`](material-bottom-tab-navigator.html) - Renders tab view which lets the user switch between several screens using swipe gesture or the tab bar.
@@ -288,6 +288,5 @@ const { state, descriptors, navigation } = useNavigationBuilder(MyRouter, {
   screenOptions,
 });
 
-
 // ...
 ```

docs/drawer-actions.md

@@ -12,6 +12,8 @@ The following actions are supported:
 
 The `openDrawer` action can be used to open the drawer pane.
 
+<samp id="drawer-actions">
+
 ```js
 import { DrawerActions } from '@react-navigation/routers';
 
@@ -20,7 +22,9 @@ navigation.dispatch(DrawerActions.openDrawer());
 
 ### closeDrawer
 
-The `openDrawer` action can be used to close the drawer pane.
+The `closeDrawer` action can be used to close the drawer pane.
+
+<samp id="drawer-actions">
 
 ```js
 import { DrawerActions } from '@react-navigation/routers';
@@ -32,6 +36,8 @@ navigation.dispatch(DrawerActions.closeDrawer());
 
 The `toggleDrawer` action can be used to open the drawer pane if closed, or close if open.
 
+<samp id="drawer-actions">
+
 ```js
 import { DrawerActions } from '@react-navigation/routers';
 
@@ -45,6 +51,8 @@ The `jumpTo` action can be used to jump to an existing route in the drawer navig
 - `name` - _string_ - Name of the route to jump to.
 - `params` - _object_ - Screen params to merge into the destination route (found in the pushed screen through `route.params`).
 
+<samp id="drawer-actions">
+
 ```js
 import { DrawerActions } from '@react-navigation/routers';
 

docs/drawer-based-navigation.md

@@ -60,19 +60,25 @@ export default function App() {
 
 To open and close drawer, use the following helpers:
 
+<samp id="drawer-open-close-toggle">
+
 ```js
 navigation.openDrawer();
 navigation.closeDrawer();
 ```
 
 If you would like to toggle the drawer you call the following:
 
+<samp id="drawer-open-close-toggle">
+
 ```js
 navigation.toggleDrawer();
 ```
 
 Each of these functions, behind the scenes, are simply dispatching actions:
 
+<samp id="drawer-dispatch">
+
 ```js
 navigation.dispatch(DrawerActions.openDrawer());
 navigation.dispatch(DrawerActions.closeDrawer());

docs/drawer-navigator.md

@@ -16,12 +16,14 @@ yarn add @react-navigation/drawer@next
 
 To use this drawer navigator, import it from `@react-navigation/drawer`:
 
+<samp id="simple-drawer">
+
 ```js
 import { createDrawerNavigator } from '@react-navigation/drawer';
 
 const Drawer = createDrawerNavigator();
 
-function App() {
+function MyDrawer() {
   return (
     <Drawer.Navigator>
       <Drawer.Screen name="Feed" component={Feed} />
@@ -31,7 +33,7 @@ function App() {
 }
 ```
 
-> For a complete usage guide please visit [Drawer Navigation](https://reactnavigation.org/docs/drawer-based-navigation.html).
+> For a complete usage guide please visit [Drawer Navigation](drawer-based-navigation.md).
 
 ### Props
 
@@ -110,6 +112,8 @@ Style object for the component wrapping the screen content.
 
 Style object for the drawer component. You can pass a custom background color for a drawer or a custom width here.
 
+<samp id="drawer-with-style">
+
 ```js
 <Drawer.Navigator
   drawerStyle={{
@@ -139,7 +143,10 @@ The default component for the drawer is scrollable and only contains links for t
 By default the drawer is scrollable and supports devices with notches. If you customize the content, you can use `DrawerContentScrollView` to handle this automatically:
 
 ```js
-import { DrawerContentScrollView, DrawerItemList } from '@react-navigation/drawer';
+import {
+  DrawerContentScrollView,
+  DrawerItemList,
+} from '@react-navigation/drawer';
 
 function CustomDrawerContent(props) {
   return (
@@ -152,6 +159,8 @@ function CustomDrawerContent(props) {
 
 To add additional items in the drawer, you can use the `DrawerItem` component:
 
+<samp id="custom-drawer-content">
+
 ```js
 function CustomDrawerContent(props) {
   return (
@@ -181,6 +190,8 @@ The `DrawerItem` component accepts the following props:
 
 The `progress` node can be used to do interesting animations in your `drawerContent`, such as parallax motion of the drawer contents:
 
+<samp id="animated-drawer-content">
+
 ```js
 function CustomDrawerContent({ progress, ...rest }) {
   const translateX = Animated.interpolate(progress, {
@@ -242,11 +253,13 @@ Style object for the wrapper view.
 
 Example:
 
+<samp id="drawer-content-options">
+
 ```js
 <Drawer.Navigator
   drawerContentOptions={{
     activeTintColor: '#e91e63',
-    itemStyle: { marginVertical: 0 },
+    itemStyle: { marginVertical: 30 },
   }}
 >
   {/* screens */}
@@ -293,6 +306,8 @@ The drawer navigator adds the following methods to the navigation prop:
 
 Opens the drawer pane.
 
+<samp id="drawer-open-close-toggle">
+
 ```js
 navigation.openDrawer();
 ```
@@ -301,6 +316,8 @@ navigation.openDrawer();
 
 Closes the drawer pane.
 
+<samp id="drawer-open-close-toggle">
+
 ```js
 navigation.closeDrawer();
 ```
@@ -309,6 +326,8 @@ navigation.closeDrawer();
 
 Opens the drawer pane if closed, closes the drawer pane if opened.
 
+<samp id="drawer-open-close-toggle">
+
 ```js
 navigation.toggleDrawer();
 ```
@@ -320,18 +339,22 @@ Navigates to an existing screen in the drawer navigator. The method accepts foll
 - `name` - _string_ - Name of the route to jump to.
 - `params` - _object_ - Screen params to merge into the destination route (found in the pushed screen through `route.params`).
 
+<samp id="drawer-example">
+
 ```js
-navigation.jumpTo('Profile', { name: 'Satya' });
+navigation.jumpTo('Profile', { owner: 'Satya' });
 ```
 
 ## Example
 
+<samp id="drawer-example">
+
 ```js
 import { createDrawerNavigator } from '@react-navigation/drawer';
 
 const Drawer = createDrawerNavigator();
 
-function App() {
+function MyDrawer() {
   return (
     <Drawer.Navigator initialRouteName="Feed">
       <Drawer.Screen

docs/material-bottom-tab-navigator.md

@@ -24,22 +24,24 @@ To use this tab navigator, import it from `@react-navigation/material-bottom-tab
 
 To use this tab navigator, import it from `@react-navigation/material-bottom-tabs`:
 
+<samp id="material-tab-based-navigation-minimal" />
+
 ```js
 import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
 
 const Tab = createMaterialBottomTabNavigator();
 
-function App() {
+function MyTabs() {
   return (
     <Tab.Navigator>
-      <Tab.Screen name="Feed" component={Feed} />
-      <Tab.Screen name="Article" component={Article} />
+      <Tab.Screen name="Home" component={HomeScreen} />
+      <Tab.Screen name="Settings" component={SettingsScreen} />
     </Tab.Navigator>
   );
 }
 ```
 
-> For a complete usage guide please visit [Tab Navigation](https://reactnavigation.org/docs/tab-based-navigation.html)
+> For a complete usage guide please visit [Tab Navigation](tab-based-navigation.md)
 
 ## RouteConfigs
 
@@ -88,9 +90,11 @@ Style for the bottom navigation bar. You can set a bottom padding here if you ha
 
 Example:
 
+<samp id="material-bottom-tab-styled">
+
 ```js
 <Tab.Navigator
-  initialRouteName="Album"
+  initialRouteName="Home"
   activeColor="#f0edf6"
   inactiveColor="#3e2465"
   barStyle={{ backgroundColor: '#694fad' }}
@@ -144,13 +148,14 @@ This event is fired when the user presses the tab button for the current screen
   - If the screen for the tab renders a scroll view, scroll to top is performed by `useScrollToTop`
   - If the screen for the tab renders a stack navigator, a `popToTop` action is performed on the stack
 
-To prevent the scroll to top/`popToTop` behavior, you can call `eventPreventDefault`:
+To prevent the default behavior, you can call `event.preventDefault`:
+
+<samp id="material-bottom-tab-prevent-default">
 
 ```js
 navigation.addListener('tabPress', e => {
   // Prevent default behavior
   e.preventDefault();
-
   // Do something manually
   // ...
 });
@@ -167,19 +172,23 @@ Navigates to an existing screen in the tab navigator. The method accepts followi
 - `name` - _string_ - Name of the route to jump to.
 - `params` - _object_ - Screen params to merge into the destination route (found in the pushed screen through `route.params`).
 
+<samp id="material-tab-jump-to">
+
 ```js
 navigation.jumpTo('Profile', { name: 'Michaś' });
 ```
 
 ## Example
 
+<samp id="material-bottom-tab-example">
+
 ```js
 import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
 import { MaterialCommunityIcons } from 'react-native-vector-icons';
 
 const Tab = createMaterialBottomTabNavigator();
 
-function App() {
+function MyTabs() {
   return (
     <Tab.Navigator
       initialRouteName="Feed"