From 549e5a87ac22b300758abcef0749f1ac59c46133 Mon Sep 17 00:00:00 2001
From: Ankit Tiwari <ankitt255@gmail.com>
Date: Tue, 25 Aug 2020 19:27:39 -0700
Subject: [PATCH 1/2] RNTester UI Redesign (#29685)

Summary:
This Pull request adds the UI changes to the RNTester app as discussed in the MLH Fellowship.

## Changelog

This list is not exhaustive.

- The initial App screen is redesigned.
  - A bottom Navbar has been added.
   - Filter pills are added.
   - The list card UI is updated.

- The example page UI is updated.

- Recently Viewed Sections are added. It shows the last 5 recently viewed components/APIs.

- Bookmarking functionality is added.

- The documentation URL is added to the example page.

- RNTester doesn't lose its state on a hard refresh (even on iOS).

# Screenshots

<img width="373" src="https://user-images.githubusercontent.com/22813027/90530113-20346180-e192-11ea-8ef6-789fa25b402b.png" />
<img width="373" src="https://user-images.githubusercontent.com/22813027/90530112-20346180-e192-11ea-9539-706b540fcc5f.png" />
<img width="373" src="https://user-images.githubusercontent.com/22813027/90530100-1d397100-e192-11ea-8836-b88070643233.png" />
<img width="373" src="https://user-images.githubusercontent.com/22813027/90530110-1f9bcb00-e192-11ea-936b-64ee75fa4289.png" />

Pull Request resolved: https://github.com/facebook/react-native/pull/29685

Test Plan:
Imported from GitHub, without a `Test Plan:` line.

# Tested RNTester in Catalyst

{F302717939}

# Tested in RNTester in Facebook

Note: this failed **before** this diff too:

{F302745716}

Reviewed By: mdvacca, cpojer

Differential Revision: D23240434

fbshipit-source-id: 65e2766a6a097eca0e0d0fda8dadf6871e9276c2
---
 .../rn-tester/e2e/__tests__/Button-test.js    |   4 +-
 .../e2e/__tests__/DatePickerIOS-test.js       |   4 +-
 .../rn-tester/e2e/__tests__/Picker-test.js    |   4 +-
 .../rn-tester/e2e/__tests__/TextInput-test.js |   2 +-
 .../rn-tester/e2e/__tests__/Touchable-test.js |   4 +-
 packages/rn-tester/e2e/test-init.js           |   2 +-
 packages/rn-tester/js/RNTesterApp.android.js  | 282 ++++++-------
 packages/rn-tester/js/RNTesterApp.ios.js      | 183 +++++++--
 .../rn-tester/js/assets/bookmark-filled.png   | Bin 0 -> 217 bytes
 .../js/assets/bookmark-outline-blue.png       | Bin 0 -> 1034 bytes
 .../js/assets/bookmark-outline-gray.png       | Bin 0 -> 1076 bytes
 .../rn-tester/js/assets/bookmark-outline.png  | Bin 0 -> 260 bytes
 .../js/assets/bottom-nav-apis-icon-active.png | Bin 0 -> 1870 bytes
 .../assets/bottom-nav-apis-icon-inactive.png  | Bin 0 -> 1953 bytes
 .../js/assets/bottom-nav-bookmark-fill.png    | Bin 0 -> 768 bytes
 .../js/assets/bottom-nav-bookmark-outline.png | Bin 0 -> 929 bytes
 .../js/assets/bottom-nav-center-box.png       | Bin 0 -> 1340 bytes
 .../bottom-nav-components-icon-active.png     | Bin 0 -> 1047 bytes
 .../bottom-nav-components-icon-inactive.png   | Bin 0 -> 1026 bytes
 .../rn-tester/js/assets/documentation.png     | Bin 0 -> 314 bytes
 packages/rn-tester/js/assets/empty.png        | Bin 0 -> 22827 bytes
 .../js/assets/header-back-button.png          | Bin 0 -> 446 bytes
 packages/rn-tester/js/assets/search-icon.png  | Bin 0 -> 1728 bytes
 .../rn-tester/js/components/ExamplePage.js    | 100 +++++
 .../rn-tester/js/components/RNTesterBlock.js  | 102 ++---
 .../js/components/RNTesterBookmark.js         |  38 ++
 .../js/components/RNTesterBookmarkButton.js   |  62 +++
 .../js/components/RNTesterComponentTitle.js   |  45 ++
 .../js/components/RNTesterDocumentationURL.js |  39 ++
 .../js/components/RNTesterExampleContainer.js |  38 +-
 .../js/components/RNTesterExampleFilter.js    | 150 +++++--
 .../js/components/RNTesterExampleList.js      | 386 +++++++++++++++---
 .../js/components/RNTesterListFilters.js      |  94 +++++
 .../rn-tester/js/components/RNTesterNavbar.js | 194 +++++++++
 .../rn-tester/js/components/RNTesterTheme.js  |   6 +
 .../rn-tester/js/components/TextLegend.js     |   3 +-
 packages/rn-tester/js/components/UseCase.js   |  40 ++
 .../Accessibility/AccessibilityExample.js     |   1 +
 .../ActionSheetIOS/ActionSheetIOSExample.js   |   1 +
 .../ActivityIndicatorExample.js               |   4 +-
 .../js/examples/Alert/AlertExample.js         |   1 +
 .../js/examples/Animated/AnimatedExample.js   |   2 +
 .../js/examples/AppState/AppStateExample.js   |   2 +
 .../examples/Appearance/AppearanceExample.js  |   2 +
 .../AsyncStorage/AsyncStorageExample.js       | 103 -----
 .../js/examples/Border/BorderExample.js       |   1 +
 .../js/examples/BoxShadow/BoxShadowExample.js |   1 +
 .../js/examples/Button/ButtonExample.js       |   4 +-
 .../js/examples/Clipboard/ClipboardExample.js |  68 ---
 .../js/examples/Crash/CrashExample.js         |   1 +
 .../DatePicker/DatePickerAndroidExample.js    | 170 --------
 .../DatePicker/DatePickerIOSExample.js        | 150 -------
 .../DevSettings/DevSettingsExample.js         |   2 +
 .../examples/Dimensions/DimensionsExample.js  |   2 +
 .../js/examples/FlatList/FlatListExample.js   |   4 +-
 .../js/examples/Image/ImageExample.js         |   4 +-
 .../InputAccessoryViewExample.js              |   2 +-
 .../JSResponderHandlerExample.js              |   3 +-
 .../KeyboardAvoidingViewExample.js            |   4 +-
 .../examples/Layout/LayoutAnimationExample.js |   2 +
 .../js/examples/Layout/LayoutEventsExample.js |   1 +
 .../js/examples/Layout/LayoutExample.js       |   1 +
 .../js/examples/Linking/LinkingExample.js     |   2 +
 .../examples/MaskedView/MaskedViewExample.js  | 236 -----------
 .../js/examples/Modal/ModalExample.js         |   4 +-
 .../MultiColumn/MultiColumnExample.js         |   3 +-
 .../NativeAnimationsExample.js                |   1 +
 .../OrientationChangeExample.js               |   1 +
 .../PanResponder/PanResponderExample.js       |   2 +
 .../PermissionsAndroid/PermissionsExample.js  |   1 +
 .../js/examples/Picker/PickerExample.js       | 220 ----------
 .../js/examples/Picker/PickerIOSExample.js    | 190 ---------
 .../PlatformColor/PlatformColorExample.js     |   2 +
 .../PointerEvents/PointerEventsExample.js     |   1 +
 .../js/examples/Pressable/PressableExample.js |   4 +-
 .../ProgressBarAndroidExample.android.js      |  94 -----
 .../ProgressViewIOS/ProgressViewIOSExample.js | 103 -----
 .../PushNotificationIOSExample.js             | 267 ------------
 .../RCTRootView/RCTRootViewIOSExample.js      |   1 +
 .../rn-tester/js/examples/RTL/RTLExample.js   |   9 +-
 .../RefreshControl/RefreshControlExample.js   |   4 +-
 .../SafeAreaView/SafeAreaViewExample.js       |   4 +-
 .../ScrollView/ScrollViewAnimatedExample.js   |   3 +-
 .../examples/ScrollView/ScrollViewExample.js  |   4 +-
 .../ScrollView/ScrollViewSimpleExample.js     |   3 +-
 .../SectionList/SectionListExample.js         |   4 +-
 .../SegmentedControlExampleComponents.js      | 114 ------
 .../SegmentedControlIOSExample.js             |  63 ---
 .../js/examples/Share/ShareExample.js         |   2 +
 .../js/examples/Slider/SliderExample.js       | 136 ------
 .../js/examples/Snapshot/SnapshotExample.js   |   1 +
 .../js/examples/StatusBar/StatusBarExample.js |   4 +-
 .../js/examples/Switch/SwitchExample.js       |   4 +-
 .../TVEventHandler/TVEventHandlerExample.js   |   1 +
 .../js/examples/Text/TextExample.android.js   |   4 +-
 .../js/examples/Text/TextExample.ios.js       |   4 +-
 .../TextInput/TextInputExample.android.js     |   4 +-
 .../TextInput/TextInputExample.ios.js         |   4 +-
 .../js/examples/Timer/TimerExample.js         |   1 +
 .../ToastAndroidExample.android.js            |   1 +
 .../js/examples/Touchable/TouchableExample.js |   4 +-
 .../js/examples/Transform/TransformExample.js |   2 +
 .../TransparentHitTestExample.js              |   3 +-
 .../TurboModule/TurboModuleExample.js         |   1 +
 .../js/examples/Vibration/VibrationExample.js |   2 +
 .../rn-tester/js/examples/View/ViewExample.js |   4 +-
 .../js/examples/WebSocket/WebSocketExample.js |   1 +
 .../rn-tester/js/examples/XHR/XHRExample.js   |   1 +
 packages/rn-tester/js/types/RNTesterTypes.js  |   5 +
 .../rn-tester/js/utils/RNTesterActions.js     |   8 +-
 .../utils/RNTesterAsyncStorageAbstraction.js  | 190 +++++++++
 .../js/utils/RNTesterList.android.js          |  70 ++--
 .../rn-tester/js/utils/RNTesterList.ios.js    | 111 +++--
 .../js/utils/RNTesterNavigationReducer.js     |  31 +-
 .../js/utils/RNTesterStatePersister.js        |   2 +-
 115 files changed, 1854 insertions(+), 2405 deletions(-)
 create mode 100755 packages/rn-tester/js/assets/bookmark-filled.png
 create mode 100644 packages/rn-tester/js/assets/bookmark-outline-blue.png
 create mode 100644 packages/rn-tester/js/assets/bookmark-outline-gray.png
 create mode 100755 packages/rn-tester/js/assets/bookmark-outline.png
 create mode 100644 packages/rn-tester/js/assets/bottom-nav-apis-icon-active.png
 create mode 100644 packages/rn-tester/js/assets/bottom-nav-apis-icon-inactive.png
 create mode 100644 packages/rn-tester/js/assets/bottom-nav-bookmark-fill.png
 create mode 100644 packages/rn-tester/js/assets/bottom-nav-bookmark-outline.png
 create mode 100644 packages/rn-tester/js/assets/bottom-nav-center-box.png
 create mode 100644 packages/rn-tester/js/assets/bottom-nav-components-icon-active.png
 create mode 100644 packages/rn-tester/js/assets/bottom-nav-components-icon-inactive.png
 create mode 100644 packages/rn-tester/js/assets/documentation.png
 create mode 100644 packages/rn-tester/js/assets/empty.png
 create mode 100644 packages/rn-tester/js/assets/header-back-button.png
 create mode 100644 packages/rn-tester/js/assets/search-icon.png
 create mode 100644 packages/rn-tester/js/components/ExamplePage.js
 create mode 100644 packages/rn-tester/js/components/RNTesterBookmark.js
 create mode 100644 packages/rn-tester/js/components/RNTesterBookmarkButton.js
 create mode 100644 packages/rn-tester/js/components/RNTesterComponentTitle.js
 create mode 100644 packages/rn-tester/js/components/RNTesterDocumentationURL.js
 create mode 100644 packages/rn-tester/js/components/RNTesterListFilters.js
 create mode 100644 packages/rn-tester/js/components/RNTesterNavbar.js
 create mode 100644 packages/rn-tester/js/components/UseCase.js
 delete mode 100644 packages/rn-tester/js/examples/AsyncStorage/AsyncStorageExample.js
 delete mode 100644 packages/rn-tester/js/examples/Clipboard/ClipboardExample.js
 delete mode 100644 packages/rn-tester/js/examples/DatePicker/DatePickerAndroidExample.js
 delete mode 100644 packages/rn-tester/js/examples/DatePicker/DatePickerIOSExample.js
 delete mode 100644 packages/rn-tester/js/examples/MaskedView/MaskedViewExample.js
 delete mode 100644 packages/rn-tester/js/examples/Picker/PickerExample.js
 delete mode 100644 packages/rn-tester/js/examples/Picker/PickerIOSExample.js
 delete mode 100644 packages/rn-tester/js/examples/ProgressBarAndroid/ProgressBarAndroidExample.android.js
 delete mode 100644 packages/rn-tester/js/examples/ProgressViewIOS/ProgressViewIOSExample.js
 delete mode 100644 packages/rn-tester/js/examples/PushNotificationIOS/PushNotificationIOSExample.js
 delete mode 100644 packages/rn-tester/js/examples/SegmentedControlIOS/SegmentedControlExampleComponents.js
 delete mode 100644 packages/rn-tester/js/examples/SegmentedControlIOS/SegmentedControlIOSExample.js
 delete mode 100644 packages/rn-tester/js/examples/Slider/SliderExample.js
 create mode 100644 packages/rn-tester/js/utils/RNTesterAsyncStorageAbstraction.js

diff --git a/packages/rn-tester/e2e/__tests__/Button-test.js b/packages/rn-tester/e2e/__tests__/Button-test.js
index c43fdb05d6b87f..53588b168a525a 100644
--- a/packages/rn-tester/e2e/__tests__/Button-test.js
+++ b/packages/rn-tester/e2e/__tests__/Button-test.js
@@ -18,8 +18,8 @@ describe('Button', () => {
   beforeAll(async () => {
     await device.reloadReactNative();
     await openComponentWithLabel(
-      '<Button>',
-      '<Button> Simple React Native button component.',
+      'Button',
+      'Button Simple React Native button component.',
     );
   });
 
diff --git a/packages/rn-tester/e2e/__tests__/DatePickerIOS-test.js b/packages/rn-tester/e2e/__tests__/DatePickerIOS-test.js
index 11c73fcb2d5f4b..0656f30345421c 100644
--- a/packages/rn-tester/e2e/__tests__/DatePickerIOS-test.js
+++ b/packages/rn-tester/e2e/__tests__/DatePickerIOS-test.js
@@ -19,8 +19,8 @@ describe('DatePickerIOS', () => {
   beforeAll(async () => {
     await device.reloadReactNative();
     await openComponentWithLabel(
-      '<DatePickerIOS>',
-      '<DatePickerIOS> Select dates and times using the native UIDatePicker.',
+      'DatePickerIOS',
+      'DatePickerIOS Select dates and times using the native UIDatePicker.',
     );
   });
 
diff --git a/packages/rn-tester/e2e/__tests__/Picker-test.js b/packages/rn-tester/e2e/__tests__/Picker-test.js
index f5ee3bcafc035b..822818ad9eb3a0 100644
--- a/packages/rn-tester/e2e/__tests__/Picker-test.js
+++ b/packages/rn-tester/e2e/__tests__/Picker-test.js
@@ -18,8 +18,8 @@ describe('Picker', () => {
   beforeAll(async () => {
     await device.reloadReactNative();
     await openComponentWithLabel(
-      '<Picker>',
-      '<Picker> Provides multiple options to choose from, using either a dropdown menu or a dialog.',
+      'Picker',
+      'Picker Provides multiple options to choose from, using either a dropdown menu or a dialog.',
     );
   });
 
diff --git a/packages/rn-tester/e2e/__tests__/TextInput-test.js b/packages/rn-tester/e2e/__tests__/TextInput-test.js
index db1933ab6262f6..d262221f5fe23b 100644
--- a/packages/rn-tester/e2e/__tests__/TextInput-test.js
+++ b/packages/rn-tester/e2e/__tests__/TextInput-test.js
@@ -18,7 +18,7 @@ describe('TextInput', () => {
   beforeAll(async () => {
     await device.reloadReactNative();
     await openComponentWithLabel(
-      '<TextInput>',
+      'TextInput',
       'Single and multi-line text inputs.',
     );
   });
diff --git a/packages/rn-tester/e2e/__tests__/Touchable-test.js b/packages/rn-tester/e2e/__tests__/Touchable-test.js
index a47fa76de5f6b8..2a241c8985e352 100644
--- a/packages/rn-tester/e2e/__tests__/Touchable-test.js
+++ b/packages/rn-tester/e2e/__tests__/Touchable-test.js
@@ -18,8 +18,8 @@ describe('Touchable', () => {
   beforeAll(async () => {
     await device.reloadReactNative();
     await openComponentWithLabel(
-      '<Touchable*',
-      '<Touchable*> and onPress Touchable and onPress examples.',
+      'Touchable*',
+      'Touchable* and onPress Touchable and onPress examples.',
     );
   });
 
diff --git a/packages/rn-tester/e2e/test-init.js b/packages/rn-tester/e2e/test-init.js
index 4e95bbe7c3e8ab..5120acdf1b2e9e 100644
--- a/packages/rn-tester/e2e/test-init.js
+++ b/packages/rn-tester/e2e/test-init.js
@@ -11,7 +11,7 @@
 /* global device */
 
 const detox = require('detox');
-const config = require('../../package.json').detox;
+const config = require('../../../package.json').detox;
 const adapter = require('detox/runners/jest/adapter');
 jest.setTimeout(120000);
 jasmine.getEnv().addReporter(adapter);
diff --git a/packages/rn-tester/js/RNTesterApp.android.js b/packages/rn-tester/js/RNTesterApp.android.js
index fd3d45955dcb66..abf6121bc1c308 100644
--- a/packages/rn-tester/js/RNTesterApp.android.js
+++ b/packages/rn-tester/js/RNTesterApp.android.js
@@ -16,66 +16,66 @@ const RNTesterExampleList = require('./components/RNTesterExampleList');
 const RNTesterList = require('./utils/RNTesterList');
 const RNTesterNavigationReducer = require('./utils/RNTesterNavigationReducer');
 const React = require('react');
-const URIActionMap = require('./utils/URIActionMap');
-
-const nativeImageSource = require('../../../Libraries/Image/nativeImageSource');
+const RNTesterNavBar = require('./components/RNTesterNavbar');
 
 const {
   AppRegistry,
   AsyncStorage,
   BackHandler,
-  Dimensions,
-  DrawerLayoutAndroid,
-  Image,
-  Linking,
-  StatusBar,
   StyleSheet,
   Text,
-  TouchableWithoutFeedback,
   UIManager,
   useColorScheme,
   View,
+  LogBox,
 } = require('react-native');
 
 import type {RNTesterExample} from './types/RNTesterTypes';
 import type {RNTesterNavigationState} from './utils/RNTesterNavigationReducer';
 import {RNTesterThemeContext, themes} from './components/RNTesterTheme';
+import RNTesterDocumentationURL from './components/RNTesterDocumentationURL';
+import {
+  RNTesterBookmarkContext,
+  bookmarks,
+} from './components/RNTesterBookmark';
+import type {RNTesterBookmark} from './components/RNTesterBookmark';
 
-UIManager.setLayoutAnimationEnabledExperimental(true);
+import {
+  initializeAsyncStore,
+  addApi,
+  addComponent,
+  removeApi,
+  removeComponent,
+  checkBookmarks,
+  updateRecentlyViewedList,
+} from './utils/RNTesterAsyncStorageAbstraction';
 
-const DRAWER_WIDTH_LEFT = 56;
+UIManager.setLayoutAnimationEnabledExperimental &&
+  UIManager.setLayoutAnimationEnabledExperimental(true);
 
 type Props = {exampleFromAppetizeParams?: ?string, ...};
 
 const APP_STATE_KEY = 'RNTesterAppState.v2';
 
-const HEADER_NAV_ICON = nativeImageSource({
-  android: 'ic_menu_black_24dp',
-  width: 48,
-  height: 48,
-});
-
 const Header = ({
-  onPressDrawer,
   title,
+  documentationURL,
 }: {
-  onPressDrawer?: () => mixed,
   title: string,
+  documentationURL?: string,
   ...
 }) => (
   <RNTesterThemeContext.Consumer>
     {theme => {
       return (
-        <View style={[styles.toolbar, {backgroundColor: theme.ToolbarColor}]}>
+        <View style={[styles.toolbar, {backgroundColor: '#F3F8FF'}]}>
           <View style={styles.toolbarCenter}>
             <Text style={[styles.title, {color: theme.LabelColor}]}>
               {title}
             </Text>
-          </View>
-          <View style={styles.toolbarLeft}>
-            <TouchableWithoutFeedback onPress={onPressDrawer}>
-              <Image source={HEADER_NAV_ICON} />
-            </TouchableWithoutFeedback>
+            {documentationURL && (
+              <RNTesterDocumentationURL documentationURL={documentationURL} />
+            )}
           </View>
         </View>
       );
@@ -84,12 +84,10 @@ const Header = ({
 );
 
 const RNTesterExampleContainerViaHook = ({
-  onPressDrawer,
   title,
   module,
   exampleRef,
 }: {
-  onPressDrawer?: () => mixed,
   title: string,
   module: RNTesterExample,
   exampleRef: () => void,
@@ -100,102 +98,98 @@ const RNTesterExampleContainerViaHook = ({
   return (
     <RNTesterThemeContext.Provider value={theme}>
       <View style={styles.container}>
-        <Header title={title} onPressDrawer={onPressDrawer} />
+        <Header title={title} documentationURL={module.documentationURL} />
         <RNTesterExampleContainer module={module} ref={exampleRef} />
       </View>
     </RNTesterThemeContext.Provider>
   );
 };
 
-const RNTesterDrawerContentViaHook = ({
-  onNavigate,
-  list,
-}: {
-  onNavigate?: () => mixed,
-  list: {
-    ComponentExamples: Array<RNTesterExample>,
-    APIExamples: Array<RNTesterExample>,
-    ...
-  },
-  ...
-}) => {
-  const colorScheme = useColorScheme();
-  const theme = colorScheme === 'dark' ? themes.dark : themes.light;
-  return (
-    <RNTesterThemeContext.Provider value={theme}>
-      <View
-        style={[
-          styles.drawerContentWrapper,
-          {backgroundColor: theme.SystemBackgroundColor},
-        ]}>
-        <RNTesterExampleList
-          list={list}
-          displayTitleRow={true}
-          disableSearch={true}
-          onNavigate={onNavigate}
-        />
-      </View>
-    </RNTesterThemeContext.Provider>
-  );
-};
-
 const RNTesterExampleListViaHook = ({
   title,
-  onPressDrawer,
   onNavigate,
+  UpdateRecentlyViewedList,
+  recentComponents,
+  recentApis,
+  bookmark,
   list,
+  screen,
 }: {
   title: string,
-  onPressDrawer?: () => mixed,
+  screen: string,
   onNavigate?: () => mixed,
+  UpdateRecentlyViewedList?: (item: RNTesterExample, key: string) => mixed,
+  recentComponents: Array<RNTesterExample>,
+  recentApis: Array<RNTesterExample>,
   list: {
     ComponentExamples: Array<RNTesterExample>,
     APIExamples: Array<RNTesterExample>,
     ...
   },
+  bookmark: RNTesterBookmark,
   ...
 }) => {
   const colorScheme = useColorScheme();
   const theme = colorScheme === 'dark' ? themes.dark : themes.light;
+  const exampleTitle =
+    screen === 'component'
+      ? 'Component Store'
+      : screen === 'api'
+      ? 'API Store'
+      : 'Bookmarks';
   return (
     <RNTesterThemeContext.Provider value={theme}>
-      <View style={styles.container}>
-        <Header title={title} onPressDrawer={onPressDrawer} />
-        <RNTesterExampleList onNavigate={onNavigate} list={list} />
-      </View>
+      <RNTesterBookmarkContext.Provider value={bookmark}>
+        <View style={styles.container}>
+          <Header title={exampleTitle} />
+          <RNTesterExampleList
+            onNavigate={onNavigate}
+            recentComponents={recentComponents}
+            recentApis={recentApis}
+            updateRecentlyViewedList={UpdateRecentlyViewedList}
+            list={list}
+            screen={screen}
+          />
+        </View>
+      </RNTesterBookmarkContext.Provider>
     </RNTesterThemeContext.Provider>
   );
 };
 
 class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
+  constructor() {
+    super();
+
+    // RNTester App currently uses Async Storage from react-native for storing navigation state
+    // and bookmark items.
+    // TODO: Add Native Async Storage Module in RNTester
+    LogBox.ignoreLogs([new RegExp('has been extracted from react-native')]);
+
+    this.state = {
+      openExample: null,
+      Components: bookmarks.Components,
+      Api: bookmarks.Api,
+      recentComponents: [],
+      recentApis: [],
+      screen: 'component',
+      AddApi: (apiName, api) => addApi(apiName, api, this),
+      AddComponent: (componentName, component) =>
+        addComponent(componentName, component, this),
+      RemoveApi: apiName => removeApi(apiName, this),
+      RemoveComponent: componentName => removeComponent(componentName, this),
+      checkBookmark: (title, key) => checkBookmarks(title, key, this),
+      updateRecentlyViewedList: (item, key) =>
+        updateRecentlyViewedList(item, key, this),
+    };
+  }
   UNSAFE_componentWillMount() {
-    BackHandler.addEventListener(
-      'hardwareBackPress',
-      this._handleBackButtonPress,
+    BackHandler.addEventListener('hardwareBackPress', () =>
+      this._handleBackButtonPress(this.state.screen),
     );
   }
 
   componentDidMount() {
-    Linking.getInitialURL().then(url => {
-      AsyncStorage.getItem(APP_STATE_KEY, (err, storedString) => {
-        const exampleAction = URIActionMap(
-          this.props.exampleFromAppetizeParams,
-        );
-        const urlAction = URIActionMap(url);
-        const launchAction = exampleAction || urlAction;
-        if (err || !storedString) {
-          const initialAction = launchAction || {type: 'InitialAction'};
-          this.setState(RNTesterNavigationReducer(null, initialAction));
-          return;
-        }
-        const storedState = JSON.parse(storedString);
-        if (launchAction) {
-          this.setState(RNTesterNavigationReducer(storedState, launchAction));
-          return;
-        }
-        this.setState(storedState);
-      });
-    });
+    initializeAsyncStore(this);
   }
 
   render(): React.Node {
@@ -203,43 +197,28 @@ class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
       return null;
     }
     return (
-      <DrawerLayoutAndroid
-        drawerPosition="left"
-        drawerWidth={Dimensions.get('window').width - DRAWER_WIDTH_LEFT}
-        keyboardDismissMode="on-drag"
-        onDrawerOpen={() => {
-          /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
-           * found when making Flow check .android.js files. */
-          this._overrideBackPressForDrawerLayout = true;
-        }}
-        onDrawerClose={() => {
-          /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
-           * found when making Flow check .android.js files. */
-          this._overrideBackPressForDrawerLayout = false;
-        }}
-        ref={drawer => {
-          /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
-           * found when making Flow check .android.js files. */
-          this.drawer = drawer;
-        }}
-        renderNavigationView={this._renderDrawerContent}
-        statusBarBackgroundColor="#589c90">
-        {this._renderApp()}
-      </DrawerLayoutAndroid>
+      <View style={styles.container}>
+        {this._renderApp({
+          Components: this.state.Components,
+          Api: this.state.Api,
+          AddApi: this.state.AddApi,
+          AddComponent: this.state.AddComponent,
+          RemoveApi: this.state.RemoveApi,
+          RemoveComponent: this.state.RemoveComponent,
+          checkBookmark: this.state.checkBookmark,
+        })}
+        <View style={styles.bottomNavbar}>
+          <RNTesterNavBar
+            screen={this.state.screen}
+            onNavigate={this._handleAction}
+          />
+        </View>
+      </View>
     );
   }
 
-  _renderDrawerContent = () => {
-    return (
-      <RNTesterDrawerContentViaHook
-        onNavigate={this._handleAction}
-        list={RNTesterList}
-      />
-    );
-  };
-
-  _renderApp() {
-    const {openExample} = this.state;
+  _renderApp(bookmark) {
+    const {openExample, screen} = this.state;
 
     if (openExample) {
       const ExampleModule = RNTesterList.Modules[openExample];
@@ -247,7 +226,7 @@ class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
         return (
           <ExampleModule
             onExampleExit={() => {
-              this._handleAction(RNTesterActions.Back());
+              this._handleAction(RNTesterActions.Back(screen));
             }}
             ref={example => {
               /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue
@@ -258,30 +237,36 @@ class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
         );
       } else if (ExampleModule) {
         return (
-          <RNTesterExampleContainerViaHook
-            /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
-             * when making Flow check .android.js files. */
-            onPressDrawer={() => this.drawer.openDrawer()}
-            title={ExampleModule.title}
-            module={ExampleModule}
-            exampleRef={example => {
-              /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue
-               * was found when making Flow check .android.js files. */
-              this._exampleRef = example;
-            }}
-          />
+          <>
+            <RNTesterExampleContainerViaHook
+              /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
+               * when making Flow check .android.js files. */
+              title={ExampleModule.title}
+              module={ExampleModule}
+              exampleRef={example => {
+                /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue
+                 * was found when making Flow check .android.js files. */
+                this._exampleRef = example;
+              }}
+            />
+          </>
         );
       }
     }
 
     return (
       <RNTesterExampleListViaHook
+        key={screen}
         title={'RNTester'}
         /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
          * when making Flow check .android.js files. */
-        onPressDrawer={() => this.drawer.openDrawer()}
         onNavigate={this._handleAction}
+        UpdateRecentlyViewedList={this.state.updateRecentlyViewedList}
+        recentComponents={this.state.recentComponents}
+        recentApis={this.state.recentApis}
+        bookmark={bookmark}
         list={RNTesterList}
+        screen={screen}
       />
     );
   }
@@ -289,7 +274,6 @@ class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
   _handleAction = (action: Object): boolean => {
     /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
      * when making Flow check .android.js files. */
-    this.drawer && this.drawer.closeDrawer();
     const newState = RNTesterNavigationReducer(this.state, action);
     if (this.state !== newState) {
       this.setState(newState, () =>
@@ -300,18 +284,9 @@ class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
     return false;
   };
 
-  _handleBackButtonPress = () => {
+  _handleBackButtonPress = screen => {
     /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
      * when making Flow check .android.js files. */
-    if (this._overrideBackPressForDrawerLayout) {
-      // This hack is necessary because drawer layout provides an imperative API
-      // with open and close methods. This code would be cleaner if the drawer
-      // layout provided an `isOpen` prop and allowed us to pass a `onDrawerClose` handler.
-      /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
-       * when making Flow check .android.js files. */
-      this.drawer && this.drawer.closeDrawer();
-      return true;
-    }
     if (
       /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
        * when making Flow check .android.js files. */
@@ -325,7 +300,7 @@ class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
     ) {
       return true;
     }
-    return this._handleAction(RNTesterActions.Back());
+    return this._handleAction(RNTesterActions.Back(screen));
   };
 }
 
@@ -352,9 +327,12 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     textAlign: 'center',
   },
-  drawerContentWrapper: {
-    flex: 1,
-    paddingTop: StatusBar.currentHeight,
+  bottomNavbar: {
+    bottom: 0,
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'absolute',
   },
 });
 
diff --git a/packages/rn-tester/js/RNTesterApp.ios.js b/packages/rn-tester/js/RNTesterApp.ios.js
index 194892b50d60e3..96769429ce6eab 100644
--- a/packages/rn-tester/js/RNTesterApp.ios.js
+++ b/packages/rn-tester/js/RNTesterApp.ios.js
@@ -17,14 +17,13 @@ const RNTesterList = require('./utils/RNTesterList.ios');
 const RNTesterNavigationReducer = require('./utils/RNTesterNavigationReducer');
 const React = require('react');
 const SnapshotViewIOS = require('./examples/Snapshot/SnapshotViewIOS.ios');
-const URIActionMap = require('./utils/URIActionMap');
+const RNTesterNavbar = require('./components/RNTesterNavbar');
 
 const {
   AppRegistry,
   AsyncStorage,
   BackHandler,
   Button,
-  Linking,
   Platform,
   SafeAreaView,
   StyleSheet,
@@ -35,23 +34,42 @@ const {
 } = require('react-native');
 
 import type {RNTesterExample} from './types/RNTesterTypes';
-import type {RNTesterAction} from './utils/RNTesterActions';
+import type {
+  RNTesterAction,
+  RNTesterExampleAction,
+} from './utils/RNTesterActions';
 import type {RNTesterNavigationState} from './utils/RNTesterNavigationReducer';
 import {RNTesterThemeContext, themes} from './components/RNTesterTheme';
+import RNTesterDocumentationURL from './components/RNTesterDocumentationURL';
 import type {ColorSchemeName} from '../../../Libraries/Utilities/NativeAppearance';
+import {
+  RNTesterBookmarkContext,
+  bookmarks,
+} from './components/RNTesterBookmark';
+import type {RNTesterBookmark} from './components/RNTesterBookmark';
 
 type Props = {exampleFromAppetizeParams?: ?string, ...};
 
-LogBox.ignoreLogs(['Module RCTImagePickerManager requires main queue setup']);
+import {
+  initializeAsyncStore,
+  addApi,
+  addComponent,
+  removeApi,
+  removeComponent,
+  checkBookmarks,
+  updateRecentlyViewedList,
+} from './utils/RNTesterAsyncStorageAbstraction';
 
 const APP_STATE_KEY = 'RNTesterAppState.v2';
 
 const Header = ({
   onBack,
   title,
+  documentationURL,
 }: {
   onBack?: () => mixed,
   title: string,
+  documentationURL?: string,
   ...
 }) => (
   <RNTesterThemeContext.Consumer>
@@ -67,9 +85,12 @@ const Header = ({
           ]}>
           <View style={styles.header}>
             <View style={styles.headerCenter}>
-              <Text style={{...styles.title, ...{color: theme.LabelColor}}}>
+              <Text style={[styles.title, {color: theme.LabelColor}]}>
                 {title}
               </Text>
+              {documentationURL && (
+                <RNTesterDocumentationURL documentationURL={documentationURL} />
+              )}
             </View>
             {onBack && (
               <View>
@@ -105,7 +126,11 @@ const RNTesterExampleContainerViaHook = ({
   return (
     <RNTesterThemeContext.Provider value={theme}>
       <View style={styles.exampleContainer}>
-        <Header onBack={onBack} title={title} />
+        <Header
+          title={title}
+          onBack={onBack}
+          documentationURL={module.documentationURL}
+        />
         <RNTesterExampleContainer module={module} />
       </View>
     </RNTesterThemeContext.Provider>
@@ -114,9 +139,19 @@ const RNTesterExampleContainerViaHook = ({
 
 const RNTesterExampleListViaHook = ({
   onNavigate,
+  UpdateRecentlyViewedList,
+  recentComponents,
+  recentApis,
+  bookmark,
   list,
+  screen,
 }: {
-  onNavigate?: () => mixed,
+  onNavigate?: (item: RNTesterExampleAction, key: string) => mixed,
+  UpdateRecentlyViewedList?: (item: RNTesterExample, key: string) => mixed,
+  recentComponents: Array<RNTesterExample>,
+  recentApis: Array<RNTesterExample>,
+  bookmark: RNTesterBookmark,
+  screen: string,
   list: {
     ComponentExamples: Array<RNTesterExample>,
     APIExamples: Array<RNTesterExample>,
@@ -126,12 +161,27 @@ const RNTesterExampleListViaHook = ({
 }) => {
   const colorScheme: ?ColorSchemeName = useColorScheme();
   const theme = colorScheme === 'dark' ? themes.dark : themes.light;
+  const exampleTitle =
+    screen === 'component'
+      ? 'Component Store'
+      : screen === 'api'
+      ? 'API Store'
+      : 'Bookmarks';
   return (
     <RNTesterThemeContext.Provider value={theme}>
-      <View style={styles.exampleContainer}>
-        <Header title="RNTester" />
-        <RNTesterExampleList onNavigate={onNavigate} list={list} />
-      </View>
+      <RNTesterBookmarkContext.Provider value={bookmark}>
+        <View style={styles.exampleContainer}>
+          <Header title={exampleTitle} />
+          <RNTesterExampleList
+            onNavigate={onNavigate}
+            recentComponents={recentComponents}
+            recentApis={recentApis}
+            updateRecentlyViewedList={UpdateRecentlyViewedList}
+            list={list}
+            screen={screen}
+          />
+        </View>
+      </RNTesterBookmarkContext.Provider>
     </RNTesterThemeContext.Provider>
   );
 };
@@ -139,38 +189,42 @@ const RNTesterExampleListViaHook = ({
 class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
   _mounted: boolean;
 
+  constructor() {
+    super();
+
+    // RNTester App currently uses Async Storage from react-native for storing navigation state
+    // and bookmark items.
+    // TODO: Add Native Async Storage Module in RNTester
+    LogBox.ignoreLogs([new RegExp('has been extracted from react-native')]);
+
+    this.state = {
+      openExample: null,
+      screen: 'component',
+      Components: bookmarks.Components,
+      Api: bookmarks.Api,
+      recentComponents: [],
+      recentApis: [],
+      AddApi: (apiName, api) => addApi(apiName, api, this),
+      AddComponent: (componentName, component) =>
+        addComponent(componentName, component, this),
+      RemoveApi: apiName => removeApi(apiName, this),
+      RemoveComponent: componentName => removeComponent(componentName, this),
+      checkBookmark: (title, key) => checkBookmarks(title, key, this),
+      updateRecentlyViewedList: (item, key) =>
+        updateRecentlyViewedList(item, key, this),
+    };
+  }
+
   UNSAFE_componentWillMount() {
     BackHandler.addEventListener('hardwareBackPress', this._handleBack);
   }
 
   componentDidMount() {
-    this._mounted = true;
-    Linking.getInitialURL().then(url => {
-      AsyncStorage.getItem(APP_STATE_KEY, (err, storedString) => {
-        if (!this._mounted) {
-          return;
-        }
-        const exampleAction = URIActionMap(
-          this.props.exampleFromAppetizeParams,
-        );
-        const urlAction = URIActionMap(url);
-        const launchAction = exampleAction || urlAction;
-        const initialAction = launchAction || {type: 'InitialAction'};
-        this.setState(RNTesterNavigationReducer(undefined, initialAction));
-      });
-    });
-
-    Linking.addEventListener('url', url => {
-      this._handleAction(URIActionMap(url));
-    });
-  }
-
-  componentWillUnmount() {
-    this._mounted = false;
+    initializeAsyncStore(this);
   }
 
   _handleBack = () => {
-    this._handleAction(RNTesterActions.Back());
+    this._handleAction(RNTesterActions.Back(this.state.screen));
   };
 
   _handleAction = (action: ?RNTesterAction) => {
@@ -179,6 +233,7 @@ class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
     }
     const newState = RNTesterNavigationReducer(this.state, action);
     if (this.state !== newState) {
+      // syncing the app screens over async storage
       this.setState(newState, () =>
         AsyncStorage.setItem(APP_STATE_KEY, JSON.stringify(this.state)),
       );
@@ -186,6 +241,16 @@ class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
   };
 
   render(): React.Node | null {
+    const bookmark = {
+      Components: this.state.Components,
+      Api: this.state.Api,
+      AddApi: this.state.AddApi,
+      AddComponent: this.state.AddComponent,
+      RemoveApi: this.state.RemoveApi,
+      RemoveComponent: this.state.RemoveComponent,
+      checkBookmark: this.state.checkBookmark,
+    };
+
     if (!this.state) {
       return null;
     }
@@ -195,24 +260,47 @@ class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
         return <Component onExampleExit={this._handleBack} />;
       } else {
         return (
-          <RNTesterExampleContainerViaHook
-            onBack={this._handleBack}
-            title={Component.title}
-            module={Component}
-          />
+          <>
+            <RNTesterExampleContainerViaHook
+              onBack={this._handleBack}
+              title={Component.title}
+              module={Component}
+            />
+            <View style={styles.bottomNavbar}>
+              <RNTesterNavbar onNavigate={this._handleAction} />
+            </View>
+          </>
         );
       }
     }
     return (
-      <RNTesterExampleListViaHook
-        onNavigate={this._handleAction}
-        list={RNTesterList}
-      />
+      <>
+        <RNTesterExampleListViaHook
+          key={this.state.screen}
+          title={'RNTester'}
+          onNavigate={this._handleAction}
+          UpdateRecentlyViewedList={this.state.updateRecentlyViewedList}
+          recentComponents={this.state.recentComponents}
+          recentApis={this.state.recentApis}
+          bookmark={bookmark}
+          list={RNTesterList}
+          screen={this.state.screen}
+        />
+        <View style={styles.bottomNavbar}>
+          <RNTesterNavbar
+            screen={this.state.screen}
+            onNavigate={this._handleAction}
+          />
+        </View>
+      </>
     );
   }
 }
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
   headerContainer: {
     borderBottomWidth: StyleSheet.hairlineWidth,
   },
@@ -236,6 +324,13 @@ const styles = StyleSheet.create({
   exampleContainer: {
     flex: 1,
   },
+  bottomNavbar: {
+    bottom: 0,
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'absolute',
+  },
 });
 
 AppRegistry.registerComponent('SetPropertiesExampleApp', () =>
diff --git a/packages/rn-tester/js/assets/bookmark-filled.png b/packages/rn-tester/js/assets/bookmark-filled.png
new file mode 100755
index 0000000000000000000000000000000000000000..a6e5075de537a83a2a122b65f0e84021decc5ec9
GIT binary patch
literal 217
zcmeAS@N?(olHy`uVBq!ia0vp^Dj>|k1|%Oc%$NbB7I?ZihEy=VIcF%?;2>}`fJK3k
zljDHk)2ZR>cv^yjSoq(_uS!w-8-3;<heZS9mE-;izKME9cMrTtGJBwS`yQk3r(V7l
zC&HUpOodcd%v5k}V&N3}^3GgfJzEmH!Z)@@Z<(JixbAR=?}$;vmkfrFDGL95_}S;O
zKT1(}rr@-mVM}r4>|K0LF5SF4pE)cpHaC??X;h8UF!X1CV<^=WXu!qLw`XqpOnnUz
Qpj#O{UHx3vIVCg!01o3z%>V!Z

literal 0
HcmV?d00001

diff --git a/packages/rn-tester/js/assets/bookmark-outline-blue.png b/packages/rn-tester/js/assets/bookmark-outline-blue.png
new file mode 100644
index 0000000000000000000000000000000000000000..a17ef85991fba10b0f19f2c8444023184cdb3a4a
GIT binary patch
literal 1034
zcmeAS@N?(olHy`uVBq!ia0vp^5kQ>J!3HEVUa>0zDb50q$YKTtZeb8+WSBKa0w~B>
z9OUlAu<o49OCX0O-O<;Pfnj4m_n$;o1_tK&o-U3d6^w7^2KwE05OIC)@cX>bB-sOe
zhqzv-uj1g<)>yM3k@bS;1hKAP;k%e#a3!#BU|CYP>}1J2^)LrTMdNRqk3W$+8PxJN
zL4IcQ#tYmI9EvRhP9P#kmd*9%X4&t0)_Fe}y2b7>v6a7zdAFf2ndb~Mmw^6`baMl@
z`?4p}_vEtqeVHiyw}aymOZCp{e(%)67<VqZzCl*GlGm`OV3Sc1t7W+5bB;sn6Yk&1
zUZZp^_Ne$XwUp@}v~N5R4x8Fh+%LGtDs#rtW`}!<Q(WK5F6y0sG%q_V{ra{Ka^H)u
zZ4>agqrbD#Bz9fEC(9|?GtM|1JQc9PNMsEUtG4riFnu<&e1EenIx0iptbk7Ot#5BN
z-FB3ow%zq@jpm}u;&-;TOIWWwug>#r)4_^OdWDxnbw1zxww6bIl46Cl@$0{H&P>jk
zT|4{Dij7}bPWRVck4r!Neww72*6j$MptEjPP0Qy_UA?Wjpi1+bCGSD~ax<~}&s{bJ
z0>kcR^qJQ=I+bQM^UDL2zjD;wyE!4Smw$4q<(?O-tu_a)1*)iXNtd6y!tP%Z_w!|Q
z_fA{STJzj<zW*w**trif)AuX%Gz#B7)@pg|YKp_AJ#tnzH|g~pUiDkX&VEPs+dHMt
z)4u)vvnO%lEk_P9^Su50s?XbVZ~uJQCUssRx1z-KS%!RZbJ%67`nWIbZkk_a=Cf{2
z#re5EzO61|m3*doQ^GQGVXfKC_~uo$dhrGKZW=y$w?KHq^DUe0&zQFqWwQDIl4*Ls
zS!T0L^~ou-Id-f*;c~YqcIPs=sb*2v(w#S5;l8PRnr)MRn8ca8Y6gO-+<eJ5&mH@8
z(e_@<aeWt_uzB7_ym4oe1JaXsnv@6D>P=k5`h0G#d#Rb&%g?*At1ISn2gfR@u>Zd^
zHRQX*ryF+9Ri<+YYL^R7Y8FY`^ZWKL<{#E`*fkbwMidpSxOX$+$qcO*oBJN@*)0A{
zJIMW)&5><k^H1j%XwB_SooRRdQo_$STc=n_d*4g{nX_loroa%Oht{fCOP?<PynBtE
zxM0n#8Rw2o`fmAWV+P~5JHngpru{AV)qIoY&wd_}e}I|j>=S#ZEg|V0tF$VCS(m}n
L)z4*}Q$iB}-<in6

literal 0
HcmV?d00001

diff --git a/packages/rn-tester/js/assets/bookmark-outline-gray.png b/packages/rn-tester/js/assets/bookmark-outline-gray.png
new file mode 100644
index 0000000000000000000000000000000000000000..2b2281e5373db016c71727fe67b4a15f668b7d5f
GIT binary patch
literal 1076
zcmeAS@N?(olHy`uVBq!ia0vp^5kQ>J!3HEVUa>0zDb50q$YKTtZeb8+WSBKa0w~B>
z9OUlAu<o49OCX0O-O<;Pfnj4m_n$;o1_tJno-U3d6^w7^#`@iM5OK?2<gurW^BkX0
zom@p$1mj)DlU!Wd3Tqg4F<la!vaaC^Cnx75*$JvoOg$#tllG0;F7Qh7_vYhItb;^W
z%Ps$rQu9gKq(i`oL$L)+OmTNEGLq}Bt}0)#-M{;&(!}ovUCyU|`thS;+y4FbQ)O7V
z!#2v#n?Iku*X?olp5%}(8*b*zE7^T_CX0Z|jVG__Yu3(|y~(3yHIdIr#ay+g_@>NG
zH~00|ia8Hdvqcx*eRJ1h-n@By-@biwvpe2$=E3<*3p2X+p1&Kt;oLo6ufy>f?bVMw
zz5hgNSJ=(p{(0Zpl~TS5izdHFJp0bYhO>5J_0(ObO~1@N6vDM6;NTNg5uUcDg8>E-
zTx`w<6Eq}vSeq9n7|=&><<tkaZ{I$5_N=dx=_0YF+_~F!@7~=Vw%YXGty@(W-k#po
z(HFPjl+8BNl1th=uf9#}+PAG%$nqlBwy!tey?^h!MwjFJ!>Nj$Z#NrSncZ4?%qeVc
zQ_^a?mv@(*yA^lLIcMsMh3B5d33gYC`I;D4T#Y>4*na2!jvSZk&ox-~U%MF)R@<j4
zJ(a6$uI&DcHv^{KEU2}c!nJbALB_eUhNa&<k9}18<+Xl7VrZ>iDckOId`wo>mp^Wk
zC@HV5-kp2<TYe<J-`Age-q=l7v$%RQc>d!zLD!RSSzBADuV$T;dpqTI?u*Y6R{wUq
zv8!G$za}<%&F$rzUmtzE)AXJ{bCJQN+Ya)dpGP;}Nt(B9UZGN*PiRH_{4E#vTi2Zb
zsGGoh?sBB<$HsX-w(B(CO`4ax*QxK$)rlTv)BJgMoo`iFx_YxPBYpEJ-^Dj2mi?MD
zGh{ydx6R%MMP_l>?yNfztyjJDdSpq^6`i8+{?wNqe<I>+ul+4$t`QDg@qoc?(!$LP
zSG?#u^-GVDTYJ6oEVlpcGxsiPUvhxG_D^Ta*PRBZ{;6z#l_RZd-uw0Dt#`MdD`^-D
zF8*0_Z~d>^>tt%<gp!-xncn1RRLRMI&C{57vt#8!<KNNlz?h3yb-E+W_uhEP!PV!E
zX_@!F{>-@QysNrW*SWSyOV5X@9=gXTd;D5t{GH?P_I2$GIw>CHVD?GvkX3fl?$YVA
z-CX|{$nXCB>ACd_g(lY9#xc{+wQYK}`Tg}pJ1?-sUw^wjyX(NOHQT+Rc?_J<CRBam
Ze!At2bDQ`db6_TC@O1TaS?83{1OT-B?(6^n

literal 0
HcmV?d00001

diff --git a/packages/rn-tester/js/assets/bookmark-outline.png b/packages/rn-tester/js/assets/bookmark-outline.png
new file mode 100755
index 0000000000000000000000000000000000000000..a939dac5740accd96a2d4f770b626ef57e39e5f5
GIT binary patch
literal 260
zcmeAS@N?(olHy`uVBq!ia0vp^Dj>|k1|%Oc%$NbBPJ6mIhEy=Vy`-4KWGK?`(DMk3
z-4CA!#YstdO!I&GDEKS+`#dmi4Chc`YIIN%^w{I1<X>|_sz`AQ`?J5Esk7HtzSr%V
zC#ZELL(V36&-6n&Q(iVj>ZP@W-8^QwVCEIQ<P__bR_s?iOxM?`J1{b_XgDx(1vD_V
zD6;9ZKV<&D<3W$5n?L(Q>Fn*<8(prNXY^_Iz02>H|1*`j^m<aOzR!k>f&B}%=-;ir
zYX71kp6A^TYnR^O$N;I+>Bp>vbG#c?nN0g*;3xljxyCLgHI}O%OeR;d0KLWF>FVdQ
I&MBb@0CALIeE<Le

literal 0
HcmV?d00001

diff --git a/packages/rn-tester/js/assets/bottom-nav-apis-icon-active.png b/packages/rn-tester/js/assets/bottom-nav-apis-icon-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..772111340dc91a690c3fbcdf501d988048f6d28a
GIT binary patch
literal 1870
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
IM6N<$f+Xm7<^TWy

literal 0
HcmV?d00001

diff --git a/packages/rn-tester/js/assets/bottom-nav-apis-icon-inactive.png b/packages/rn-tester/js/assets/bottom-nav-apis-icon-inactive.png
new file mode 100644
index 0000000000000000000000000000000000000000..29de7b79b6086a7570525e82da3ad8b18d87e460
GIT binary patch
literal 1953
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

literal 0
HcmV?d00001

diff --git a/packages/rn-tester/js/assets/bottom-nav-bookmark-fill.png b/packages/rn-tester/js/assets/bottom-nav-bookmark-fill.png
new file mode 100644
index 0000000000000000000000000000000000000000..29d29dff8f2ba1bdc32c4ffe2a7b310d432bafb3
GIT binary patch
literal 768
zcmeAS@N?(olHy`uVBq!ia0vp^2|%32!3HEv4o*=8Qk(@Ik;M!QiWVTu=sL|1q=K<H
z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&di3`|o!T^vIy7~kH#T`1)!;P$Ysh@ptB<pEER
z(gtGz$q2~>0&h5gY}td4c&0GUW;~T}C7LHx<kszutN*MY)r7`YJy3d~d|_X&Bm=_%
z(^*UJShf^Aw%_-==4<4yJ4bew`P(f$A3wi-^UXIq-!oUUc69Im{xeZ$kN3;ZF9hX&
z-Pvi}pkM#c{@;%p!zCKEdA2S$%a&hbDE!%a{?G@prKK(}xHcG1t6#a6eMj!D!h0pn
z`t_+g^&H;!pKf0!{alxSk1@~FeJ|UNtyfsT&3s)&+ow12&huaAWpE4dG=F5+x_h4V
z5)K7721BL}L5CiOBo+bX1_{O^11R)n^3&B;D_<;^<(nB1wXEIuiNu2)KjM!+Ui2u^
z{A#1H_Guj#zvt{z?4+$DYvxvbIdw}-Y|+a<4KhqQwPyc*$p_1sY!$F%yYb8B$LoLj
z;vI^s)-PYm`BWq!n_1`Ioc(iO{Wuyr=i*a=gyi=1vmC|i_5K}Rw{KRM*`j3(y@xEm
z*}dK|B`|dV<>%!Ro|j(-)H21zdaY`isF%3>6Q{+$qyFz|HWmDESyNN?P&Q(f!J4_}
zV`n^g^tz>-BXQ*+gRX)dzfJ^67_=<qny%?|tlK_(@AMz@)Z`cZ@aVP|*V|FFDTMR<
z-hTb8#PCPDiaMeF&*!`mJsaWY^k&zz)Rhr6^@c}w>9#CgRoN%o{a#FJ-5i~(CzHA5
u{jU3!$Q=r5<*#!!o+h!#0GLGQR51G9UivGP@#rfckHOQ`&t;ucLK6U7j5sC$

literal 0
HcmV?d00001

diff --git a/packages/rn-tester/js/assets/bottom-nav-bookmark-outline.png b/packages/rn-tester/js/assets/bottom-nav-bookmark-outline.png
new file mode 100644
index 0000000000000000000000000000000000000000..dfe68645aa1ca6b538ce8e603f105f40ed7b0303
GIT binary patch
literal 929
zcmeAS@N?(olHy`uVBq!ia0vp^2|%32!3HEv4o*=8Qk(@Ik;M!QiWVTu=sL|1q=K<H
z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&di49sSpE{-7;jBoEY=3aIXVS6C1_JTvQk#~|G
zgY*{ZDZG<-B@~mG5}1scq%DA4x%VR8y)pK;-@kjb-}9fpmFUWE#h?DKuv_t@LqJea
z@b2Q!Ckdgo8}#FIb8~WYZA)I?`@6Mt%h%J_-e1l7n*XkIGuMlz|7ovXC4Nj<yjDK!
zP~EwMlUXBvWdHtj`C9tIj>T);wI5lOUC3aJ{n5L2Ye3&(pD6~R4%$5XugGgZxcK{-
z`g>`yf13^dNNt<;RJ?Q3WT~%9-{<a{{W;cKa!Et3?6FUiG^}4<mE0yQHDyzwQT5kz
zk-a>Z4+{58(4IBBntws+1_lE$hGR?zA{ZpN8Il<jbQpSA8#WGz;O<vUyV{qnd)gJ7
z%BcC}%aW+y$yM7*Z`*Dy)7^fgnr%J9&8OR~{&_rQ-qn${GgLa{V9$f!mo`Q-u9z0R
z)sfYx>3w#t?a8K9Ps4Hp{_J{r?AN8%aPQqAg7>&5tjKD97O&5`Km7m7x29XR&HK{y
zo%8)6q0rn5UrLLb{g1!@Qt~+0blKLgvHAfm<&K@J%udXozipE0LHjRhZ%y7Gzvied
z_Au6E(JJ05`|{O~=bJsu+$z4u_<v-hYsF#JRks#wuiR-p%gs1%K~&h0Fr!Lm)m7IN
zbh+!4Tfc<3EH3PQCTj1o$ctTc-^WJ}*yGN-eXjp<R_~CsQlMq?mK^QM3*0RBAEd5V
z9aP#gSyju(<Mj4P*^x7*iEjKJx4C?h%UQ`KPY)ipZ}<7UeZxyznJwWh<r`djc`t3>
zZyPRM6aRf)*Y*wf7==uWHo85Ivi&Q5AhhPwylJ9_9*eg0xry)C7}xbo{9~U>=1jNs
z7C-E4a}%X?6#{21-?{X`Z<G4xB^R04%9*$8Ea&K)W%&8<yNqc?VJ_C9(_9RH{46=P
zUsWY5!R_>e<tsNAPg=3LSUUEH`0ecr;#*u^_P)=Uc1iRi2QZZj&i%<Bv9>vLVT8$U
QV2)z&boFyt=akR{0Oc}}2LJ#7

literal 0
HcmV?d00001

diff --git a/packages/rn-tester/js/assets/bottom-nav-center-box.png b/packages/rn-tester/js/assets/bottom-nav-center-box.png
new file mode 100644
index 0000000000000000000000000000000000000000..31b0427bb776abcb4f82fc47f2fc1a64dc60280f
GIT binary patch
literal 1340
zcmeAS@N?(olHy`uVBq!ia0vp^CxAGGgAGU?ZmZ`8QY`6?zK#qG8~eHcB(ehe3dtTp
zz6=aiY77hwEes65fI<x~7#K<o7#Ln9FfdrnU|<k0n6oR;1}MQ<;1OBOz`!jG!i)^F
z=14FwFh*vEM3hAM`dB6B=jtV<<R_)-Rpb@`RWmTyR9FF-xv3?I3Kh9IdBs*0wn|_X
zRzNmLSYJs2tfVB{Rw=?aK*2e`C{@8!&qU8a$&O1wLBXadCCw_x#SN+*$g@?-C@Cqh
z($_C9FV`zK*2^zS*Eh7ZwA42+(l;{F1**_3uFNY*tkBIXR)!b?Gsh*hIJqdZpd>Rt
zPXT0ZVp4u-iLH_n$Rap^xU(cP4PjGWG1OZ?59)(t^bPe4^x<X$wc3D0t^A8JQ-L;v
z%(pYN0joq2gW6-G53(G|F%X}EMS)(m<Fe6*2b&$2&mr|l1_owdPZ!6K3dXm09P^|d
zd0YamPyE%N?OVn-XRAWM48gmucKWG{JpaAoPiAYf|NrOjuU{XU8JPGv|5W{0$uH>e
zz@D*b2M33ZqQeCBf<Ih94l|t7Xya(tT4vMeDEXB0(b6v;>uPvTY4}h0yuO{2T~Oh~
z0)w?hK;3uFU+HY-5J(A_5w>&wfsai*Rf<LRRf_6r=@okvn&UcJVxIp#?sM)#h2y*a
z)14ewI0crR^LpyU#1bj7YwBwjj-d3VMT(3~Iy`qzl`^rc+#IxX0)wMiTi#PE#-=Ng
zD`Pww6u6zY7tLjGe6=P-PsL$E>%!=rehmtxVOrus3MUR-SR146Fu_WDDmSM<O5%&K
zb;1fBbElqaW#QOlP@;XE2<w23R{8J0wDtSTho??T%ISN2`X5qN5iM3XW6r~mO*(u0
z!|Xa39Qn8oYdi;fyK?4?7Ya-)mKr>Z=eR5QPk0ip^!(}nd7W&jQ`9{^X;1tfbNsWP
z?3BQH3eRKNg?ZH+CLDYi^%m%vnDiGd2U$3bEMiv20$u!?XRg5v21mB`?5)61D4M%a
zm`zyW#DjvhWk9d4GcGxlz_gfE@=I^K{Qjos$Ud=@3+8flF%#D6xO0Dcy!{lzM-~nt
z`Gu_aJR20=FM0i@f{Ep4--q9vC69w&T-zIe;oEoat;OEk?Hcp${%)Q9M*jr&hAHoq
z9VXPyy#0ffiKUWp+ND~cwdv31^8cE<_g#uenV91{o;9BrZr^-;ZqK1}N*)mj$KI+s
kOo+R;t5r~8Wbi)lUs)@(^(wCn6R3>xboFyt=akR{0C)oefB*mh

literal 0
HcmV?d00001

diff --git a/packages/rn-tester/js/assets/bottom-nav-components-icon-active.png b/packages/rn-tester/js/assets/bottom-nav-components-icon-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..22c56d70603808034ea32877c5ff7a36461ed137
GIT binary patch
literal 1047
zcmeAS@N?(olHy`uVBq!ia0vp^PC)Fz!3JWTSMCE+oCO|{#S9FJ79h;%I?XTvD9BhG
z<nF|<?wrg^AcrO0(btiIVPik{pF~y$2Ie)ME{-7;jBjWA`rQr?IG!#O{%X=ag;>*+
zz*bpr3&*(=yh_;B8T=e97+<b>#kFhok@mZx(_4fcmUdNye`oQ%&O7g%a=(`Rwq*75
zd@G-A_e`?4{&v3ZbNC{|1_cg51s#s#g<(3U@2NM~ex2!L!TLhJa^Cf3)(rxJeVb$5
z-t7MKcI!k@7siW!)lPFPNbm|U=-d2sfopuEQ)QCsBQ7SZsa{`~zb~)VnBe4UB6U`5
z{u}nX-!^3vCN=Jeja{3xz504%lSWF`imC?H+pJB!I=4Um;0vtZ-m!AhZjR%X(azj4
zcB_rfI60OcZjyPpa>Mzr57N>&xsDh`edBNc&T2X7wCqO%(G5#p9gKT)pnY}j)tw<<
zFYMYsORYzF+uZOYQsRQry~zUS>lf7h{kY^ynfji)Y%2LPPKOw3B?<Ia9Lf)$bnN5Q
z+{$}D1HahKYL5wyny`aem6^}x{UK&&iSF|u7db90o^bCYXHAdvgWu)Xr-rY-FR-?>
zLwJ_+k#n`~OZwcJqNRLV8G_zUU+&elD^V-yxmT~FiQVp*YL23ob~k)J-}-FFF7hw(
z@qMMYM;c>-cNoNfWYs(@bEd|9MaGk6n|Wq^PItcV+5FvredT`c9eFYHwkNU~b)S&x
z)p;n!GoftN8L5pkUCv1LE<0hI6x?kf2xKTH1s`3$GQ-4GPH=XG`xDXLWd@QP!~RTv
zA`WIvEO(iBF{7(exy;FB@4l;gR#LtbRg-oukmu2t)|{59!m}vQ^>QkMKhORD_g3$z
z`pc@g#`T~2D#w<ur?N!<yu15#f9hf8SG~{lJvxpnExIV8skH5R+`Ro2e+=Su9;>X#
zSfk&~(rOh}dZuP=^9)7h=d)h9i?{wYoxJ~Vx09@K>(a9($-$iwE+(^_Tytg>?)+D|
z+oyx0x8nj82wyG1Rc8gJP1$nXPEBdq?jxHf&ptiRU|Q;X7hUzHiEb9vDXI?ajA~|2
zQgxSK{KK30za+3<Cq4DW#Mg&UFnWAcQdr_&)BnaLZ+Vr3?(ZG<G7fEW;CwxyV2P;K
zqVt<7O}GB8y{X6*^Zn7&4@%iZJ$p~<dl&vb@8NHI$Y5WA(~$-HC9fX%AL!;kH#(#^
zCZ%T8wIr^$TU+FgE_E*D;lHJ_`1Z2pb~_H4KIT=jQVir>ZnN|Amjew7ZxkYzud6QO
eZBj^is=wUem)LXp*OI_|%;4$j=d#Wzp$Py)$k<E(

literal 0
HcmV?d00001

diff --git a/packages/rn-tester/js/assets/bottom-nav-components-icon-inactive.png b/packages/rn-tester/js/assets/bottom-nav-components-icon-inactive.png
new file mode 100644
index 0000000000000000000000000000000000000000..aa051c06e07f062c4758352757c3a5d77454c4fb
GIT binary patch
literal 1026
zcmeAS@N?(olHy`uVBq!ia0vp^PC)Fz!3JWTSMCE+oCO|{#S9FJ79h;%I?XTvD9BhG
z<nF|<?wrg^AcrO0(btiIVPik{pF~y$2IlFWE{-7;jBjTLhTU=yX?yQ;q5T&7ZsuLg
zcN^_Aw8BpCz2Z6|+M%rx+xRX)s<HVLa|!FN=1t9)+HYNUO0$~WXUpa><A91o^?q@c
znJk~?RzL5zVssElVPX+uNzR%4EH1R+g7MclhW%pA%e}9c{@%bKrqr}Gs`8b!&%Yg_
zw-gr~Z~wRMwcIy_WQ`P_-8;2|?Y}cD77}6kWb(Y^io}T-KCTsCcWW(m32VC1BeNvs
zgkjv?&{m$4OH8lSJXo_gjp>Nrq{mODzy8Ji-=sUtGnOU$UjE5V$(#OvHsF>#E4^~t
zG2h4AoLFtn=r}HnN<I7Y(371Cu0bn1>@V&JoSJUmEvw<uAN+{v>+dO-`8X!^%knLn
z7Iq{`Tu`!Cnd9dFqz`v%_i2>QdHj6cvUAFsTf0I99ZiC&L}zmyT;7$nGGfP^EvK`$
z>8C6WN$w9fYOyHy=bC>&=-M-m#ThIwitS1kt7v!~-Rpg>RXg>o()meFN6y6xKD($P
z_p@R5GF90vGY;-a)J}T7szX8Qy1Cpk&w$A?@;0ikvcG@WaJ+tPKDWZwAH|3L3d~PM
zRnBOhsqN&tnBiCAD~ChcOCKF{pTT_j{G$Ws?>=spI^&Qe=(+f!?mPP?R-fq9YaPBS
zN!K#AxXu#H);Z*6a!aYV!*rHTuIpmmOC2|Eba`k?<t7>@DQhd8&Dhd<wqtIDV5Hk(
z-DkZw3<cx<?weK$)Zuw#T0i%5{q3z$hh3Vw-0W&@#hGz-EeO@Puj;U?@bQy>UDx;Q
z=E$#ZyuRbVR(#UGc{A!vZXHrc`n~k=U-R?%ZtABsIA;Pa<WVv!S?l&)u;xMjZgux-
zb>Gi(l^QRNI-0U(Vu!2CV%;ly5{>je*MHE_)^KW8GNA&Itm33=+#=e#vF~Czf49Pg
z*%ldpL;pP5q<Sp!_s_aZWsCw*%+sWA-c)6H%+3{*+Iu_S;78%!74Fj}fBJJ`D?^c>
zp^A#qmKi-)Z(C34;QPZb5Tqyieb4@U_wV;jZp~f7ziOR~(-*JzT>0^NQnPhx(<`*%
z!xsHXUvj?vG548cE-c+<oGTjtFY4L1Ynx~HW3^+;qe4&1)?0rwY!FqBFkCau(`}8!
zyk8HxuIEhW=r9uB;JVCa=jM_Vw;2@|cx%SYmw8*y#^N~Xlk|Dt{{r=#LclD_z~JfX
K=d#Wzp$P!@E4%gp

literal 0
HcmV?d00001

diff --git a/packages/rn-tester/js/assets/documentation.png b/packages/rn-tester/js/assets/documentation.png
new file mode 100644
index 0000000000000000000000000000000000000000..d43e2593969e660fa8cbbe5ee39b87764ae09eb6
GIT binary patch
literal 314
zcmV-A0mc4_P)<h;3K|Lk000e1NJLTq001xm000;W1^@s6y#0RM00032Nkl<ZSV!HL
z;Squ`426?*bO?0^&kab|U=7L!o;&Ce>N@e#lRNB5NtJ_?{!W|s<u!pK6uz)<{je?o
zBC45rhlu+jXT0|TnuvHTW)62h93Y}Q0Blo<tpkLrb|N(ubk1#<`P>K3*{{iwiisV_
z0*J&vI*1|wV)2N0VrGHJa&Qp`zKL&|=Gis2X$OYH_a~ECfRy-uufnhU)lF<syg;h}
zwBk+nfL6T89>@`I65uVW27sf?c^Q?dW;1z(M6ft9Cf=+AIpfW&16qj10jjFHrrrV?
z5N5u$ZF|tfP7xD-2SUS+y$KSD<!A2Vy_a)lS?hXI&Qh|8lN9g33zYNV8Tz8_Jpcdz
M07*qoM6N<$f~C5N7ytkO

literal 0
HcmV?d00001

diff --git a/packages/rn-tester/js/assets/empty.png b/packages/rn-tester/js/assets/empty.png
new file mode 100644
index 0000000000000000000000000000000000000000..c659c6c057486eb902747e32407042da9e8d3d33
GIT binary patch
literal 22827
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

literal 0
HcmV?d00001

diff --git a/packages/rn-tester/js/assets/header-back-button.png b/packages/rn-tester/js/assets/header-back-button.png
new file mode 100644
index 0000000000000000000000000000000000000000..8fa30d327e6787f6e7e7ff03db30c68c4d2afb54
GIT binary patch
literal 446
zcmeAS@N?(olHy`uVBq!ia0vp^mO$*y!3HExebV;_Qk(@Ik;M!QiWVTu=sL|X0Vv2=
z9OUlAu<o49OCX0O-O<;Pfnj4m_n$;opj@!0i(^Oy<J+5#fy|Bqtq=DHG_*`);1c32
zbdV8Xmu7#!Amies(!gBM&|(nl+0~ddQ`2Jav)a(wTQR%Je*5N&odJP2+x4<Vg|xTM
z^P75U(>3q4hgZJyNIUFaoSW<MXx@8io9m*7xQ^enF3EBVxih!y-?LX@fv=<T|J;d*
ziC0)<ULRQ4&fWB=;r`|Pg7RN$=N!86$G0QO*sR{X<JP2_e@WY_c;9*2)o-ePIqAt~
z^X&=sbL~&snxws&Sl7I9u^5Z!F|nMNKczV(Zn9RF{1fYtirjGd{C(y{>@~l{?}&27
z73f=CpP#+AtWLQ9xhdz7$m`WH+f@uE{&<kzJ7?l1caLn9+{aapF^OveU)Jw;PRw!i
z_-K3hWcTFo$&<y^*Xyb4`^EYC#m(8XYt9~DUzH2q_e4F<sOER=zM)l<XA;|--kSXB
l-4Aw^{mW;}1cJX;t;>aGU*04n`yCkE44$rjF6*2Ung9j(y4(N&

literal 0
HcmV?d00001

diff --git a/packages/rn-tester/js/assets/search-icon.png b/packages/rn-tester/js/assets/search-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ac8e5eb99a825fa8fa828b7ea40315d14ee3e705
GIT binary patch
literal 1728
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
WWjolo0P%_d0000<MNUMnLSTY$fg;EN

literal 0
HcmV?d00001

diff --git a/packages/rn-tester/js/components/ExamplePage.js b/packages/rn-tester/js/components/ExamplePage.js
new file mode 100644
index 00000000000000..44661b2f11749f
--- /dev/null
+++ b/packages/rn-tester/js/components/ExamplePage.js
@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+import * as React from 'react';
+import {StyleSheet, View, Text, Dimensions} from 'react-native';
+
+type Props = $ReadOnly<{|
+  children?: React.Node,
+  title: string,
+  description?: ?string,
+  category?: ?string,
+  ios?: ?boolean,
+  android?: ?boolean,
+|}>;
+
+const ScreenWidth = Dimensions.get('window').width;
+import {RNTesterThemeContext} from './RNTesterTheme';
+
+export default function ExamplePage(props: Props): React.Node {
+  const theme = React.useContext(RNTesterThemeContext);
+
+  const description = props.description ?? '';
+  const onAndroid = props.android;
+  const onIos = props.ios;
+  const category = props.category;
+
+  return (
+    <>
+      <View style={styles.titleView}>
+        <Text style={{marginVertical: 8, fontSize: 16}}>{description}</Text>
+        <View style={styles.rowStyle}>
+          <Text style={{color: theme.SecondaryLabelColor, width: 65}}>
+            {category || 'Other'}
+          </Text>
+          <View style={styles.platformLabelStyle}>
+            <Text
+              style={{
+                color: onIos ? '#787878' : theme.SeparatorColor,
+                fontWeight: onIos ? '500' : '300',
+              }}>
+              iOS
+            </Text>
+            <Text
+              style={{
+                color: onAndroid ? '#787878' : theme.SeparatorColor,
+                fontWeight: onAndroid ? '500' : '300',
+              }}>
+              Android
+            </Text>
+          </View>
+        </View>
+      </View>
+      <View style={styles.examplesContainer}>{props.children}</View>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  titleView: {
+    backgroundColor: '#F3F8FF',
+    paddingHorizontal: 25,
+    paddingTop: 8,
+    overflow: 'hidden',
+  },
+  iconContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  examplesContainer: {
+    width: ScreenWidth,
+    flexGrow: 1,
+  },
+  description: {
+    paddingVertical: 5,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  docsContainer: {
+    alignContent: 'center',
+    justifyContent: 'center',
+  },
+  rowStyle: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  platformLabelStyle: {
+    flexDirection: 'row',
+    width: 100,
+    justifyContent: 'space-between',
+  },
+});
diff --git a/packages/rn-tester/js/components/RNTesterBlock.js b/packages/rn-tester/js/components/RNTesterBlock.js
index 1a0abba5eae33f..1f144d8360977e 100644
--- a/packages/rn-tester/js/components/RNTesterBlock.js
+++ b/packages/rn-tester/js/components/RNTesterBlock.js
@@ -10,10 +10,9 @@
 
 'use strict';
 
-const React = require('react');
-
-const {StyleSheet, Text, View} = require('react-native');
+import * as React from 'react';
 import {RNTesterThemeContext} from './RNTesterTheme';
+import {StyleSheet, Text, View} from 'react-native';
 
 type Props = $ReadOnly<{|
   children?: React.Node,
@@ -21,83 +20,48 @@ type Props = $ReadOnly<{|
   description?: ?string,
 |}>;
 
-type State = {|
-  description: ?string,
-|};
-
-class RNTesterBlock extends React.Component<Props, State> {
-  state: State = {description: null};
-
-  render(): React.Node {
-    const description = this.props.description ? (
-      <RNTesterThemeContext.Consumer>
-        {theme => {
-          return (
-            <Text style={[styles.descriptionText, {color: theme.LabelColor}]}>
-              {this.props.description}
-            </Text>
-          );
-        }}
-      </RNTesterThemeContext.Consumer>
-    ) : null;
-
-    return (
-      <RNTesterThemeContext.Consumer>
-        {theme => {
-          return (
-            <View
-              style={[
-                styles.container,
-                {
-                  borderColor: theme.SeparatorColor,
-                  backgroundColor: theme.SystemBackgroundColor,
-                },
-              ]}>
-              <View
-                style={[
-                  styles.titleContainer,
-                  {
-                    borderBottomColor: theme.SeparatorColor,
-                    backgroundColor: theme.QuaternarySystemFillColor,
-                  },
-                ]}>
-                <Text style={[styles.titleText, {color: theme.LabelColor}]}>
-                  {this.props.title}
-                </Text>
-                {description}
-              </View>
-              <View style={styles.children}>{this.props.children}</View>
-            </View>
-          );
-        }}
-      </RNTesterThemeContext.Consumer>
-    );
-  }
-}
+/** functional component for generating example blocks */
+const RNTesterBlock = (props: Props): React.Node => {
+  const {description, title, children} = props;
+  const theme = React.useContext(RNTesterThemeContext);
+  return (
+    <View style={[[styles.container], {borderColor: theme.SeparatorColor}]}>
+      <View style={[styles.titleContainer]}>
+        <Text style={[styles.titleText]}>{title}</Text>
+        <Text
+          style={[styles.descriptionText, {marginTop: description ? 10 : 0}]}>
+          {description}
+        </Text>
+      </View>
+      <View style={styles.children}>{children}</View>
+    </View>
+  );
+};
 
 const styles = StyleSheet.create({
   container: {
-    borderRadius: 3,
-    borderWidth: 0.5,
-    margin: 10,
-    marginVertical: 5,
-    overflow: 'hidden',
+    borderRadius: 0,
+    borderWidth: 1,
+    marginTop: 30,
+    marginHorizontal: 20,
+    backgroundColor: 'white',
+  },
+  titleText: {
+    fontSize: 18,
+    fontWeight: '300',
   },
   titleContainer: {
-    borderBottomWidth: 0.5,
-    borderTopLeftRadius: 3,
-    borderTopRightRadius: 2.5,
     paddingHorizontal: 10,
     paddingVertical: 5,
   },
-  titleText: {
-    fontSize: 14,
-    fontWeight: '500',
-  },
   descriptionText: {
-    fontSize: 14,
+    fontSize: 12,
+    opacity: 0.5,
+    color: 'black',
   },
   children: {
+    paddingVertical: 10,
+    paddingHorizontal: 10,
     margin: 10,
   },
 });
diff --git a/packages/rn-tester/js/components/RNTesterBookmark.js b/packages/rn-tester/js/components/RNTesterBookmark.js
new file mode 100644
index 00000000000000..62142bd8ad7026
--- /dev/null
+++ b/packages/rn-tester/js/components/RNTesterBookmark.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+'use strict';
+
+import * as React from 'react';
+import type {RNTesterExample} from '../types/RNTesterTypes';
+
+export type RNTesterBookmark = {
+  Components: {...},
+  Api: {...},
+  AddApi: (apiName: string, api: RNTesterExample) => mixed,
+  AddComponent: (componentName: string, component: RNTesterExample) => mixed,
+  RemoveApi: (apiName: string) => mixed,
+  RemoveComponent: (componentName: string) => mixed,
+  checkBookmark: (title: string, key: string) => mixed,
+};
+
+export const bookmarks: RNTesterBookmark = {
+  Components: {},
+  Api: {},
+  AddComponent: () => {},
+  RemoveComponent: () => {},
+  AddApi: () => {},
+  RemoveApi: () => {},
+  checkBookmark: () => {},
+};
+
+export const RNTesterBookmarkContext: React.Context<RNTesterBookmark> = React.createContext(
+  bookmarks,
+);
diff --git a/packages/rn-tester/js/components/RNTesterBookmarkButton.js b/packages/rn-tester/js/components/RNTesterBookmarkButton.js
new file mode 100644
index 00000000000000..63de5a5b45270a
--- /dev/null
+++ b/packages/rn-tester/js/components/RNTesterBookmarkButton.js
@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+const React = require('react');
+
+import {TouchableOpacity, Image, StyleSheet} from 'react-native';
+
+type Props = {|
+  isActive: boolean,
+  onPress: Function,
+  size: number,
+|};
+
+class RNTesterBookmarkButton extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+  }
+
+  render(): React.Node {
+    const {size, onPress, isActive} = this.props;
+    return (
+      <TouchableOpacity
+        style={[
+          styles.imageViewStyle,
+          {
+            height: size + 5,
+            width: size + 5,
+            borderRadius: Math.floor(size + 5 / 2),
+          },
+        ]}
+        onPress={onPress}>
+        <Image
+          style={{height: size, width: size}}
+          source={
+            isActive
+              ? require('../assets/bookmark-filled.png')
+              : require('../assets/bookmark-outline-gray.png')
+          }
+        />
+      </TouchableOpacity>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  imageViewStyle: {
+    backgroundColor: 'blue',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+module.exports = RNTesterBookmarkButton;
diff --git a/packages/rn-tester/js/components/RNTesterComponentTitle.js b/packages/rn-tester/js/components/RNTesterComponentTitle.js
new file mode 100644
index 00000000000000..66b0c2899c5a15
--- /dev/null
+++ b/packages/rn-tester/js/components/RNTesterComponentTitle.js
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+const React = require('react');
+import {RNTesterThemeContext} from './RNTesterTheme';
+const {StyleSheet, Text} = require('react-native');
+
+type Props = $ReadOnly<{|
+  children: string,
+|}>;
+
+class RNTesterComponentTitle extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+  }
+
+  render(): React.Node {
+    return (
+      <RNTesterThemeContext.Consumer>
+        {theme => (
+          <Text style={[styles.titleText, {color: theme.LabelColor}]}>
+            {this.props.children}
+          </Text>
+        )}
+      </RNTesterThemeContext.Consumer>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  titleText: {
+    fontSize: 20,
+    fontWeight: '400',
+    marginBottom: 5,
+  },
+});
+
+module.exports = RNTesterComponentTitle;
diff --git a/packages/rn-tester/js/components/RNTesterDocumentationURL.js b/packages/rn-tester/js/components/RNTesterDocumentationURL.js
new file mode 100644
index 00000000000000..8d6d8423591e81
--- /dev/null
+++ b/packages/rn-tester/js/components/RNTesterDocumentationURL.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+'use strict';
+
+import React from 'react';
+import {Image, StyleSheet, TouchableOpacity} from 'react-native';
+import openURLInBrowser from 'react-native/Libraries/Core/Devtools/openURLInBrowser';
+
+const RNTesterDocumentationURL = ({documentationURL}) => (
+  <TouchableOpacity
+    style={styles.container}
+    onPress={() => openURLInBrowser(documentationURL)}>
+    <Image
+      source={require('../assets/documentation.png')}
+      style={styles.icon}
+    />
+  </TouchableOpacity>
+);
+
+export default RNTesterDocumentationURL;
+
+const styles = StyleSheet.create({
+  container: {
+    textDecorationLine: 'underline',
+    position: 'absolute',
+    bottom: 0,
+    right: -15,
+  },
+  icon: {
+    height: 24,
+  },
+});
diff --git a/packages/rn-tester/js/components/RNTesterExampleContainer.js b/packages/rn-tester/js/components/RNTesterExampleContainer.js
index 7eed43740dc45f..271a61859b10e2 100644
--- a/packages/rn-tester/js/components/RNTesterExampleContainer.js
+++ b/packages/rn-tester/js/components/RNTesterExampleContainer.js
@@ -13,9 +13,9 @@ const React = require('react');
 const {Platform} = require('react-native');
 const RNTesterBlock = require('./RNTesterBlock');
 const RNTesterExampleFilter = require('./RNTesterExampleFilter');
-const RNTesterPage = require('./RNTesterPage');
 
 const invariant = require('invariant');
+import ExamplePage from './ExamplePage';
 
 class RNTesterExampleContainer extends React.Component {
   renderExample(example, i) {
@@ -42,13 +42,29 @@ class RNTesterExampleContainer extends React.Component {
         module.examples.length === 1,
         'If noExampleContainer is specified, only one example is allowed',
       );
-      return module.examples[0].render();
+      return (
+        <ExamplePage
+          title={module.title}
+          description={module.description}
+          android={!module.platform || module.platform === 'android'}
+          ios={!module.platform || module.platform === 'ios'}
+          documentationURL={module.documentationURL}
+          category={module.category}>
+          {module.examples[0].render()}
+        </ExamplePage>
+      );
     }
     if (module.examples.length === 1) {
       return (
-        <RNTesterPage title={this.props.title}>
-          {this.renderExample(module.examples[0])}
-        </RNTesterPage>
+        <ExamplePage
+          title={module.title}
+          description={module.description}
+          android={!module.platform || module.platform === 'android'}
+          ios={!module.platform || module.platform === 'ios'}
+          documentationURL={module.documentationURL}
+          category={module.category}>
+          {module.examples[0].render()}
+        </ExamplePage>
       );
     }
 
@@ -63,16 +79,24 @@ class RNTesterExampleContainer extends React.Component {
     ];
 
     return (
-      <RNTesterPage title={this.props.title}>
+      <ExamplePage
+        title={module.title}
+        description={module.description}
+        android={!module.platform || module.platform === 'android'}
+        ios={!module.platform || module.platform === 'ios'}
+        documentationURL={module.documentationURL}
+        category={module.category}>
         <RNTesterExampleFilter
           testID="example_search"
+          page="examples_page"
+          hideFilterPills={true}
           sections={sections}
           filter={filter}
           render={({filteredSections}) =>
             filteredSections[0].data.map(this.renderExample)
           }
         />
-      </RNTesterPage>
+      </ExamplePage>
     );
   }
 }
diff --git a/packages/rn-tester/js/components/RNTesterExampleFilter.js b/packages/rn-tester/js/components/RNTesterExampleFilter.js
index 992f30e6bc6b0c..403590e64df4d4 100644
--- a/packages/rn-tester/js/components/RNTesterExampleFilter.js
+++ b/packages/rn-tester/js/components/RNTesterExampleFilter.js
@@ -11,23 +11,36 @@
 'use strict';
 
 const React = require('react');
-
-const {StyleSheet, TextInput, View} = require('react-native');
+const RNTesterListFilters = require('./RNTesterListFilters');
+const {
+  StyleSheet,
+  TextInput,
+  View,
+  ScrollView,
+  Image,
+} = require('react-native');
 import {RNTesterThemeContext} from './RNTesterTheme';
+import type {RNTesterExample} from '../types/RNTesterTypes';
 
 type Props = {
   filter: Function,
   render: Function,
-  sections: Object,
   disableSearch?: boolean,
   testID?: string,
+  hideFilterPills?: boolean,
+  page: string, // possible values -> examples_page, components_page, bookmarks_page
+  sections: Array<{
+    data: Array<RNTesterExample>,
+    title: string,
+    key: string,
+  }>,
   ...
 };
 
-type State = {filter: string, ...};
+type State = {filter: string, category: string, ...};
 
 class RNTesterExampleFilter extends React.Component<Props, State> {
-  state: State = {filter: ''};
+  state: State = {filter: '', category: ''};
 
   render(): React.Node {
     const filterText = this.state.filter;
@@ -43,22 +56,52 @@ class RNTesterExampleFilter extends React.Component<Props, State> {
       );
     }
 
-    const filter = example =>
-      this.props.disableSearch || this.props.filter({example, filterRegex});
+    const filter = example => {
+      const category = this.state.category;
+      return (
+        this.props.disableSearch ||
+        this.props.filter({example, filterRegex, category})
+      );
+    };
 
-    const filteredSections = this.props.sections.map(section => ({
+    let filteredSections = this.props.sections.map(section => ({
       ...section,
       data: section.data.filter(filter),
     }));
 
+    if (this.state.filter.trim() !== '' || this.state.category.trim() !== '') {
+      filteredSections = filteredSections.filter(
+        section => section.title !== 'Recently viewed',
+      );
+    }
+
     return (
       <View style={styles.container}>
         {this._renderTextInput()}
-        {this.props.render({filteredSections})}
+        {this._renderFilteredSections(filteredSections)}
       </View>
     );
   }
 
+  _renderFilteredSections(filteredSections): ?React.Element<any> {
+    if (this.props.page === 'examples_page') {
+      return (
+        <ScrollView
+          keyboardShouldPersistTaps="handled"
+          keyboardDismissMode="interactive">
+          {this.props.render({filteredSections})}
+          {/**
+           * This is a fake list item. It is needed to provide the ScrollView some bottom padding.
+           * The height of this item is basically ScreenHeight - the height of (Header + bottom navbar)
+           * */}
+          <View style={{height: 350}} />
+        </ScrollView>
+      );
+    } else {
+      return this.props.render({filteredSections});
+    }
+  }
+
   _renderTextInput(): ?React.Element<any> {
     if (this.props.disableSearch) {
       return null;
@@ -67,32 +110,41 @@ class RNTesterExampleFilter extends React.Component<Props, State> {
       <RNTesterThemeContext.Consumer>
         {theme => {
           return (
-            <View
-              style={[
-                styles.searchRow,
-                {backgroundColor: theme.GroupedBackgroundColor},
-              ]}>
-              <TextInput
-                autoCapitalize="none"
-                autoCorrect={false}
-                clearButtonMode="always"
-                onChangeText={text => {
-                  this.setState(() => ({filter: text}));
-                }}
-                placeholder="Search..."
-                placeholderTextColor={theme.PlaceholderTextColor}
-                underlineColorAndroid="transparent"
-                style={[
-                  styles.searchTextInput,
-                  {
-                    color: theme.LabelColor,
-                    backgroundColor: theme.SecondaryGroupedBackgroundColor,
-                    borderColor: theme.QuaternaryLabelColor,
-                  },
-                ]}
-                testID={this.props.testID}
-                value={this.state.filter}
-              />
+            <View style={[styles.searchRow, {backgroundColor: '#F3F8FF'}]}>
+              <View style={styles.textInputStyle}>
+                <Image
+                  source={require('../assets/search-icon.png')}
+                  style={styles.searchIcon}
+                />
+                <TextInput
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                  clearButtonMode="always"
+                  onChangeText={text => {
+                    this.setState(() => ({filter: text}));
+                  }}
+                  placeholder="Search..."
+                  placeholderTextColor={theme.PlaceholderTextColor}
+                  underlineColorAndroid="transparent"
+                  style={[
+                    styles.searchTextInput,
+                    {
+                      color: theme.LabelColor,
+                      backgroundColor: theme.SecondaryGroupedBackgroundColor,
+                      borderColor: theme.QuaternaryLabelColor,
+                    },
+                  ]}
+                  testID={this.props.testID}
+                  value={this.state.filter}
+                />
+              </View>
+              {!this.props.hideFilterPills && (
+                <RNTesterListFilters
+                  onFilterButtonPress={filterLabel =>
+                    this.setState({category: filterLabel})
+                  }
+                />
+              )}
             </View>
           );
         }}
@@ -102,18 +154,36 @@ class RNTesterExampleFilter extends React.Component<Props, State> {
 }
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
   searchRow: {
-    padding: 10,
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    alignItems: 'center',
   },
   searchTextInput: {
-    borderRadius: 3,
+    borderRadius: 6,
     borderWidth: 1,
-    paddingLeft: 8,
     paddingVertical: 0,
     height: 35,
-  },
-  container: {
     flex: 1,
+    alignSelf: 'center',
+    paddingLeft: 35,
+  },
+  textInputStyle: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    position: 'relative',
+    right: 10,
+  },
+  searchIcon: {
+    width: 20,
+    height: 20,
+    position: 'relative',
+    top: 0,
+    left: 27,
+    zIndex: 2,
   },
 });
 
diff --git a/packages/rn-tester/js/components/RNTesterExampleList.js b/packages/rn-tester/js/components/RNTesterExampleList.js
index 0081c105e05bdb..456ffca9fdc5c0 100644
--- a/packages/rn-tester/js/components/RNTesterExampleList.js
+++ b/packages/rn-tester/js/components/RNTesterExampleList.js
@@ -9,9 +9,11 @@
  */
 
 'use strict';
+import type {RNTesterBookmark} from './RNTesterBookmark.js';
 
 const RNTesterActions = require('../utils/RNTesterActions');
 const RNTesterExampleFilter = require('./RNTesterExampleFilter');
+const RNTesterComponentTitle = require('./RNTesterComponentTitle');
 const React = require('react');
 
 const {
@@ -20,16 +22,21 @@ const {
   StyleSheet,
   Text,
   TouchableHighlight,
+  Image,
   View,
 } = require('react-native');
 
 import type {ViewStyleProp} from '../../../../Libraries/StyleSheet/StyleSheet';
 import type {RNTesterExample} from '../types/RNTesterTypes';
-
 import {RNTesterThemeContext} from './RNTesterTheme';
+import {RNTesterBookmarkContext} from './RNTesterBookmark';
 
 type Props = {
+  screen: string,
   onNavigate: Function,
+  updateRecentlyViewedList: Function,
+  recentApis: Array<RNTesterExample>,
+  recentComponents: Array<RNTesterExample>,
   list: {
     ComponentExamples: Array<RNTesterExample>,
     APIExamples: Array<RNTesterExample>,
@@ -39,15 +46,68 @@ type Props = {
   ...
 };
 
-class RowComponent extends React.PureComponent<{
+type State = {
+  components: Array<RNTesterExample>,
+  api: Array<RNTesterExample>,
+  recentComponents: Array<RNTesterExample>,
+  recentApis: Array<RNTesterExample>,
+  updateRecentlyViewedList: Function,
+};
+
+type ButtonState = {active: boolean, key: string, ...};
+type ButtonProps = {
   item: Object,
+  section: Object,
+  active: boolean,
   onNavigate: Function,
   onPress?: Function,
   onShowUnderlay?: Function,
   onHideUnderlay?: Function,
+  updateRecentlyViewedList: Function,
   ...
-}> {
+};
+
+class RowComponent extends React.PureComponent<ButtonProps, ButtonState> {
+  static contextType = RNTesterBookmarkContext;
+
+  constructor(props: ButtonProps) {
+    super(props);
+    this.state = {
+      active: props.active,
+      title: props.item.module.title,
+      key: props.section.key,
+    };
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.active !== prevState.active) {
+      return {active: nextProps.active};
+    }
+    return null;
+  }
+
+  onButtonPress = () => {
+    let bookmark = this.context;
+    if (!this.state.active) {
+      if (this.state.key === 'APIS' || this.state.key === 'RECENT_APIS') {
+        bookmark.AddApi(this.props.item.module.title, this.props.item);
+      } else {
+        bookmark.AddComponent(this.props.item.module.title, this.props.item);
+      }
+    } else {
+      if (this.state.key === 'APIS' || this.state.key === 'RECENT_APIS') {
+        bookmark.RemoveApi(this.props.item.module.title);
+      } else {
+        bookmark.RemoveComponent(this.props.item.module.title);
+      }
+    }
+    this.setState({
+      active: !this.state.active,
+    });
+  };
+
   _onPress = () => {
+    this.props.updateRecentlyViewedList();
     if (this.props.onPress) {
       this.props.onPress();
       return;
@@ -56,6 +116,9 @@ class RowComponent extends React.PureComponent<{
   };
   render() {
     const {item} = this.props;
+    const platform = item.module.platform;
+    const onIos = !platform || platform === 'ios';
+    const onAndroid = !platform || platform === 'android';
     return (
       <RNTesterThemeContext.Consumer>
         {theme => {
@@ -63,22 +126,62 @@ class RowComponent extends React.PureComponent<{
             <TouchableHighlight
               onShowUnderlay={this.props.onShowUnderlay}
               onHideUnderlay={this.props.onHideUnderlay}
+              accessibilityLabel={
+                item.module.title + ' ' + item.module.description
+              }
+              style={styles.listItem}
+              underlayColor={'rgb(242,242,242)'}
               onPress={this._onPress}>
               <View
                 style={[
                   styles.row,
                   {backgroundColor: theme.SystemBackgroundColor},
                 ]}>
-                <Text style={[styles.rowTitleText, {color: theme.LabelColor}]}>
-                  {item.module.title}
-                </Text>
+                <View style={styles.topRowStyle}>
+                  <RNTesterComponentTitle>
+                    {item.module.title}
+                  </RNTesterComponentTitle>
+                  <TouchableHighlight
+                    style={styles.imageViewStyle}
+                    onPress={() => this.onButtonPress()}>
+                    <Image
+                      style={styles.imageStyle}
+                      source={
+                        this.state.active
+                          ? require('../assets/bookmark-outline-blue.png')
+                          : require('../assets/bookmark-outline-gray.png')
+                      }
+                    />
+                  </TouchableHighlight>
+                </View>
                 <Text
                   style={[
                     styles.rowDetailText,
-                    {color: theme.SecondaryLabelColor},
+                    {color: theme.SecondaryLabelColor, marginBottom: 5},
                   ]}>
                   {item.module.description}
                 </Text>
+                <View style={styles.bottomRowStyle}>
+                  <Text style={{color: theme.SecondaryLabelColor, width: 65}}>
+                    {item.module.category || 'Other'}
+                  </Text>
+                  <View style={styles.platformLabelStyle}>
+                    <Text
+                      style={{
+                        color: onIos ? '#787878' : theme.SeparatorColor,
+                        fontWeight: onIos ? '500' : '300',
+                      }}>
+                      iOS
+                    </Text>
+                    <Text
+                      style={{
+                        color: onAndroid ? '#787878' : theme.SeparatorColor,
+                        fontWeight: onAndroid ? '500' : '300',
+                      }}>
+                      Android
+                    </Text>
+                  </View>
+                </View>
               </View>
             </TouchableHighlight>
           );
@@ -107,23 +210,117 @@ const renderSectionHeader = ({section}) => (
   </RNTesterThemeContext.Consumer>
 );
 
-class RNTesterExampleList extends React.Component<Props, $FlowFixMeState> {
+class RNTesterExampleList extends React.Component<Props, State> {
+  static contextType: React.Context<RNTesterBookmark> = RNTesterBookmarkContext;
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      components: props.list.ComponentExamples,
+      api: props.list.APIExamples,
+      recentComponents: props.recentComponents,
+      recentApis: props.recentApis,
+      updateRecentlyViewedList: (item, key) =>
+        props.updateRecentlyViewedList(item, key),
+    };
+  }
+
+  static getDerivedStateFromProps(nextProps: Props, prevState: State): State {
+    if (
+      nextProps.recentComponents.every(
+        (component, index) => component !== prevState.recentComponents[index],
+      ) &&
+      nextProps.recentApis.every(
+        (api, index) => api !== prevState.recentApis[index],
+      )
+    ) {
+      return {
+        ...prevState,
+        recentComponents: nextProps.recentComponents,
+        recentApis: nextProps.recentApis,
+      };
+    }
+    return prevState;
+  }
+
   render(): React.Node {
-    const filter = ({example, filterRegex}) =>
-      filterRegex.test(example.module.title) && !Platform.isTV;
-
-    const sections = [
-      {
-        data: this.props.list.ComponentExamples,
-        title: 'COMPONENTS',
-        key: 'c',
-      },
-      {
-        data: this.props.list.APIExamples,
-        title: 'APIS',
-        key: 'a',
-      },
-    ];
+    const bookmark = this.context;
+    const filter = ({example, filterRegex, category}) =>
+      filterRegex.test(example.module.title) &&
+      (!category || example.module.category === category) &&
+      (!Platform.isTV || example.supportsTVOS);
+
+    const {screen} = this.props;
+    let sections = [];
+
+    if (screen === 'component') {
+      if (this.state.recentComponents.length > 0) {
+        sections = [
+          {
+            data: this.state.recentComponents,
+            key: 'RECENT_COMPONENTS',
+            title: 'Recently viewed',
+          },
+          {
+            data: this.state.components,
+            key: 'COMPONENTS',
+            title: 'Components',
+          },
+        ];
+      } else {
+        sections = [
+          {
+            data: this.state.components,
+            key: 'COMPONENTS',
+            title: 'Components',
+          },
+        ];
+      }
+    } else if (screen === 'api') {
+      if (this.state.recentApis.length > 0) {
+        sections = [
+          {
+            data: this.state.recentApis,
+            key: 'RECENT_APIS',
+            title: 'Recently viewed',
+          },
+          {
+            data: this.state.api,
+            key: 'APIS',
+            title: 'APIS',
+          },
+        ];
+      } else {
+        sections = [
+          {
+            data: this.state.api,
+            key: 'APIS',
+            title: 'APIS',
+          },
+        ];
+      }
+    } else if (screen === 'bookmark') {
+      sections = [
+        {
+          data: Object.values(bookmark.Components),
+          title: 'COMPONENTS',
+          key: 'COMPONENTS',
+        },
+        {
+          data: Object.values(bookmark.Api),
+          title: 'APIS',
+          key: 'APIS',
+        },
+      ];
+    } else {
+      sections = [];
+    }
+
+    const isEmpty = sections.filter(s => s.data.length).length === 0;
+
+    if (isEmpty) {
+      return <EmptyState />;
+    }
 
     return (
       <RNTesterThemeContext.Consumer>
@@ -135,24 +332,23 @@ class RNTesterExampleList extends React.Component<Props, $FlowFixMeState> {
                 this.props.style,
                 {backgroundColor: theme.SecondaryGroupedBackgroundColor},
               ]}>
-              {this._renderTitleRow()}
               <RNTesterExampleFilter
                 testID="explorer_search"
+                page="components_page"
+                // $FlowFixMe
                 sections={sections}
                 filter={filter}
                 render={({filteredSections}) => (
                   <SectionList
-                    ItemSeparatorComponent={ItemSeparator}
-                    contentContainerStyle={{
-                      backgroundColor: theme.SeparatorColor,
-                    }}
-                    style={{backgroundColor: theme.SystemBackgroundColor}}
                     sections={filteredSections}
+                    extraData={filteredSections}
                     renderItem={this._renderItem}
+                    ItemSeparatorComponent={ItemSeparator}
                     keyboardShouldPersistTaps="handled"
                     automaticallyAdjustContentInsets={false}
                     keyboardDismissMode="on-drag"
                     renderSectionHeader={renderSectionHeader}
+                    ListFooterComponent={() => <View style={{height: 200}} />}
                   />
                 )}
               />
@@ -163,37 +359,22 @@ class RNTesterExampleList extends React.Component<Props, $FlowFixMeState> {
     );
   }
 
-  _renderItem = ({item, separators}) => (
-    <RowComponent
-      item={item}
-      onNavigate={this.props.onNavigate}
-      onShowUnderlay={separators.highlight}
-      onHideUnderlay={separators.unhighlight}
-    />
-  );
-
-  _renderTitleRow(): ?React.Element<any> {
-    /* $FlowFixMe(>=0.68.0 site=react_native_fb) This comment suppresses an
-     * error found when Flow v0.68 was deployed. To see the error delete this
-     * comment and run Flow. */
-    if (!this.props.displayTitleRow) {
-      return null;
-    }
+  _renderItem = ({item, section, separators, index}) => {
+    let bookmark = this.context;
     return (
       <RowComponent
-        item={{
-          module: {
-            title: 'RNTester',
-            description: 'React Native Examples',
-          },
-        }}
+        item={item}
+        section={section}
+        active={!bookmark.checkBookmark(item.module.title, section.key)}
         onNavigate={this.props.onNavigate}
-        onPress={() => {
-          this.props.onNavigate(RNTesterActions.ExampleList());
-        }}
+        onShowUnderlay={separators.highlight}
+        onHideUnderlay={separators.unhighlight}
+        updateRecentlyViewedList={() =>
+          this.state.updateRecentlyViewedList(item, section.key)
+        }
       />
     );
-  }
+  };
 
   _handleRowPress(exampleKey: string): void {
     this.props.onNavigate(RNTesterActions.ExampleAction(exampleKey));
@@ -219,10 +400,37 @@ const ItemSeparator = ({highlighted}) => (
   </RNTesterThemeContext.Consumer>
 );
 
+const EmptyState = () => (
+  <View style={styles.emptyContainer}>
+    <View style={styles.emptyContainerInner}>
+      <Image
+        source={require('../assets/empty.png')}
+        resizeMode="contain"
+        style={styles.emptyImage}
+      />
+      <View>
+        <Text style={styles.heading}>Bookmarks are empty</Text>
+        <Text style={styles.subheading}>
+          Please tap the{' '}
+          <Image
+            source={require('../assets/bookmark-outline-gray.png')}
+            resizeMode="contain"
+            style={styles.bookmarkIcon}
+          />{' '}
+          icon to bookmark examples.
+        </Text>
+      </View>
+    </View>
+  </View>
+);
+
 const styles = StyleSheet.create({
   listContainer: {
     flex: 1,
   },
+  listItem: {
+    backgroundColor: Platform.select({ios: '#FFFFFF', android: '#F3F8FF'}),
+  },
   sectionHeader: {
     padding: 5,
     fontWeight: '500',
@@ -231,23 +439,77 @@ const styles = StyleSheet.create({
   row: {
     justifyContent: 'center',
     paddingHorizontal: 15,
-    paddingVertical: 8,
+    paddingVertical: 12,
+    marginVertical: Platform.select({ios: 4, android: 8}),
+    marginHorizontal: 15,
+    overflow: 'hidden',
+    elevation: 5,
   },
   separator: {
-    height: StyleSheet.hairlineWidth,
-    marginLeft: 15,
+    height: Platform.select({ios: StyleSheet.hairlineWidth, android: 0}),
+    marginHorizontal: Platform.select({ios: 15, android: 0}),
   },
   separatorHighlighted: {
     height: StyleSheet.hairlineWidth,
   },
-  rowTitleText: {
-    fontSize: 17,
-    fontWeight: '500',
+  topRowStyle: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    flex: 1,
+  },
+  bottomRowStyle: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
   },
   rowDetailText: {
-    fontSize: 15,
+    fontSize: 12,
     lineHeight: 20,
   },
+  imageViewStyle: {
+    height: 30,
+    width: 30,
+    borderRadius: 15,
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+    bottom: 5,
+  },
+  imageStyle: {
+    height: 25,
+    width: 25,
+  },
+  platformLabelStyle: {
+    flexDirection: 'row',
+    width: 100,
+    justifyContent: 'space-between',
+  },
+  emptyContainer: {
+    flex: 1,
+    paddingHorizontal: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'white',
+  },
+  emptyContainerInner: {
+    marginTop: -150,
+  },
+  emptyImage: {
+    maxWidth: '100%',
+    height: 300,
+  },
+  heading: {
+    fontSize: 24,
+    textAlign: 'center',
+  },
+  subheading: {
+    fontSize: 16,
+    textAlign: 'center',
+  },
+  bookmarkIcon: {
+    width: 24,
+    height: 24,
+    transform: [{translateY: 4}],
+  },
 });
 
 module.exports = RNTesterExampleList;
diff --git a/packages/rn-tester/js/components/RNTesterListFilters.js b/packages/rn-tester/js/components/RNTesterListFilters.js
new file mode 100644
index 00000000000000..804f8298a56000
--- /dev/null
+++ b/packages/rn-tester/js/components/RNTesterListFilters.js
@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+const React = require('react');
+
+const {StyleSheet, Text, TouchableOpacity, View} = require('react-native');
+
+const filters = ['Basic', 'UI', 'ListView', 'iOS', 'Android'];
+
+type Props = {
+  onFilterButtonPress: (filter: string) => mixed, //optional only for testing
+  ...
+};
+
+class RNTesterListFilters extends React.Component<
+  Props,
+  {|currentFilter: string|},
+> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      currentFilter: '',
+    };
+  }
+
+  filterPressed: any = filterLabel => {
+    const newFilter =
+      this.state.currentFilter === filterLabel ? '' : filterLabel;
+    this.setState({
+      currentFilter: newFilter,
+    });
+    this.props.onFilterButtonPress(newFilter);
+  };
+
+  render(): React.Node {
+    return (
+      <View style={styles.container}>
+        {filters.map(filterLabel => {
+          return (
+            <TouchableOpacity
+              key={filterLabel}
+              style={[
+                styles.pillStyle,
+                {
+                  backgroundColor:
+                    this.state.currentFilter === filterLabel
+                      ? '#045cfc'
+                      : 'white',
+                },
+              ]}
+              onPress={() => this.filterPressed(filterLabel)}>
+              <Text
+                style={{
+                  color:
+                    this.state.currentFilter === filterLabel
+                      ? 'white'
+                      : '#045cfc',
+                }}>
+                {filterLabel}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  pillStyle: {
+    padding: 10,
+    marginHorizontal: 5,
+    marginVertical: 10,
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: '#045cfc',
+  },
+});
+
+module.exports = RNTesterListFilters;
diff --git a/packages/rn-tester/js/components/RNTesterNavbar.js b/packages/rn-tester/js/components/RNTesterNavbar.js
new file mode 100644
index 00000000000000..81cd701aa683cd
--- /dev/null
+++ b/packages/rn-tester/js/components/RNTesterNavbar.js
@@ -0,0 +1,194 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React from 'react';
+import {Text, View, StyleSheet, Image, Pressable} from 'react-native';
+
+import {RNTesterThemeContext} from './RNTesterTheme';
+const RNTesterActions = require('../utils/RNTesterActions');
+
+const RNTesterNavbar = ({onNavigate, screen}) => {
+  const theme = React.useContext(RNTesterThemeContext);
+
+  /** to be attached to navigation framework */
+  const isAPIActive = screen === 'api';
+  const isComponentActive = screen === 'component';
+  const isBookmarkActive = screen === 'bookmark';
+
+  return (
+    <View>
+      {/** Bottom Navbar code */}
+      {/** component and APIs tab  */}
+      <View style={styles.buttonContainer}>
+        {/** left tab with Components  */}
+        <Pressable
+          testID="components-tab"
+          onPress={() => onNavigate(RNTesterActions.OpenList('component'))}
+          style={[styles.navButton, {backgroundColor: theme.BackgroundColor}]}>
+          <View
+            style={[
+              styles.pressableContent,
+              isComponentActive ? styles.activeBar : null,
+            ]}
+            collapsable={false}>
+            <Image
+              style={styles.componentIcon}
+              source={
+                isComponentActive
+                  ? require('./../assets/bottom-nav-components-icon-active.png')
+                  : require('./../assets/bottom-nav-components-icon-inactive.png')
+              }
+            />
+            <Text
+              style={
+                isComponentActive ? styles.activeText : styles.inactiveText
+              }>
+              Components
+            </Text>
+          </View>
+        </Pressable>
+
+        {/** central tab with bookmark icon  */}
+        <View style={styles.centerBox}>
+          <Image
+            style={styles.centralBoxCutout}
+            source={require('./../assets/bottom-nav-center-box.png')}
+          />
+
+          {/** floating button in center  */}
+          <View style={styles.floatContainer}>
+            <Pressable
+              testID="bookmarks-tab"
+              onPress={() => {
+                onNavigate(RNTesterActions.OpenList('bookmark'));
+              }}>
+              <View
+                style={[
+                  styles.floatingButton,
+                  {backgroundColor: theme.BorderColor},
+                ]}>
+                <Image
+                  style={styles.bookmarkIcon}
+                  source={
+                    isBookmarkActive
+                      ? require('../assets/bottom-nav-bookmark-fill.png')
+                      : require('../assets/bottom-nav-bookmark-outline.png')
+                  }
+                />
+              </View>
+            </Pressable>
+          </View>
+        </View>
+
+        {/** right tab with Components  */}
+        <Pressable
+          testID="apis-tab"
+          onPress={() => {
+            onNavigate(RNTesterActions.OpenList('api'));
+          }}
+          style={[styles.navButton, {backgroundColor: theme.BackgroundColor}]}>
+          <View
+            style={[
+              styles.pressableContent,
+              isAPIActive ? styles.activeBar : null,
+            ]}
+            collapsable={false}>
+            <Image
+              style={styles.apiIcon}
+              source={
+                isAPIActive
+                  ? require('./../assets/bottom-nav-apis-icon-active.png')
+                  : require('./../assets/bottom-nav-apis-icon-inactive.png')
+              }
+            />
+            <Text style={isAPIActive ? styles.activeText : styles.inactiveText}>
+              APIs
+            </Text>
+          </View>
+        </Pressable>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  floatContainer: {
+    flex: 1,
+    zIndex: 2,
+    alignItems: 'center',
+  },
+  buttonContainer: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  floatingButton: {
+    top: -20,
+    width: 50,
+    height: 50,
+    borderRadius: 500,
+    alignContent: 'center',
+    shadowColor: 'black',
+    shadowOffset: {
+      height: 5,
+      width: 0,
+    },
+    shadowOpacity: 0.9,
+    shadowRadius: 10,
+    elevation: 5,
+  },
+  bookmarkIcon: {
+    width: 30,
+    height: 30,
+    margin: 10,
+  },
+  componentIcon: {
+    width: 20,
+    height: 20,
+    alignSelf: 'center',
+  },
+  apiIcon: {
+    width: 30,
+    height: 20,
+    alignSelf: 'center',
+  },
+  activeText: {
+    color: '#5E5F62',
+  },
+  inactiveText: {
+    color: '#B1B4BA',
+  },
+  centralBoxCutout: {
+    height: '100%',
+    width: '100%',
+    position: 'absolute',
+    top: 0,
+  },
+  centerBox: {
+    flex: 1,
+    height: 65,
+  },
+  navButton: {
+    flex: 1,
+    height: 65,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  pressableContent: {
+    flex: 1,
+    alignSelf: 'stretch',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  activeBar: {
+    borderTopWidth: 2,
+    borderColor: '#005DFF',
+  },
+});
+
+module.exports = RNTesterNavbar;
diff --git a/packages/rn-tester/js/components/RNTesterTheme.js b/packages/rn-tester/js/components/RNTesterTheme.js
index 5a1244ef36280c..5727f64da5ce80 100644
--- a/packages/rn-tester/js/components/RNTesterTheme.js
+++ b/packages/rn-tester/js/components/RNTesterTheme.js
@@ -35,6 +35,8 @@ export type RNTesterTheme = {
   LinkColor: ColorValue,
   SystemPurpleColor: ColorValue,
   ToolbarColor: ColorValue,
+  BackgroundColor: ColorValue,
+  BorderColor: ColorValue,
   ...
 };
 
@@ -59,6 +61,8 @@ export const RNTesterLightTheme = {
   LinkColor: '#007affff',
   SystemPurpleColor: '#af52deff',
   ToolbarColor: '#e9eaedff',
+  BackgroundColor: '#f3f8ffff',
+  BorderColor: '#005dffff',
 };
 
 export const RNTesterDarkTheme = {
@@ -82,6 +86,8 @@ export const RNTesterDarkTheme = {
   LinkColor: '#0984ffff',
   SystemPurpleColor: '#bf5af2ff',
   ToolbarColor: '#3c3c43ff',
+  BackgroundColor: '#0c0700ff',
+  BorderColor: '#005dffff',
 };
 
 export const themes = {light: RNTesterLightTheme, dark: RNTesterDarkTheme};
diff --git a/packages/rn-tester/js/components/TextLegend.js b/packages/rn-tester/js/components/TextLegend.js
index dd4a1be526132e..2f513038390857 100644
--- a/packages/rn-tester/js/components/TextLegend.js
+++ b/packages/rn-tester/js/components/TextLegend.js
@@ -12,7 +12,8 @@
 
 const React = require('react');
 
-const {Picker, Text, View} = require('react-native');
+const {Text, View} = require('react-native');
+import {Picker} from 'react-native';
 
 class TextLegend extends React.Component<*, *> {
   state: {|
diff --git a/packages/rn-tester/js/components/UseCase.js b/packages/rn-tester/js/components/UseCase.js
new file mode 100644
index 00000000000000..f76b9a4882a3f7
--- /dev/null
+++ b/packages/rn-tester/js/components/UseCase.js
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+import * as React from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+
+type Props = $ReadOnly<{|
+  children?: React.Node,
+  title?: ?string,
+  note?: ?string,
+  ios?: ?boolean,
+  android?: ?boolean,
+|}>;
+
+export default function UseCase(props: Props): React.Node {
+  const children = React.Children.toArray(props.children).filter(
+    child => child !== ' ',
+  );
+  return (
+    <View style={styles.container}>
+      <Text>{props.title}</Text>
+      <Text>{props.note}</Text>
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
index 38fa2b3cdb2409..f9e8e6c12e5089 100644
--- a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
+++ b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
@@ -751,6 +751,7 @@ class AnnounceForAccessibility extends React.Component<{}> {
 }
 
 exports.title = 'Accessibility';
+exports.documentationURL = 'https://reactnative.dev/docs/accessibilityinfo';
 exports.description = 'Examples of using Accessibility APIs.';
 exports.examples = [
   {
diff --git a/packages/rn-tester/js/examples/ActionSheetIOS/ActionSheetIOSExample.js b/packages/rn-tester/js/examples/ActionSheetIOS/ActionSheetIOSExample.js
index c1130357829df5..786811a725d53f 100644
--- a/packages/rn-tester/js/examples/ActionSheetIOS/ActionSheetIOSExample.js
+++ b/packages/rn-tester/js/examples/ActionSheetIOS/ActionSheetIOSExample.js
@@ -295,6 +295,7 @@ const style = StyleSheet.create({
 });
 
 exports.title = 'ActionSheetIOS';
+exports.category = 'iOS';
 exports.description = "Interface to show iOS' action sheets";
 exports.examples = [
   {
diff --git a/packages/rn-tester/js/examples/ActivityIndicator/ActivityIndicatorExample.js b/packages/rn-tester/js/examples/ActivityIndicator/ActivityIndicatorExample.js
index 19f4f4df21fc13..793fac7bfa09ca 100644
--- a/packages/rn-tester/js/examples/ActivityIndicator/ActivityIndicatorExample.js
+++ b/packages/rn-tester/js/examples/ActivityIndicator/ActivityIndicatorExample.js
@@ -70,8 +70,10 @@ const styles = StyleSheet.create({
 });
 
 exports.displayName = (undefined: ?string);
+exports.category = 'UI';
 exports.framework = 'React';
-exports.title = '<ActivityIndicator>';
+exports.title = 'ActivityIndicator';
+exports.documentationURL = 'https://reactnative.dev/docs/activityindicator';
 exports.description = 'Animated loading indicators.';
 
 exports.examples = [
diff --git a/packages/rn-tester/js/examples/Alert/AlertExample.js b/packages/rn-tester/js/examples/Alert/AlertExample.js
index dfafd870cf324b..4ebb4708107d1f 100644
--- a/packages/rn-tester/js/examples/Alert/AlertExample.js
+++ b/packages/rn-tester/js/examples/Alert/AlertExample.js
@@ -135,6 +135,7 @@ const styles = StyleSheet.create({
 });
 
 exports.title = 'Alert';
+exports.category = 'UI';
 exports.description =
   'Alerts display a concise and informative message ' +
   'and prompt the user to make a decision.';
diff --git a/packages/rn-tester/js/examples/Animated/AnimatedExample.js b/packages/rn-tester/js/examples/Animated/AnimatedExample.js
index 76c546dc9e06b1..126d8317e8d111 100644
--- a/packages/rn-tester/js/examples/Animated/AnimatedExample.js
+++ b/packages/rn-tester/js/examples/Animated/AnimatedExample.js
@@ -33,6 +33,8 @@ const styles = StyleSheet.create({
 
 exports.framework = 'React';
 exports.title = 'Animated - Examples';
+exports.category = 'UI';
+exports.documentationURL = 'https://reactnative.dev/docs/animated';
 exports.description = ('Animated provides a powerful ' +
   'and easy-to-use API for building modern, ' +
   'interactive user experiences.': string);
diff --git a/packages/rn-tester/js/examples/AppState/AppStateExample.js b/packages/rn-tester/js/examples/AppState/AppStateExample.js
index 9e7f17eefc1201..54d83415780212 100644
--- a/packages/rn-tester/js/examples/AppState/AppStateExample.js
+++ b/packages/rn-tester/js/examples/AppState/AppStateExample.js
@@ -71,6 +71,8 @@ class AppStateSubscription extends React.Component<
 }
 
 exports.title = 'AppState';
+exports.category = 'Basic';
+exports.documentationURL = 'https://reactnative.dev/docs/appstate';
 exports.description = 'app background status';
 exports.examples = [
   {
diff --git a/packages/rn-tester/js/examples/Appearance/AppearanceExample.js b/packages/rn-tester/js/examples/Appearance/AppearanceExample.js
index 741c265d3c744f..f4e23a6871e3c2 100644
--- a/packages/rn-tester/js/examples/Appearance/AppearanceExample.js
+++ b/packages/rn-tester/js/examples/Appearance/AppearanceExample.js
@@ -77,6 +77,8 @@ const ThemedText = props => (
 );
 
 exports.title = 'Appearance';
+exports.category = 'UI';
+exports.documentationURL = 'https://reactnative.dev/docs/appearance';
 exports.description = 'Light and dark user interface examples.';
 exports.examples = [
   {
diff --git a/packages/rn-tester/js/examples/AsyncStorage/AsyncStorageExample.js b/packages/rn-tester/js/examples/AsyncStorage/AsyncStorageExample.js
deleted file mode 100644
index cbbb13acdbd72e..00000000000000
--- a/packages/rn-tester/js/examples/AsyncStorage/AsyncStorageExample.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * @flow
- */
-
-'use strict';
-
-const React = require('react');
-const {AsyncStorage, PickerIOS, Text, View} = require('react-native');
-const PickerItemIOS = PickerIOS.Item;
-
-const STORAGE_KEY = '@AsyncStorageExample:key';
-const COLORS = ['red', 'orange', 'yellow', 'green', 'blue'];
-
-class BasicStorageExample extends React.Component<{...}, $FlowFixMeState> {
-  state = {
-    selectedValue: COLORS[0],
-    messages: [],
-  };
-
-  componentDidMount() {
-    this._loadInitialState().done();
-  }
-
-  _loadInitialState = async () => {
-    try {
-      const value = await AsyncStorage.getItem(STORAGE_KEY);
-      if (value !== null) {
-        this.setState({selectedValue: value});
-        this._appendMessage('Recovered selection from disk: ' + value);
-      } else {
-        this._appendMessage('Initialized with no selection on disk.');
-      }
-    } catch (error) {
-      this._appendMessage('AsyncStorage error: ' + error.message);
-    }
-  };
-
-  render() {
-    const color = this.state.selectedValue;
-    return (
-      <View>
-        <PickerIOS selectedValue={color} onValueChange={this._onValueChange}>
-          {COLORS.map(value => (
-            <PickerItemIOS key={value} value={value} label={value} />
-          ))}
-        </PickerIOS>
-        <Text>
-          {'Selected: '}
-          <Text style={{color}}>{this.state.selectedValue}</Text>
-        </Text>
-        <Text />
-        <Text onPress={this._removeStorage}>
-          Press here to remove from storage.
-        </Text>
-        <Text />
-        <Text>Messages:</Text>
-        {this.state.messages.map(m => (
-          <Text key={m}>{m}</Text>
-        ))}
-      </View>
-    );
-  }
-
-  _onValueChange = async selectedValue => {
-    this.setState({selectedValue});
-    try {
-      await AsyncStorage.setItem(STORAGE_KEY, selectedValue);
-      this._appendMessage('Saved selection to disk: ' + selectedValue);
-    } catch (error) {
-      this._appendMessage('AsyncStorage error: ' + error.message);
-    }
-  };
-
-  _removeStorage = async () => {
-    try {
-      await AsyncStorage.removeItem(STORAGE_KEY);
-      this._appendMessage('Selection removed from disk.');
-    } catch (error) {
-      this._appendMessage('AsyncStorage error: ' + error.message);
-    }
-  };
-
-  _appendMessage = message => {
-    this.setState({messages: this.state.messages.concat(message)});
-  };
-}
-
-exports.title = 'AsyncStorage';
-exports.description = 'Asynchronous local disk storage.';
-exports.examples = [
-  {
-    title: 'Basics - getItem, setItem, removeItem',
-    render(): React.Element<any> {
-      return <BasicStorageExample />;
-    },
-  },
-];
diff --git a/packages/rn-tester/js/examples/Border/BorderExample.js b/packages/rn-tester/js/examples/Border/BorderExample.js
index f43016ef60ed45..dbcb00b702841c 100644
--- a/packages/rn-tester/js/examples/Border/BorderExample.js
+++ b/packages/rn-tester/js/examples/Border/BorderExample.js
@@ -175,6 +175,7 @@ const styles = StyleSheet.create({
 });
 
 exports.title = 'Border';
+exports.category = 'UI';
 exports.description =
   'Demonstrates some of the border styles available to Views.';
 exports.examples = [
diff --git a/packages/rn-tester/js/examples/BoxShadow/BoxShadowExample.js b/packages/rn-tester/js/examples/BoxShadow/BoxShadowExample.js
index 429fb0873c504c..999ab089c5d82b 100644
--- a/packages/rn-tester/js/examples/BoxShadow/BoxShadowExample.js
+++ b/packages/rn-tester/js/examples/BoxShadow/BoxShadowExample.js
@@ -72,6 +72,7 @@ const styles = StyleSheet.create({
 });
 
 exports.title = 'Box Shadow';
+exports.category = 'UI';
 exports.description =
   'Demonstrates some of the shadow styles available to Views.';
 exports.examples = [
diff --git a/packages/rn-tester/js/examples/Button/ButtonExample.js b/packages/rn-tester/js/examples/Button/ButtonExample.js
index 981cdee0c56c17..00e8110f6dc2fe 100644
--- a/packages/rn-tester/js/examples/Button/ButtonExample.js
+++ b/packages/rn-tester/js/examples/Button/ButtonExample.js
@@ -21,7 +21,9 @@ function onButtonPress(buttonName) {
 
 exports.displayName = 'ButtonExample';
 exports.framework = 'React';
-exports.title = '<Button>';
+exports.category = 'UI';
+exports.title = 'Button';
+exports.documentationURL = 'https://reactnative.dev/docs/button';
 exports.description = 'Simple React Native button component.';
 
 exports.examples = [
diff --git a/packages/rn-tester/js/examples/Clipboard/ClipboardExample.js b/packages/rn-tester/js/examples/Clipboard/ClipboardExample.js
deleted file mode 100644
index 791f3d7eb5e671..00000000000000
--- a/packages/rn-tester/js/examples/Clipboard/ClipboardExample.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * @flow strict-local
- */
-
-'use strict';
-
-const React = require('react');
-
-const {Clipboard, View, Text, StyleSheet} = require('react-native');
-
-type Props = $ReadOnly<{||}>;
-type State = {|
-  content: string,
-|};
-
-class ClipboardExample extends React.Component<Props, State> {
-  state = {
-    content: 'Content will appear here',
-  };
-
-  _setClipboardContent = async () => {
-    Clipboard.setString('Hello World');
-    try {
-      const content = await Clipboard.getString();
-      this.setState({content});
-    } catch (e) {
-      this.setState({content: e.message});
-    }
-  };
-
-  render() {
-    return (
-      <View>
-        <Text onPress={this._setClipboardContent} style={styles.label}>
-          Tap to put "Hello World" in the clipboard
-        </Text>
-        <Text style={styles.content}>{this.state.content}</Text>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  label: {
-    color: 'blue',
-  },
-  content: {
-    color: 'red',
-    marginTop: 20,
-  },
-});
-
-exports.title = 'Clipboard';
-exports.description = 'Show Clipboard contents.';
-exports.examples = [
-  {
-    title: 'Clipboard.setString() and getString()',
-    render(): React.Node {
-      return <ClipboardExample />;
-    },
-  },
-];
diff --git a/packages/rn-tester/js/examples/Crash/CrashExample.js b/packages/rn-tester/js/examples/Crash/CrashExample.js
index 1232137de3e646..5d45b571510f43 100644
--- a/packages/rn-tester/js/examples/Crash/CrashExample.js
+++ b/packages/rn-tester/js/examples/Crash/CrashExample.js
@@ -18,6 +18,7 @@ const {CrashyCrash} = NativeModules;
 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
 exports.title = 'Crash';
+exports.category = 'Basic';
 exports.description = 'Crash examples.';
 
 exports.examples = [
diff --git a/packages/rn-tester/js/examples/DatePicker/DatePickerAndroidExample.js b/packages/rn-tester/js/examples/DatePicker/DatePickerAndroidExample.js
deleted file mode 100644
index e52037f5aebcfa..00000000000000
--- a/packages/rn-tester/js/examples/DatePicker/DatePickerAndroidExample.js
+++ /dev/null
@@ -1,170 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- */
-
-'use strict';
-
-const React = require('react');
-const {
-  DatePickerAndroid,
-  StyleSheet,
-  Text,
-  TouchableWithoutFeedback,
-} = require('react-native');
-
-const RNTesterBlock = require('../../components/RNTesterBlock');
-const RNTesterPage = require('../../components/RNTesterPage');
-
-type Props = $ReadOnly<{||}>;
-type State = {|
-  presetDate: Date,
-  simpleDate: Date,
-  spinnerDate: Date,
-  calendarDate: Date,
-  defaultDate: Date,
-  allDate: Date,
-  simpleText: string,
-  spinnerText: string,
-  calendarText: string,
-  defaultText: string,
-  minText: string,
-  maxText: string,
-  presetText: string,
-  allText: string,
-|};
-
-class DatePickerAndroidExample extends React.Component<Props, State> {
-  state = {
-    presetDate: new Date(2020, 4, 5),
-    simpleDate: new Date(2020, 4, 5),
-    spinnerDate: new Date(2020, 4, 5),
-    calendarDate: new Date(2020, 4, 5),
-    defaultDate: new Date(2020, 4, 5),
-    allDate: new Date(2020, 4, 5),
-    simpleText: 'pick a date',
-    spinnerText: 'pick a date',
-    calendarText: 'pick a date',
-    defaultText: 'pick a date',
-    minText: 'pick a date, no earlier than today',
-    maxText: 'pick a date, no later than today',
-    presetText: 'pick a date, preset to 2020/5/5',
-    allText: 'pick a date between 2020/5/1 and 2020/5/10',
-  };
-
-  showPicker = async (stateKey, options) => {
-    try {
-      const newState = {};
-      const {action, year, month, day} = await DatePickerAndroid.open(options);
-      if (action === DatePickerAndroid.dismissedAction) {
-        newState[stateKey + 'Text'] = 'dismissed';
-      } else {
-        const date = new Date(year, month, day);
-        newState[stateKey + 'Text'] = date.toLocaleDateString();
-        newState[stateKey + 'Date'] = date;
-      }
-      this.setState(newState);
-    } catch ({code, message}) {
-      console.warn(`Error in example '${stateKey}': `, message);
-    }
-  };
-
-  render() {
-    return (
-      <RNTesterPage title="DatePickerAndroid">
-        <RNTesterBlock title="Simple date picker">
-          <TouchableWithoutFeedback
-            onPress={this.showPicker.bind(this, 'simple', {
-              date: this.state.simpleDate,
-            })}>
-            <Text style={styles.text}>{this.state.simpleText}</Text>
-          </TouchableWithoutFeedback>
-        </RNTesterBlock>
-        <RNTesterBlock title="Simple spinner date picker">
-          <TouchableWithoutFeedback
-            onPress={this.showPicker.bind(this, 'spinner', {
-              date: this.state.spinnerDate,
-              mode: 'spinner',
-            })}>
-            <Text style={styles.text}>{this.state.spinnerText}</Text>
-          </TouchableWithoutFeedback>
-        </RNTesterBlock>
-        <RNTesterBlock title="Simple calendar date picker">
-          <TouchableWithoutFeedback
-            onPress={this.showPicker.bind(this, 'calendar', {
-              date: this.state.calendarDate,
-              mode: 'calendar',
-            })}>
-            <Text style={styles.text}>{this.state.calendarText}</Text>
-          </TouchableWithoutFeedback>
-        </RNTesterBlock>
-        <RNTesterBlock title="Simple default date picker">
-          <TouchableWithoutFeedback
-            onPress={this.showPicker.bind(this, 'default', {
-              date: this.state.defaultDate,
-              mode: 'default',
-            })}>
-            <Text style={styles.text}>{this.state.defaultText}</Text>
-          </TouchableWithoutFeedback>
-        </RNTesterBlock>
-        <RNTesterBlock title="Date picker with pre-set date">
-          <TouchableWithoutFeedback
-            onPress={this.showPicker.bind(this, 'preset', {
-              date: this.state.presetDate,
-            })}>
-            <Text style={styles.text}>{this.state.presetText}</Text>
-          </TouchableWithoutFeedback>
-        </RNTesterBlock>
-        <RNTesterBlock title="Date picker with minDate">
-          <TouchableWithoutFeedback
-            onPress={this.showPicker.bind(this, 'min', {
-              date: this.state.minDate,
-              minDate: new Date(),
-            })}>
-            <Text style={styles.text}>{this.state.minText}</Text>
-          </TouchableWithoutFeedback>
-        </RNTesterBlock>
-        <RNTesterBlock title="Date picker with maxDate">
-          <TouchableWithoutFeedback
-            onPress={this.showPicker.bind(this, 'max', {
-              date: this.state.maxDate,
-              maxDate: new Date(),
-            })}>
-            <Text style={styles.text}>{this.state.maxText}</Text>
-          </TouchableWithoutFeedback>
-        </RNTesterBlock>
-        <RNTesterBlock title="Date picker with all options">
-          <TouchableWithoutFeedback
-            onPress={this.showPicker.bind(this, 'all', {
-              date: this.state.allDate,
-              minDate: new Date(2020, 4, 1),
-              maxDate: new Date(2020, 4, 10),
-            })}>
-            <Text style={styles.text}>{this.state.allText}</Text>
-          </TouchableWithoutFeedback>
-        </RNTesterBlock>
-      </RNTesterPage>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  text: {
-    color: 'black',
-  },
-});
-
-exports.title = 'DatePickerAndroid';
-exports.description = 'Standard Android date picker dialog';
-exports.examples = [
-  {
-    title: 'Simple date picker',
-    render: function(): React.Element<typeof DatePickerAndroidExample> {
-      return <DatePickerAndroidExample />;
-    },
-  },
-];
diff --git a/packages/rn-tester/js/examples/DatePicker/DatePickerIOSExample.js b/packages/rn-tester/js/examples/DatePicker/DatePickerIOSExample.js
deleted file mode 100644
index 6aef85f215ff33..00000000000000
--- a/packages/rn-tester/js/examples/DatePicker/DatePickerIOSExample.js
+++ /dev/null
@@ -1,150 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * @flow
- */
-
-'use strict';
-
-const React = require('react');
-const {DatePickerIOS, StyleSheet, Text, View} = require('react-native');
-
-type State = {|
-  date: Date,
-|};
-
-type Props = {|
-  children: (State, (Date) => void) => React.Node,
-|};
-
-class WithDatePickerData extends React.Component<Props, State> {
-  state = {
-    date: new Date(),
-  };
-
-  onDateChange = date => {
-    this.setState({date: date});
-  };
-
-  render() {
-    return (
-      <View>
-        <WithLabel label="Value:">
-          <Text testID="date-indicator">
-            {this.state.date.toLocaleDateString()}
-          </Text>
-          <Text>&nbsp;</Text>
-          <Text testID="time-indicator">
-            {this.state.date.toLocaleTimeString([], {
-              hour: '2-digit',
-              minute: '2-digit',
-            })}
-          </Text>
-        </WithLabel>
-        {this.props.children(this.state, this.onDateChange)}
-      </View>
-    );
-  }
-}
-
-type LabelProps = {|
-  label: string,
-  children: React.Node,
-|};
-
-class WithLabel extends React.Component<LabelProps> {
-  render() {
-    return (
-      <View style={styles.labelContainer}>
-        <View style={styles.labelView}>
-          <Text style={styles.label}>{this.props.label}</Text>
-        </View>
-        {this.props.children}
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  textinput: {
-    height: 26,
-    width: 50,
-    borderWidth: 0.5,
-    borderColor: '#0f0f0f',
-    padding: 4,
-    fontSize: 13,
-  },
-  labelContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginVertical: 2,
-  },
-  labelView: {
-    marginRight: 10,
-    paddingVertical: 2,
-  },
-  label: {
-    fontWeight: '500',
-  },
-});
-
-exports.title = '<DatePickerIOS>';
-exports.description = 'Select dates and times using the native UIDatePicker.';
-exports.examples = [
-  {
-    title: 'Date and time picker',
-    render: function(): React.Element<any> {
-      return (
-        <WithDatePickerData>
-          {(state, onDateChange) => (
-            <DatePickerIOS
-              testID="date-and-time"
-              date={state.date}
-              mode="datetime"
-              onDateChange={onDateChange}
-            />
-          )}
-        </WithDatePickerData>
-      );
-    },
-  },
-  {
-    title: 'Date only picker',
-    render: function(): React.Element<any> {
-      return (
-        <WithDatePickerData>
-          {(state, onDateChange) => (
-            <DatePickerIOS
-              testID="date-only"
-              date={state.date}
-              mode="date"
-              onDateChange={onDateChange}
-            />
-          )}
-        </WithDatePickerData>
-      );
-    },
-  },
-  {
-    title: 'Time only picker, 20-minute interval',
-    render: function(): React.Element<any> {
-      return (
-        <WithDatePickerData>
-          {(state, onDateChange) => (
-            <DatePickerIOS
-              testID="time-with-interval"
-              date={state.date}
-              minuteInterval={20}
-              mode="time"
-              onDateChange={onDateChange}
-            />
-          )}
-        </WithDatePickerData>
-      );
-    },
-  },
-];
diff --git a/packages/rn-tester/js/examples/DevSettings/DevSettingsExample.js b/packages/rn-tester/js/examples/DevSettings/DevSettingsExample.js
index 4428c8fa0e52eb..9b8d267f946c70 100644
--- a/packages/rn-tester/js/examples/DevSettings/DevSettingsExample.js
+++ b/packages/rn-tester/js/examples/DevSettings/DevSettingsExample.js
@@ -14,6 +14,8 @@ import * as React from 'react';
 import {Alert, Button, DevSettings} from 'react-native';
 
 exports.title = 'DevSettings';
+exports.category = 'Basic';
+exports.documentationURL = 'https://reactnative.dev/docs/devsettings';
 exports.description = 'Customize the development settings';
 exports.examples = [
   {
diff --git a/packages/rn-tester/js/examples/Dimensions/DimensionsExample.js b/packages/rn-tester/js/examples/Dimensions/DimensionsExample.js
index b5d0e4fe630396..64167e6c2e5f6c 100644
--- a/packages/rn-tester/js/examples/Dimensions/DimensionsExample.js
+++ b/packages/rn-tester/js/examples/Dimensions/DimensionsExample.js
@@ -41,6 +41,8 @@ class DimensionsSubscription extends React.Component<
 }
 
 exports.title = 'Dimensions';
+exports.category = 'UI';
+exports.documentationURL = 'https://reactnative.dev/docs/dimensions';
 exports.description = 'Dimensions of the viewport';
 exports.examples = [
   {
diff --git a/packages/rn-tester/js/examples/FlatList/FlatListExample.js b/packages/rn-tester/js/examples/FlatList/FlatListExample.js
index dfa097b6c6bc24..b62e95fb3020eb 100644
--- a/packages/rn-tester/js/examples/FlatList/FlatListExample.js
+++ b/packages/rn-tester/js/examples/FlatList/FlatListExample.js
@@ -272,7 +272,9 @@ const styles = StyleSheet.create({
   },
 });
 
-exports.title = '<FlatList>';
+exports.title = 'FlatList';
+exports.category = 'ListView';
+exports.documentationURL = 'https://reactnative.dev/docs/flatlist';
 exports.description = 'Performant, scrollable list of data.';
 exports.simpleExampleContainer = true;
 exports.examples = [
diff --git a/packages/rn-tester/js/examples/Image/ImageExample.js b/packages/rn-tester/js/examples/Image/ImageExample.js
index 95a3e70e24d6b7..b0d665ed31c305 100644
--- a/packages/rn-tester/js/examples/Image/ImageExample.js
+++ b/packages/rn-tester/js/examples/Image/ImageExample.js
@@ -13,7 +13,6 @@
 const React = require('react');
 
 const {
-  ActivityIndicator,
   Image,
   StyleSheet,
   Text,
@@ -402,7 +401,8 @@ const styles = StyleSheet.create({
 
 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
-exports.title = '<Image>';
+exports.title = 'Image';
+exports.category = 'Basic';
 exports.description =
   'Base component for displaying different types of images.';
 
diff --git a/packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js b/packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js
index 80bddeb91735e5..76488422f9181b 100644
--- a/packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js
+++ b/packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js
@@ -108,7 +108,7 @@ const styles = StyleSheet.create({
   },
 });
 
-exports.title = '<InputAccessoryView>';
+exports.title = 'InputAccessoryView';
 exports.description =
   'Example showing how to use an InputAccessoryView to build an iMessage-like sticky text input';
 exports.examples = [
diff --git a/packages/rn-tester/js/examples/JSResponderHandlerExample/JSResponderHandlerExample.js b/packages/rn-tester/js/examples/JSResponderHandlerExample/JSResponderHandlerExample.js
index de7a78aaf782dc..cbfffbf266b800 100644
--- a/packages/rn-tester/js/examples/JSResponderHandlerExample/JSResponderHandlerExample.js
+++ b/packages/rn-tester/js/examples/JSResponderHandlerExample/JSResponderHandlerExample.js
@@ -18,7 +18,8 @@ import {PanResponder, ScrollView} from 'react-native';
 
 exports.displayName = 'JSResponderHandlerExample';
 exports.framework = 'React';
-exports.title = '<JSResponderHandler>';
+exports.title = 'JSResponderHandler';
+exports.category = 'Basic';
 exports.description = 'Simple example to test JSResponderHandler.';
 
 const _gesture = PanResponder.create({
diff --git a/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js b/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js
index da9ab113835dcb..35f9cb59cbdd55 100644
--- a/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js
+++ b/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js
@@ -107,7 +107,9 @@ const styles = StyleSheet.create({
   },
 });
 
-exports.title = '<KeyboardAvoidingView>';
+exports.title = 'KeyboardAvoidingView';
+exports.category = 'Basic';
+exports.documentationURL = 'https://reactnative.dev/docs/keyboardavoidingview';
 exports.description =
   'Base component for views that automatically adjust their height or position to move out of the way of the keyboard.';
 exports.examples = [
diff --git a/packages/rn-tester/js/examples/Layout/LayoutAnimationExample.js b/packages/rn-tester/js/examples/Layout/LayoutAnimationExample.js
index 62c883246457b8..a69a961214fbc3 100644
--- a/packages/rn-tester/js/examples/Layout/LayoutAnimationExample.js
+++ b/packages/rn-tester/js/examples/Layout/LayoutAnimationExample.js
@@ -345,6 +345,8 @@ const styles = StyleSheet.create({
 });
 
 exports.title = 'Layout Animation';
+exports.category = 'UI';
+exports.documentationURL = 'https://reactnative.dev/docs/layoutanimation';
 exports.description = 'Layout animation';
 exports.examples = [
   {
diff --git a/packages/rn-tester/js/examples/Layout/LayoutEventsExample.js b/packages/rn-tester/js/examples/Layout/LayoutEventsExample.js
index 3d299ae6a511fa..48c4cb5d718b13 100644
--- a/packages/rn-tester/js/examples/Layout/LayoutEventsExample.js
+++ b/packages/rn-tester/js/examples/Layout/LayoutEventsExample.js
@@ -153,6 +153,7 @@ const styles = StyleSheet.create({
 });
 
 exports.title = 'Layout Events';
+exports.category = 'UI';
 exports.description = ('Examples that show how Layout events can be used to ' +
   'measure view size and position.': string);
 exports.examples = [
diff --git a/packages/rn-tester/js/examples/Layout/LayoutExample.js b/packages/rn-tester/js/examples/Layout/LayoutExample.js
index 9c69038f30f76f..6d9caf64c5c48b 100644
--- a/packages/rn-tester/js/examples/Layout/LayoutExample.js
+++ b/packages/rn-tester/js/examples/Layout/LayoutExample.js
@@ -194,6 +194,7 @@ const styles = StyleSheet.create({
 });
 
 exports.title = 'Layout - Flexbox';
+exports.category = 'UI';
 exports.description = 'Examples of using the flexbox API to layout views.';
 exports.displayName = 'LayoutExample';
 exports.examples = [
diff --git a/packages/rn-tester/js/examples/Linking/LinkingExample.js b/packages/rn-tester/js/examples/Linking/LinkingExample.js
index df63aadce14ca7..02f883a644dbd4 100644
--- a/packages/rn-tester/js/examples/Linking/LinkingExample.js
+++ b/packages/rn-tester/js/examples/Linking/LinkingExample.js
@@ -117,6 +117,8 @@ const styles = StyleSheet.create({
 });
 
 exports.title = 'Linking';
+exports.category = 'Basic';
+exports.documentationURL = 'https://reactnative.dev/docs/linking';
 exports.description = 'Shows how to use Linking to open URLs.';
 exports.examples = [
   {
diff --git a/packages/rn-tester/js/examples/MaskedView/MaskedViewExample.js b/packages/rn-tester/js/examples/MaskedView/MaskedViewExample.js
deleted file mode 100644
index 7ad01c6e41cda1..00000000000000
--- a/packages/rn-tester/js/examples/MaskedView/MaskedViewExample.js
+++ /dev/null
@@ -1,236 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * @flow strict-local
- */
-
-'use strict';
-
-const React = require('react');
-
-const {
-  Animated,
-  Image,
-  MaskedViewIOS,
-  StyleSheet,
-  Text,
-  View,
-} = require('react-native');
-
-type Props = $ReadOnly<{||}>;
-type ChangingChildrenState = {|
-  alternateChildren: boolean,
-|};
-
-class AnimatedMaskExample extends React.Component<Props> {
-  _maskRotateAnimatedValue = new Animated.Value(0);
-  _maskScaleAnimatedValue = new Animated.Value(1);
-
-  componentDidMount() {
-    Animated.loop(
-      Animated.sequence([
-        Animated.timing(this._maskScaleAnimatedValue, {
-          toValue: 1.3,
-          duration: 750,
-          useNativeDriver: true,
-        }),
-        Animated.timing(this._maskScaleAnimatedValue, {
-          toValue: 1,
-          duration: 750,
-          useNativeDriver: true,
-        }),
-      ]),
-    ).start();
-
-    Animated.loop(
-      Animated.timing(this._maskRotateAnimatedValue, {
-        toValue: 360,
-        duration: 2000,
-        useNativeDriver: true,
-      }),
-    ).start();
-  }
-
-  render(): React.Node {
-    return (
-      <View style={styles.exampleWrapperStyle}>
-        <MaskedViewIOS
-          style={styles.flexStyle}
-          maskElement={
-            <Animated.View
-              style={[
-                styles.maskContainerStyle,
-                {transform: [{scale: this._maskScaleAnimatedValue}]},
-              ]}>
-              <Text style={styles.maskTextStyle}>Basic Mask</Text>
-            </Animated.View>
-          }>
-          <Animated.View
-            style={{
-              flex: 1,
-              transform: [
-                {
-                  rotate: this._maskRotateAnimatedValue.interpolate({
-                    inputRange: [0, 360],
-                    /* $FlowFixMe(>=0.38.0) - Flow error detected during the
-                     * deployment of v0.38.0. To see the error, remove this
-                     * comment and run flow */
-                    outputRange: ['0deg', '360deg'],
-                  }),
-                },
-              ],
-            }}>
-            <View style={styles.blueStyle} />
-            <View style={styles.redStyle} />
-          </Animated.View>
-        </MaskedViewIOS>
-      </View>
-    );
-  }
-}
-
-class ChangingChildrenMaskExample extends React.Component<
-  Props,
-  ChangingChildrenState,
-> {
-  state: ChangingChildrenState = {
-    alternateChildren: true,
-  };
-
-  componentDidMount() {
-    setInterval(() => {
-      this.setState(state => ({
-        alternateChildren: !state.alternateChildren,
-      }));
-    }, 1000);
-  }
-
-  render(): React.Node {
-    return (
-      <View style={styles.exampleWrapperStyle}>
-        <MaskedViewIOS
-          style={styles.flexStyle}
-          maskElement={
-            <View style={styles.maskContainerStyle}>
-              <Text style={styles.maskTextStyle}>Basic Mask</Text>
-            </View>
-          }>
-          {this.state.alternateChildren
-            ? [
-                <View key={1} style={styles.blueStyle} />,
-                <View key={2} style={styles.redStyle} />,
-              ]
-            : null}
-        </MaskedViewIOS>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  exampleWrapperStyle: {
-    width: 340,
-    height: 300,
-    alignSelf: 'center',
-  },
-  imageStyle: {
-    height: 200,
-    width: 200,
-  },
-  maskContainerStyle: {
-    flex: 1,
-    backgroundColor: 'transparent',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  maskTextStyle: {
-    backgroundColor: 'transparent',
-    fontSize: 40,
-    fontWeight: 'bold',
-  },
-  blueStyle: {
-    flex: 1,
-    backgroundColor: 'blue',
-  },
-  redStyle: {
-    flex: 1,
-    backgroundColor: 'red',
-  },
-  grayStyle: {
-    backgroundColor: '#eeeeee',
-  },
-  flexStyle: {
-    flex: 1,
-  },
-});
-
-exports.title = '<MaskedViewIOS>';
-exports.description =
-  'Renders the child view with a mask specified in the `renderMask` prop.';
-exports.examples = [
-  {
-    title: 'Basic Mask',
-    render: function(): React.Element<typeof View> {
-      return (
-        <View style={styles.exampleWrapperStyle}>
-          <MaskedViewIOS
-            style={styles.flexStyle}
-            maskElement={
-              <View style={styles.maskContainerStyle}>
-                <Text style={styles.maskTextStyle}>Basic Mask</Text>
-              </View>
-            }>
-            <View style={styles.blueStyle} />
-            <View style={styles.redStyle} />
-          </MaskedViewIOS>
-        </View>
-      );
-    },
-  },
-  {
-    title: 'Image Mask',
-    render: function(): React.Element<typeof View> {
-      return (
-        <View style={[styles.exampleWrapperStyle, styles.grayStyle]}>
-          <MaskedViewIOS
-            style={styles.flexStyle}
-            maskElement={
-              <View style={styles.maskContainerStyle}>
-                <Image
-                  style={styles.imageStyle}
-                  source={require('../../assets/imageMask.png')}
-                />
-              </View>
-            }>
-            <View style={styles.maskContainerStyle}>
-              <Image
-                resizeMode="cover"
-                style={styles.imageStyle}
-                source={{
-                  uri:
-                    'https://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif',
-                }}
-              />
-            </View>
-          </MaskedViewIOS>
-        </View>
-      );
-    },
-  },
-  {
-    title: 'Animated Mask',
-    render: function(): React.Element<typeof AnimatedMaskExample> {
-      return <AnimatedMaskExample />;
-    },
-  },
-  {
-    title: 'Mask w/ Changing Children',
-    render: function(): React.Element<typeof ChangingChildrenMaskExample> {
-      return <ChangingChildrenMaskExample />;
-    },
-  },
-];
diff --git a/packages/rn-tester/js/examples/Modal/ModalExample.js b/packages/rn-tester/js/examples/Modal/ModalExample.js
index d8418f496fe8c8..75dcc49b175ef6 100644
--- a/packages/rn-tester/js/examples/Modal/ModalExample.js
+++ b/packages/rn-tester/js/examples/Modal/ModalExample.js
@@ -27,7 +27,9 @@ const Item = Picker.Item;
 
 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
-exports.title = '<Modal>';
+exports.title = 'Modal';
+exports.category = 'UI';
+exports.documentationURL = 'https://reactnative.dev/docs/modal';
 exports.description = 'Component for presenting modal views.';
 
 class Button extends React.Component<$FlowFixMeProps, $FlowFixMeState> {
diff --git a/packages/rn-tester/js/examples/MultiColumn/MultiColumnExample.js b/packages/rn-tester/js/examples/MultiColumn/MultiColumnExample.js
index 29eecb93c6ed7c..ca822b22c07d01 100644
--- a/packages/rn-tester/js/examples/MultiColumn/MultiColumnExample.js
+++ b/packages/rn-tester/js/examples/MultiColumn/MultiColumnExample.js
@@ -177,7 +177,8 @@ const styles = StyleSheet.create({
   },
 });
 
-exports.title = '<FlatList> - MultiColumn';
+exports.title = 'FlatList - MultiColumn';
+exports.category = 'ListView';
 exports.description = 'Performant, scrollable grid of data.';
 exports.examples = [
   {
diff --git a/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js b/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js
index adcb40ff499457..7afe58e886bf4c 100644
--- a/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js
+++ b/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js
@@ -374,6 +374,7 @@ const styles = StyleSheet.create({
 
 exports.framework = 'React';
 exports.title = 'Native Animated Example';
+exports.category = 'UI';
 exports.description = 'Test out Native Animations';
 
 exports.examples = [
diff --git a/packages/rn-tester/js/examples/OrientationChange/OrientationChangeExample.js b/packages/rn-tester/js/examples/OrientationChange/OrientationChangeExample.js
index 9233b93aca0bec..1cf3d45e20f3d6 100644
--- a/packages/rn-tester/js/examples/OrientationChange/OrientationChangeExample.js
+++ b/packages/rn-tester/js/examples/OrientationChange/OrientationChangeExample.js
@@ -54,6 +54,7 @@ class OrientationChangeExample extends React.Component<{...}, $FlowFixMeState> {
 }
 
 exports.title = 'OrientationChangeExample';
+exports.category = 'Basic';
 exports.description = 'listening to orientation changes';
 exports.examples = [
   {
diff --git a/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js b/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js
index 00f966b585d944..33dcf037b430bc 100644
--- a/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js
+++ b/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js
@@ -141,6 +141,8 @@ const styles = StyleSheet.create({
 });
 
 exports.title = 'PanResponder Sample';
+exports.category = 'Basic';
+exports.documentationURL = 'https://reactnative.dev/docs/panresponder';
 exports.description =
   'Shows the Use of PanResponder to provide basic gesture handling';
 exports.simpleExampleContainer = true;
diff --git a/packages/rn-tester/js/examples/PermissionsAndroid/PermissionsExample.js b/packages/rn-tester/js/examples/PermissionsAndroid/PermissionsExample.js
index efa09b59c52eb3..d1585d97105e99 100644
--- a/packages/rn-tester/js/examples/PermissionsAndroid/PermissionsExample.js
+++ b/packages/rn-tester/js/examples/PermissionsAndroid/PermissionsExample.js
@@ -103,6 +103,7 @@ class PermissionsExample extends React.Component<{...}, $FlowFixMeState> {
 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
 exports.title = 'PermissionsAndroid';
+exports.category = 'Android';
 exports.description = 'Permissions example for API 23+.';
 exports.examples = [
   {
diff --git a/packages/rn-tester/js/examples/Picker/PickerExample.js b/packages/rn-tester/js/examples/Picker/PickerExample.js
deleted file mode 100644
index c4d1e2bfcf4902..00000000000000
--- a/packages/rn-tester/js/examples/Picker/PickerExample.js
+++ /dev/null
@@ -1,220 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * @flow strict-local
- */
-
-'use strict';
-
-const React = require('react');
-
-const {Picker, StyleSheet, Text} = require('react-native');
-
-const Item = Picker.Item;
-
-type State = {value: string | number, ...};
-
-class BasicPickerExample extends React.Component<{...}, State> {
-  state: State = {
-    value: 'key1',
-  };
-
-  render(): React.Node {
-    return (
-      <Picker
-        testID="basic-picker"
-        style={styles.picker}
-        selectedValue={this.state.value}
-        onValueChange={v => this.setState({value: v})}>
-        <Item label="hello" value="key0" />
-        <Item label="world" value="key1" />
-      </Picker>
-    );
-  }
-}
-
-class DisabledPickerExample extends React.Component<{...}, State> {
-  state: State = {
-    value: 'key1',
-  };
-
-  render(): React.Node {
-    return (
-      <Picker
-        style={styles.picker}
-        enabled={false}
-        selectedValue={this.state.value}>
-        <Item label="hello" value="key0" />
-        <Item label="world" value="key1" />
-      </Picker>
-    );
-  }
-}
-
-class DropdownPickerExample extends React.Component<{...}, State> {
-  state: State = {
-    value: 'key1',
-  };
-
-  render(): React.Node {
-    return (
-      <Picker
-        style={styles.picker}
-        selectedValue={this.state.value}
-        onValueChange={v => this.setState({value: v})}
-        mode="dropdown">
-        <Item label="hello" value="key0" />
-        <Item label="world" value="key1" />
-      </Picker>
-    );
-  }
-}
-
-class PromptPickerExample extends React.Component<{...}, State> {
-  state: State = {
-    value: 'key1',
-  };
-
-  render(): React.Node {
-    return (
-      <Picker
-        style={styles.picker}
-        selectedValue={this.state.value}
-        onValueChange={v => this.setState({value: v})}
-        prompt="Pick one, just one">
-        <Item label="hello" value="key0" />
-        <Item label="world" value="key1" />
-      </Picker>
-    );
-  }
-}
-
-type ColorState = {color: string | number, ...};
-
-class ColorPickerExample extends React.Component<{...}, ColorState> {
-  state: ColorState = {
-    color: 'red',
-  };
-
-  render(): React.Node {
-    return (
-      <>
-        <Picker
-          style={[styles.picker, {color: 'white', backgroundColor: '#333'}]}
-          selectedValue={this.state.color}
-          onValueChange={v => this.setState({color: v})}
-          mode="dropdown">
-          <Item label="red" color="red" value="red" />
-          <Item label="green" color="green" value="green" />
-          <Item label="blue" color="blue" value="blue" />
-        </Picker>
-        <Picker
-          style={styles.picker}
-          selectedValue={this.state.color}
-          onValueChange={v => this.setState({color: v})}
-          mode="dialog">
-          <Item label="red" color="red" value="red" />
-          <Item label="green" color="green" value="green" />
-          <Item label="blue" color="blue" value="blue" />
-        </Picker>
-      </>
-    );
-  }
-}
-class AccessibilityLabelPickerExample extends React.Component<{||}, State> {
-  state: State = {
-    value: '3',
-  };
-
-  render(): React.Node {
-    return (
-      <Picker
-        accessibilityLabel={this.state.value + 'Hours'}
-        style={styles.picker}
-        selectedValue={this.state.value}
-        onValueChange={v => this.setState({value: v})}>
-        <Item label="1" value="1" />
-        <Item label="2" value="2" />
-        <Item label="3" value="3" />
-      </Picker>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  picker: {
-    width: 100,
-  },
-});
-
-exports.title = '<Picker>';
-exports.description =
-  'Provides multiple options to choose from, using either a dropdown menu or a dialog.';
-exports.examples = [
-  {
-    title: 'Basic Picker',
-    render: function(): React.Element<typeof BasicPickerExample> {
-      return <BasicPickerExample />;
-    },
-  },
-  {
-    title: 'Disabled Picker',
-    render: function(): React.Element<typeof DisabledPickerExample> {
-      return <DisabledPickerExample />;
-    },
-  },
-  {
-    title: 'Dropdown Picker',
-    render: function(): React.Element<typeof DropdownPickerExample> {
-      return <DropdownPickerExample />;
-    },
-  },
-  {
-    title: 'Picker with prompt message',
-    render: function(): React.Element<typeof PromptPickerExample> {
-      return <PromptPickerExample />;
-    },
-  },
-  {
-    title: 'Accessibility Label pickers',
-    render: function(): React.Element<typeof AccessibilityLabelPickerExample> {
-      return <AccessibilityLabelPickerExample />;
-    },
-  },
-  {
-    title: 'Picker with no listener',
-    render: function(): React.Element<typeof PromptPickerExample> {
-      return (
-        /* $FlowFixMe(>=0.99.0 site=react_native_fb) This comment suppresses an
-         * error found when Flow v0.99 was deployed. To see the error, delete
-         * this comment and run Flow. */
-        <>
-          <Picker style={styles.picker}>
-            <Item label="hello" value="key0" />
-            <Item label="world" value="key1" />
-          </Picker>
-          <Text>
-            Cannot change the value of this picker because it doesn't update
-            selectedValue.
-          </Text>
-        </>
-      );
-    },
-  },
-  {
-    title: 'Colorful pickers',
-    render: function(): React.Element<typeof ColorPickerExample> {
-      return <ColorPickerExample />;
-    },
-  },
-  {
-    title: 'AccessibilityLabel pickers',
-    render: function(): React.Element<typeof AccessibilityLabelPickerExample> {
-      return <AccessibilityLabelPickerExample />;
-    },
-  },
-];
diff --git a/packages/rn-tester/js/examples/Picker/PickerIOSExample.js b/packages/rn-tester/js/examples/Picker/PickerIOSExample.js
deleted file mode 100644
index 6993c7ad743e11..00000000000000
--- a/packages/rn-tester/js/examples/Picker/PickerIOSExample.js
+++ /dev/null
@@ -1,190 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * @flow
- */
-
-'use strict';
-
-const React = require('react');
-const {PickerIOS, Text, View} = require('react-native');
-
-const PickerItemIOS = PickerIOS.Item;
-
-const CAR_MAKES_AND_MODELS = {
-  amc: {
-    name: 'AMC',
-    models: ['AMX', 'Concord', 'Eagle', 'Gremlin', 'Matador', 'Pacer'],
-  },
-  alfa: {
-    name: 'Alfa-Romeo',
-    models: [
-      '159',
-      '4C',
-      'Alfasud',
-      'Brera',
-      'GTV6',
-      'Giulia',
-      'MiTo',
-      'Spider',
-    ],
-  },
-  aston: {
-    name: 'Aston Martin',
-    models: ['DB5', 'DB9', 'DBS', 'Rapide', 'Vanquish', 'Vantage'],
-  },
-  audi: {
-    name: 'Audi',
-    models: [
-      '90',
-      '4000',
-      '5000',
-      'A3',
-      'A4',
-      'A5',
-      'A6',
-      'A7',
-      'A8',
-      'Q5',
-      'Q7',
-    ],
-  },
-  austin: {
-    name: 'Austin',
-    models: ['America', 'Maestro', 'Maxi', 'Mini', 'Montego', 'Princess'],
-  },
-  borgward: {
-    name: 'Borgward',
-    models: ['Hansa', 'Isabella', 'P100'],
-  },
-  buick: {
-    name: 'Buick',
-    models: [
-      'Electra',
-      'LaCrosse',
-      'LeSabre',
-      'Park Avenue',
-      'Regal',
-      'Roadmaster',
-      'Skylark',
-    ],
-  },
-  cadillac: {
-    name: 'Cadillac',
-    models: ['Catera', 'Cimarron', 'Eldorado', 'Fleetwood', 'Sedan de Ville'],
-  },
-  chevrolet: {
-    name: 'Chevrolet',
-    models: [
-      'Astro',
-      'Aveo',
-      'Bel Air',
-      'Captiva',
-      'Cavalier',
-      'Chevelle',
-      'Corvair',
-      'Corvette',
-      'Cruze',
-      'Nova',
-      'SS',
-      'Vega',
-      'Volt',
-    ],
-  },
-};
-
-class PickerExample extends React.Component<{...}, $FlowFixMeState> {
-  state = {
-    carMake: 'cadillac',
-    modelIndex: 3,
-  };
-
-  render() {
-    const make = CAR_MAKES_AND_MODELS[this.state.carMake];
-    const selectionString =
-      make.name + ' ' + make.models[this.state.modelIndex];
-    return (
-      <View>
-        <Text>Please choose a make for your car:</Text>
-        <PickerIOS
-          selectedValue={this.state.carMake}
-          onValueChange={carMake => this.setState({carMake, modelIndex: 0})}>
-          {Object.keys(CAR_MAKES_AND_MODELS).map(carMake => (
-            <PickerItemIOS
-              key={carMake}
-              value={carMake}
-              label={CAR_MAKES_AND_MODELS[carMake].name}
-            />
-          ))}
-        </PickerIOS>
-        <Text>Please choose a model of {make.name}:</Text>
-        <PickerIOS
-          selectedValue={this.state.modelIndex}
-          key={this.state.carMake}
-          onValueChange={modelIndex => this.setState({modelIndex})}>
-          {CAR_MAKES_AND_MODELS[this.state.carMake].models.map(
-            (modelName, modelIndex) => (
-              <PickerItemIOS
-                key={this.state.carMake + '_' + modelIndex}
-                value={modelIndex}
-                label={modelName}
-              />
-            ),
-          )}
-        </PickerIOS>
-        <Text>You selected: {selectionString}</Text>
-      </View>
-    );
-  }
-}
-
-class PickerStyleExample extends React.Component<{...}, $FlowFixMeState> {
-  state = {
-    carMake: 'cadillac',
-    modelIndex: 0,
-  };
-
-  render() {
-    return (
-      <PickerIOS
-        itemStyle={{
-          fontSize: 25,
-          color: 'red',
-          textAlign: 'left',
-          fontWeight: 'bold',
-        }}
-        selectedValue={this.state.carMake}
-        onValueChange={carMake => this.setState({carMake, modelIndex: 0})}>
-        {Object.keys(CAR_MAKES_AND_MODELS).map(carMake => (
-          <PickerItemIOS
-            key={carMake}
-            value={carMake}
-            label={CAR_MAKES_AND_MODELS[carMake].name}
-          />
-        ))}
-      </PickerIOS>
-    );
-  }
-}
-
-exports.displayName = (undefined: ?string);
-exports.title = '<PickerIOS>';
-exports.description = 'Render lists of selectable options with UIPickerView.';
-exports.examples = [
-  {
-    title: '<PickerIOS>',
-    render: function(): React.Element<any> {
-      return <PickerExample />;
-    },
-  },
-  {
-    title: '<PickerIOS> with custom styling',
-    render: function(): React.Element<any> {
-      return <PickerStyleExample />;
-    },
-  },
-];
diff --git a/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js b/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js
index a7fc2accbaa2cf..cda369e62e1e76 100644
--- a/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js
+++ b/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js
@@ -301,6 +301,8 @@ const styles = StyleSheet.create({
 });
 
 exports.title = 'PlatformColor';
+exports.category = 'Basic';
+exports.documentationURL = 'https://reactnative.dev/docs/platformcolor';
 exports.description =
   'Examples that show how PlatformColors may be used in an app.';
 exports.examples = [
diff --git a/packages/rn-tester/js/examples/PointerEvents/PointerEventsExample.js b/packages/rn-tester/js/examples/PointerEvents/PointerEventsExample.js
index fcca307e9eac05..569ae494ddda48 100644
--- a/packages/rn-tester/js/examples/PointerEvents/PointerEventsExample.js
+++ b/packages/rn-tester/js/examples/PointerEvents/PointerEventsExample.js
@@ -235,6 +235,7 @@ const styles = StyleSheet.create({
 
 exports.framework = 'React';
 exports.title = 'Pointer Events';
+exports.category = 'Basic';
 exports.description = ('Demonstrates the use of the pointerEvents prop of a ' +
   'View to control how touches should be handled.': string);
 exports.examples = (exampleClasses.map(infoToExample): Array<any>);
diff --git a/packages/rn-tester/js/examples/Pressable/PressableExample.js b/packages/rn-tester/js/examples/Pressable/PressableExample.js
index 9a67af10f6c4ed..f7a1e4dc33dd2c 100644
--- a/packages/rn-tester/js/examples/Pressable/PressableExample.js
+++ b/packages/rn-tester/js/examples/Pressable/PressableExample.js
@@ -316,7 +316,9 @@ const styles = StyleSheet.create({
 
 exports.displayName = (undefined: ?string);
 exports.description = 'Component for making views pressable.';
-exports.title = '<Pressable>';
+exports.title = 'Pressable';
+exports.category = 'UI';
+exports.documentationURL = 'https://reactnative.dev/docs/pressable';
 exports.examples = [
   {
     title: 'Change content based on Press',
diff --git a/packages/rn-tester/js/examples/ProgressBarAndroid/ProgressBarAndroidExample.android.js b/packages/rn-tester/js/examples/ProgressBarAndroid/ProgressBarAndroidExample.android.js
deleted file mode 100644
index ca78dea22c1022..00000000000000
--- a/packages/rn-tester/js/examples/ProgressBarAndroid/ProgressBarAndroidExample.android.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * @flow strict-local
- */
-
-'use strict';
-
-const RNTesterBlock = require('../../components/RNTesterBlock');
-const RNTesterPage = require('../../components/RNTesterPage');
-const React = require('react');
-
-const {ProgressBarAndroid: ProgressBar} = require('react-native');
-
-import type {ProgressBarAndroidProps} from '../../../../../Libraries/Components/ProgressBarAndroid/ProgressBarAndroid';
-
-type MovingBarProps = $ReadOnly<{|
-  ...$Diff<ProgressBarAndroidProps, {progress: ?number, ...}>,
-  indeterminate: false,
-|}>;
-
-type MovingBarState = {progress: number, ...};
-
-class MovingBar extends React.Component<MovingBarProps, MovingBarState> {
-  _intervalID: ?IntervalID = null;
-
-  state = {
-    progress: 0,
-  };
-
-  componentDidMount() {
-    this._intervalID = setInterval(() => {
-      const progress = (this.state.progress + 0.02) % 1;
-      this.setState({progress});
-    }, 50);
-  }
-
-  componentWillUnmount() {
-    if (this._intervalID != null) {
-      clearInterval(this._intervalID);
-    }
-  }
-
-  render() {
-    return <ProgressBar progress={this.state.progress} {...this.props} />;
-  }
-}
-
-class ProgressBarAndroidExample extends React.Component<{...}> {
-  render(): React.Node {
-    return (
-      <RNTesterPage title="ProgressBar Examples">
-        <RNTesterBlock title="Horizontal Indeterminate ProgressBar">
-          {/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
-           * found when making Flow check .android.js files. */}
-          <ProgressBar styleAttr="Horizontal" />
-        </RNTesterBlock>
-
-        <RNTesterBlock title="Horizontal ProgressBar">
-          <MovingBar styleAttr="Horizontal" indeterminate={false} />
-        </RNTesterBlock>
-
-        <RNTesterBlock title="Horizontal Black Indeterminate ProgressBar">
-          {/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
-           * found when making Flow check .android.js files. */}
-          <ProgressBar styleAttr="Horizontal" color="black" />
-        </RNTesterBlock>
-
-        <RNTesterBlock title="Horizontal Blue ProgressBar">
-          <MovingBar
-            styleAttr="Horizontal"
-            indeterminate={false}
-            color="blue"
-          />
-        </RNTesterBlock>
-      </RNTesterPage>
-    );
-  }
-}
-
-exports.title = '<ProgressBarAndroid>';
-exports.description = 'Horizontal bar to show the progress of some operation.';
-exports.examples = [
-  {
-    title: 'Simple progress bar',
-    render: function(): React.Element<typeof ProgressBarAndroidExample> {
-      return <ProgressBarAndroidExample />;
-    },
-  },
-];
diff --git a/packages/rn-tester/js/examples/ProgressViewIOS/ProgressViewIOSExample.js b/packages/rn-tester/js/examples/ProgressViewIOS/ProgressViewIOSExample.js
deleted file mode 100644
index 95d6885e1a753a..00000000000000
--- a/packages/rn-tester/js/examples/ProgressViewIOS/ProgressViewIOSExample.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * @flow strict-local
- */
-
-'use strict';
-
-const React = require('react');
-
-const {ProgressViewIOS, StyleSheet, View} = require('react-native');
-
-type Props = {||};
-type State = {|
-  progress: number,
-|};
-
-class ProgressViewExample extends React.Component<Props, State> {
-  _rafId: ?AnimationFrameID = null;
-
-  state = {
-    progress: 0,
-  };
-
-  componentDidMount() {
-    this.updateProgress();
-  }
-
-  componentWillUnmount() {
-    if (this._rafId != null) {
-      cancelAnimationFrame(this._rafId);
-    }
-  }
-
-  updateProgress = () => {
-    const progress = this.state.progress + 0.01;
-    this.setState({progress});
-    this._rafId = requestAnimationFrame(() => this.updateProgress());
-  };
-
-  getProgress = offset => {
-    const progress = this.state.progress + offset;
-    return Math.sin(progress % Math.PI) % 1;
-  };
-
-  render() {
-    return (
-      <View style={styles.container}>
-        <ProgressViewIOS
-          style={styles.progressView}
-          progress={this.getProgress(0)}
-        />
-        <ProgressViewIOS
-          style={styles.progressView}
-          progressTintColor="purple"
-          progress={this.getProgress(0.2)}
-        />
-        <ProgressViewIOS
-          style={styles.progressView}
-          progressTintColor="red"
-          progress={this.getProgress(0.4)}
-        />
-        <ProgressViewIOS
-          style={styles.progressView}
-          progressTintColor="orange"
-          progress={this.getProgress(0.6)}
-        />
-        <ProgressViewIOS
-          style={styles.progressView}
-          progressTintColor="yellow"
-          progress={this.getProgress(0.8)}
-        />
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    marginTop: -20,
-    backgroundColor: 'transparent',
-  },
-  progressView: {
-    marginTop: 20,
-  },
-});
-
-exports.displayName = (undefined: ?string);
-exports.framework = 'React';
-exports.title = 'ProgressViewIOS';
-exports.description = 'ProgressViewIOS';
-exports.examples = [
-  {
-    title: 'ProgressViewIOS',
-    render(): React.Node {
-      return <ProgressViewExample />;
-    },
-  },
-];
diff --git a/packages/rn-tester/js/examples/PushNotificationIOS/PushNotificationIOSExample.js b/packages/rn-tester/js/examples/PushNotificationIOS/PushNotificationIOSExample.js
deleted file mode 100644
index c32bacefef2cc8..00000000000000
--- a/packages/rn-tester/js/examples/PushNotificationIOS/PushNotificationIOSExample.js
+++ /dev/null
@@ -1,267 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * @flow
- */
-
-'use strict';
-
-const React = require('react');
-const {
-  Alert,
-  DeviceEventEmitter,
-  PushNotificationIOS,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-  View,
-} = require('react-native');
-
-class Button extends React.Component<$FlowFixMeProps> {
-  render() {
-    return (
-      <TouchableHighlight
-        underlayColor={'white'}
-        style={styles.button}
-        onPress={this.props.onPress}>
-        <Text style={styles.buttonLabel}>{this.props.label}</Text>
-      </TouchableHighlight>
-    );
-  }
-}
-
-class NotificationExample extends React.Component<{...}> {
-  UNSAFE_componentWillMount() {
-    PushNotificationIOS.addEventListener('register', this._onRegistered);
-    PushNotificationIOS.addEventListener(
-      'registrationError',
-      this._onRegistrationError,
-    );
-    PushNotificationIOS.addEventListener(
-      'notification',
-      this._onRemoteNotification,
-    );
-    PushNotificationIOS.addEventListener(
-      'localNotification',
-      this._onLocalNotification,
-    );
-  }
-
-  componentWillUnmount() {
-    PushNotificationIOS.removeEventListener('register', this._onRegistered);
-    PushNotificationIOS.removeEventListener(
-      'registrationError',
-      this._onRegistrationError,
-    );
-    PushNotificationIOS.removeEventListener(
-      'notification',
-      this._onRemoteNotification,
-    );
-    PushNotificationIOS.removeEventListener(
-      'localNotification',
-      this._onLocalNotification,
-    );
-  }
-
-  render() {
-    return (
-      <View>
-        <Button
-          onPress={this._sendNotification}
-          label="Send fake notification"
-        />
-
-        <Button
-          onPress={this._sendLocalNotification}
-          label="Send fake local notification"
-        />
-      </View>
-    );
-  }
-
-  _sendNotification() {
-    DeviceEventEmitter.emit('remoteNotificationReceived', {
-      remote: true,
-      aps: {
-        alert: 'Sample notification',
-        badge: '+1',
-        sound: 'default',
-        category: 'REACT_NATIVE',
-        'content-available': 1,
-      },
-    });
-  }
-
-  _sendLocalNotification() {
-    DeviceEventEmitter.emit('localNotificationReceived', {
-      aps: {
-        alert: 'Sample local notification',
-        badge: '+1',
-        sound: 'default',
-        category: 'REACT_NATIVE',
-      },
-    });
-  }
-
-  _onRegistered(deviceToken) {
-    Alert.alert('Registered For Remote Push', `Device Token: ${deviceToken}`, [
-      {
-        text: 'Dismiss',
-        onPress: null,
-      },
-    ]);
-  }
-
-  _onRegistrationError(error) {
-    Alert.alert(
-      'Failed To Register For Remote Push',
-      `Error (${error.code}): ${error.message}`,
-      [
-        {
-          text: 'Dismiss',
-          onPress: null,
-        },
-      ],
-    );
-  }
-
-  _onRemoteNotification(notification) {
-    const result = `Message: ${notification.getMessage()};\n
-      badge: ${notification.getBadgeCount()};\n
-      sound: ${notification.getSound()};\n
-      category: ${notification.getCategory()};\n
-      content-available: ${notification.getContentAvailable()}.`;
-
-    Alert.alert('Push Notification Received', result, [
-      {
-        text: 'Dismiss',
-        onPress: null,
-      },
-    ]);
-  }
-
-  _onLocalNotification(notification) {
-    Alert.alert(
-      'Local Notification Received',
-      'Alert message: ' + notification.getMessage(),
-      [
-        {
-          text: 'Dismiss',
-          onPress: null,
-        },
-      ],
-    );
-  }
-}
-
-class NotificationPermissionExample extends React.Component<
-  $FlowFixMeProps,
-  any,
-> {
-  constructor(props) {
-    super(props);
-    this.state = {permissions: null};
-  }
-
-  render() {
-    return (
-      <View>
-        <Button
-          onPress={this._requestPermissions}
-          label="Request Notifications (Should Display Alert)"
-        />
-        <Button onPress={this._checkPermissions} label="Check permissions" />
-        <Text style={{textAlign: 'center'}}>
-          {JSON.stringify(this.state.permissions)}
-        </Text>
-      </View>
-    );
-  }
-
-  _requestPermissions = () => {
-    PushNotificationIOS.requestPermissions().then(
-      onFulfill => {
-        this._showAlert(
-          'Successfully requested permissions -- ' +
-            'Alert: ' +
-            onFulfill.alert.toString() +
-            ', Badge: ' +
-            onFulfill.badge.toString() +
-            ', Sound: ' +
-            onFulfill.sound.toString(),
-        );
-        this._checkPermissions();
-      },
-      () => {
-        this._showAlert('Error requesting permissions');
-        this._checkPermissions();
-      },
-    );
-  };
-
-  _checkPermissions = () => {
-    PushNotificationIOS.checkPermissions(permissions => {
-      this.setState({permissions});
-    });
-  };
-
-  _showAlert(text) {
-    Alert.alert('Notification Permission', text, [
-      {
-        text: 'Dismiss',
-        onPress: null,
-      },
-    ]);
-  }
-}
-
-const styles = StyleSheet.create({
-  button: {
-    padding: 10,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  buttonLabel: {
-    color: 'blue',
-  },
-});
-
-exports.title = 'PushNotificationIOS';
-exports.description = 'Apple PushNotification and badge value';
-exports.examples = [
-  {
-    title: 'Notifications Permissions',
-    render(): React.Element<any> {
-      return <NotificationPermissionExample />;
-    },
-  },
-  {
-    title: 'Push Notifications',
-    render(): React.Element<any> {
-      return <NotificationExample />;
-    },
-  },
-  {
-    title: 'Badge Number',
-    render(): React.Element<any> {
-      return (
-        <View>
-          <Button
-            onPress={() =>
-              PushNotificationIOS.setApplicationIconBadgeNumber(42)
-            }
-            label="Set app's icon badge to 42"
-          />
-          <Button
-            onPress={() => PushNotificationIOS.setApplicationIconBadgeNumber(0)}
-            label="Clear app's icon badge"
-          />
-        </View>
-      );
-    },
-  },
-];
diff --git a/packages/rn-tester/js/examples/RCTRootView/RCTRootViewIOSExample.js b/packages/rn-tester/js/examples/RCTRootView/RCTRootViewIOSExample.js
index 0ed34bcac5d8ef..180c56844bd729 100644
--- a/packages/rn-tester/js/examples/RCTRootView/RCTRootViewIOSExample.js
+++ b/packages/rn-tester/js/examples/RCTRootView/RCTRootViewIOSExample.js
@@ -77,6 +77,7 @@ const styles = StyleSheet.create({
 });
 
 exports.title = 'RCTRootView';
+exports.category = 'Basic';
 exports.description =
   'Examples that show useful methods when embedding React Native in a native application';
 exports.examples = [
diff --git a/packages/rn-tester/js/examples/RTL/RTLExample.js b/packages/rn-tester/js/examples/RTL/RTLExample.js
index e19c1bac3167c0..d6b1c1827edbc3 100644
--- a/packages/rn-tester/js/examples/RTL/RTLExample.js
+++ b/packages/rn-tester/js/examples/RTL/RTLExample.js
@@ -27,14 +27,6 @@ const {
   Button,
 } = require('react-native');
 
-type State = {
-  toggleStatus: any,
-  pan: Object,
-  linear: Object,
-  isRTL: boolean,
-  ...
-};
-
 type RTLToggleState = {isRTL: boolean, ...};
 
 type AnimationState = {
@@ -643,6 +635,7 @@ const styles = StyleSheet.create({
 });
 
 exports.title = 'RTLExample';
+exports.category = 'UI';
 exports.description = 'Examples to show how to apply components to RTL layout.';
 exports.examples = [
   {
diff --git a/packages/rn-tester/js/examples/RefreshControl/RefreshControlExample.js b/packages/rn-tester/js/examples/RefreshControl/RefreshControlExample.js
index 06493b0971b82a..fc582cb7d5a35b 100644
--- a/packages/rn-tester/js/examples/RefreshControl/RefreshControlExample.js
+++ b/packages/rn-tester/js/examples/RefreshControl/RefreshControlExample.js
@@ -114,7 +114,9 @@ class RefreshControlExample extends React.Component {
   };
 }
 
-exports.title = '<RefreshControl>';
+exports.title = 'RefreshControl';
+exports.category = 'Basic';
+exports.documentationURL = 'https://reactnative.dev/docs/refreshcontrol';
 exports.description = 'Adds pull-to-refresh support to a scrollview.';
 exports.simpleExampleContainer = true;
 exports.examples = [
diff --git a/packages/rn-tester/js/examples/SafeAreaView/SafeAreaViewExample.js b/packages/rn-tester/js/examples/SafeAreaView/SafeAreaViewExample.js
index a80d717b9726dc..0b9064bd143b99 100644
--- a/packages/rn-tester/js/examples/SafeAreaView/SafeAreaViewExample.js
+++ b/packages/rn-tester/js/examples/SafeAreaView/SafeAreaViewExample.js
@@ -116,7 +116,9 @@ const styles = StyleSheet.create({
 
 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
-exports.title = '<SafeAreaView>';
+exports.title = 'SafeAreaView';
+exports.category = 'UI';
+exports.documentationURL = 'https://reactnative.dev/docs/safeareaview';
 exports.description =
   'SafeAreaView automatically applies paddings reflect the portion of the view that is not covered by other (special) ancestor views.';
 exports.examples = [
diff --git a/packages/rn-tester/js/examples/ScrollView/ScrollViewAnimatedExample.js b/packages/rn-tester/js/examples/ScrollView/ScrollViewAnimatedExample.js
index a4a5ffea33979b..656c51276f6285 100644
--- a/packages/rn-tester/js/examples/ScrollView/ScrollViewAnimatedExample.js
+++ b/packages/rn-tester/js/examples/ScrollView/ScrollViewAnimatedExample.js
@@ -94,7 +94,8 @@ const styles = StyleSheet.create({
   },
 });
 
-exports.title = '<ScrollViewAnimated>';
+exports.title = 'ScrollViewAnimated';
+exports.category = 'Basic';
 exports.description = 'Component that is animated when ScrollView is offset.';
 
 exports.examples = [
diff --git a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
index 0fcc681fc44b4a..76e9147080e810 100644
--- a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
+++ b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
@@ -26,7 +26,9 @@ const nullthrows = require('nullthrows');
 import type {ViewStyleProp} from '../../../../../Libraries/StyleSheet/StyleSheet';
 
 exports.displayName = 'ScrollViewExample';
-exports.title = '<ScrollView>';
+exports.title = 'ScrollView';
+exports.documentationURL = 'https://reactnative.dev/docs/scrollview';
+exports.category = 'Basic';
 exports.description =
   'Component that enables scrolling through child components';
 exports.examples = [
diff --git a/packages/rn-tester/js/examples/ScrollView/ScrollViewSimpleExample.js b/packages/rn-tester/js/examples/ScrollView/ScrollViewSimpleExample.js
index 3a5488428c01d2..b4960f93ee4b15 100644
--- a/packages/rn-tester/js/examples/ScrollView/ScrollViewSimpleExample.js
+++ b/packages/rn-tester/js/examples/ScrollView/ScrollViewSimpleExample.js
@@ -91,7 +91,8 @@ const styles = StyleSheet.create({
   },
 });
 
-exports.title = '<ScrollViewSimpleExample>';
+exports.title = 'ScrollViewSimpleExample';
+exports.category = 'Basic';
 exports.description =
   'Component that enables scrolling through child components.';
 
diff --git a/packages/rn-tester/js/examples/SectionList/SectionListExample.js b/packages/rn-tester/js/examples/SectionList/SectionListExample.js
index 87b8e7b72d6e68..f65cc8196f2d95 100644
--- a/packages/rn-tester/js/examples/SectionList/SectionListExample.js
+++ b/packages/rn-tester/js/examples/SectionList/SectionListExample.js
@@ -290,7 +290,9 @@ const styles = StyleSheet.create({
   },
 });
 
-exports.title = '<SectionList>';
+exports.title = 'SectionList';
+exports.category = 'ListView';
+exports.documentationURL = 'https://reactnative.dev/docs/sectionlist';
 exports.description = 'Performant, scrollable list of data.';
 exports.examples = [
   {
diff --git a/packages/rn-tester/js/examples/SegmentedControlIOS/SegmentedControlExampleComponents.js b/packages/rn-tester/js/examples/SegmentedControlIOS/SegmentedControlExampleComponents.js
deleted file mode 100644
index 8b06f064fda39f..00000000000000
--- a/packages/rn-tester/js/examples/SegmentedControlIOS/SegmentedControlExampleComponents.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * @flow strict-local
- */
-
-'use strict';
-
-import * as React from 'react';
-import {SegmentedControlIOS, Text, View, StyleSheet} from 'react-native';
-
-export function BasicSegmentedControlExample(): React.Node {
-  return (
-    <View>
-      <View style={{marginBottom: 10}}>
-        <SegmentedControlIOS values={['One', 'Two']} />
-      </View>
-      <View>
-        <SegmentedControlIOS values={['One', 'Two', 'Three', 'Four', 'Five']} />
-      </View>
-    </View>
-  );
-}
-
-export function PreSelectedSegmentedControlExample(): React.Node {
-  return (
-    <View>
-      <View>
-        <SegmentedControlIOS values={['One', 'Two']} selectedIndex={0} />
-      </View>
-    </View>
-  );
-}
-
-export function MomentarySegmentedControlExample(): React.Node {
-  return (
-    <View>
-      <View>
-        <SegmentedControlIOS values={['One', 'Two']} momentary={true} />
-      </View>
-    </View>
-  );
-}
-
-export function DisabledSegmentedControlExample(): React.Node {
-  return (
-    <View>
-      <View>
-        <SegmentedControlIOS
-          enabled={false}
-          values={['One', 'Two']}
-          selectedIndex={1}
-        />
-      </View>
-    </View>
-  );
-}
-
-export function ColorSegmentedControlExample(): React.Node {
-  return (
-    <View>
-      <View style={{marginBottom: 10}}>
-        <SegmentedControlIOS
-          tintColor="#ff0000"
-          values={['One', 'Two', 'Three', 'Four']}
-          selectedIndex={0}
-        />
-      </View>
-      <View>
-        <SegmentedControlIOS
-          tintColor="#00ff00"
-          values={['One', 'Two', 'Three']}
-          selectedIndex={1}
-        />
-      </View>
-    </View>
-  );
-}
-
-export function EventSegmentedControlExample(): React.Node {
-  const [selectedIndex, setSelectedIndex] = React.useState(undefined);
-  const [value, setValue] = React.useState('Not selected');
-  const values = ['One', 'Two', 'Three'];
-
-  return (
-    <View>
-      <Text style={styles.text}>Value: {value}</Text>
-      <Text style={styles.text}>Index: {selectedIndex}</Text>
-      <SegmentedControlIOS
-        values={values}
-        selectedIndex={selectedIndex}
-        onChange={event => {
-          setSelectedIndex(event.nativeEvent.selectedSegmentIndex);
-        }}
-        onValueChange={changedValue => {
-          setValue(changedValue);
-        }}
-      />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  text: {
-    fontSize: 14,
-    textAlign: 'center',
-    fontWeight: '500',
-    margin: 10,
-  },
-});
diff --git a/packages/rn-tester/js/examples/SegmentedControlIOS/SegmentedControlIOSExample.js b/packages/rn-tester/js/examples/SegmentedControlIOS/SegmentedControlIOSExample.js
deleted file mode 100644
index 2824475b838f6a..00000000000000
--- a/packages/rn-tester/js/examples/SegmentedControlIOS/SegmentedControlIOSExample.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * @flow
- */
-
-'use strict';
-
-const React = require('react');
-const {
-  BasicSegmentedControlExample,
-  PreSelectedSegmentedControlExample,
-  MomentarySegmentedControlExample,
-  DisabledSegmentedControlExample,
-  ColorSegmentedControlExample,
-  EventSegmentedControlExample,
-} = require('./SegmentedControlExampleComponents');
-
-exports.title = '<SegmentedControlIOS>';
-exports.displayName = 'SegmentedControlExample';
-exports.description = 'Native segmented control';
-exports.examples = [
-  {
-    title: 'Segmented controls can have values',
-    render(): React.Element<any> {
-      return <BasicSegmentedControlExample />;
-    },
-  },
-  {
-    title: 'Segmented controls can have a pre-selected value',
-    render(): React.Element<any> {
-      return <PreSelectedSegmentedControlExample />;
-    },
-  },
-  {
-    title: 'Segmented controls can be momentary',
-    render(): React.Element<any> {
-      return <MomentarySegmentedControlExample />;
-    },
-  },
-  {
-    title: 'Segmented controls can be disabled',
-    render(): React.Element<any> {
-      return <DisabledSegmentedControlExample />;
-    },
-  },
-  {
-    title: 'Custom colors can be provided',
-    render(): React.Element<any> {
-      return <ColorSegmentedControlExample />;
-    },
-  },
-  {
-    title: 'Change events can be detected',
-    render(): React.Element<any> {
-      return <EventSegmentedControlExample />;
-    },
-  },
-];
diff --git a/packages/rn-tester/js/examples/Share/ShareExample.js b/packages/rn-tester/js/examples/Share/ShareExample.js
index bf33e7670ae0d6..ed3268af252fef 100644
--- a/packages/rn-tester/js/examples/Share/ShareExample.js
+++ b/packages/rn-tester/js/examples/Share/ShareExample.js
@@ -113,6 +113,8 @@ const styles = StyleSheet.create({
 
 exports.framework = 'React';
 exports.title = 'Share';
+exports.category = 'Basic';
+exports.documentationURL = 'https://reactnative.dev/docs/share';
 exports.description = 'Share data with other Apps.';
 exports.examples = [
   {
diff --git a/packages/rn-tester/js/examples/Slider/SliderExample.js b/packages/rn-tester/js/examples/Slider/SliderExample.js
deleted file mode 100644
index 7a1fca6c1ff66c..00000000000000
--- a/packages/rn-tester/js/examples/Slider/SliderExample.js
+++ /dev/null
@@ -1,136 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * @flow
- */
-
-'use strict';
-
-const React = require('react');
-const {Slider, Text, StyleSheet, View} = require('react-native');
-
-function SliderExample(props: React.ElementConfig<typeof Slider>) {
-  const [value, setValue] = React.useState(0);
-
-  return (
-    <View>
-      <Text style={styles.text}>{value.toFixed(3)}</Text>
-      <Slider {...props} onValueChange={newValue => setValue(newValue)} />
-    </View>
-  );
-}
-
-function SlidingCompleteExample(props: React.ElementConfig<typeof Slider>) {
-  const [slideCompletionValue, setSlideCompletionValue] = React.useState(0);
-  const [slideCompletionCount, setSlideCompletionCount] = React.useState(0);
-
-  return (
-    <View>
-      <SliderExample
-        {...props}
-        onSlidingComplete={value => {
-          setSlideCompletionValue(value);
-          setSlideCompletionCount(count => count + 1);
-        }}
-      />
-      <Text>
-        Completions: {slideCompletionCount} Value: {slideCompletionValue}
-      </Text>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  text: {
-    fontSize: 14,
-    textAlign: 'center',
-    fontWeight: '500',
-    margin: 10,
-  },
-});
-
-exports.title = '<Slider>';
-exports.displayName = 'SliderExample';
-exports.description = 'Slider input for numeric values';
-exports.examples = [
-  {
-    title: 'Default settings',
-    render(): React.Element<any> {
-      return <SliderExample />;
-    },
-  },
-  {
-    title: 'Initial value: 0.5',
-    render(): React.Element<any> {
-      return <SliderExample value={0.5} />;
-    },
-  },
-  {
-    title: 'minimumValue: -1, maximumValue: 2',
-    render(): React.Element<any> {
-      return <SliderExample minimumValue={-1} maximumValue={2} />;
-    },
-  },
-  {
-    title: 'step: 0.25',
-    render(): React.Element<any> {
-      return <SliderExample step={0.25} />;
-    },
-  },
-  {
-    title: 'onSlidingComplete',
-    render(): React.Element<any> {
-      return <SlidingCompleteExample />;
-    },
-  },
-  {
-    title: 'Custom min/max track tint color',
-    render(): React.Element<any> {
-      return (
-        <SliderExample
-          minimumTrackTintColor={'blue'}
-          maximumTrackTintColor={'red'}
-          value={0.5}
-        />
-      );
-    },
-  },
-  {
-    title: 'Custom thumb tint color',
-    render(): React.Element<any> {
-      return <SliderExample thumbTintColor={'blue'} />;
-    },
-  },
-  {
-    title: 'Custom thumb image',
-    platform: 'ios',
-    render(): React.Element<any> {
-      return (
-        <SliderExample thumbImage={require('../../assets/uie_thumb_big.png')} />
-      );
-    },
-  },
-  {
-    title: 'Custom track image',
-    platform: 'ios',
-    render(): React.Element<any> {
-      return <SliderExample trackImage={require('../../assets/slider.png')} />;
-    },
-  },
-  {
-    title: 'Custom min/max track image',
-    platform: 'ios',
-    render(): React.Element<any> {
-      return (
-        <SliderExample
-          minimumTrackImage={require('../../assets/slider-left.png')}
-          maximumTrackImage={require('../../assets/slider-right.png')}
-        />
-      );
-    },
-  },
-];
diff --git a/packages/rn-tester/js/examples/Snapshot/SnapshotExample.js b/packages/rn-tester/js/examples/Snapshot/SnapshotExample.js
index 98378fc7a704a1..ac9a8b2fedfbb5 100644
--- a/packages/rn-tester/js/examples/Snapshot/SnapshotExample.js
+++ b/packages/rn-tester/js/examples/Snapshot/SnapshotExample.js
@@ -58,6 +58,7 @@ const style = StyleSheet.create({
 });
 
 exports.title = 'Snapshot / Screenshot';
+exports.category = 'Basic';
 exports.description = 'API to capture images from the screen.';
 exports.examples = [
   {
diff --git a/packages/rn-tester/js/examples/StatusBar/StatusBarExample.js b/packages/rn-tester/js/examples/StatusBar/StatusBarExample.js
index 60510df9db0e9a..6a5ef7c0eb49c9 100644
--- a/packages/rn-tester/js/examples/StatusBar/StatusBarExample.js
+++ b/packages/rn-tester/js/examples/StatusBar/StatusBarExample.js
@@ -432,7 +432,9 @@ class ModalExample extends React.Component<{...}, $FlowFixMeState> {
 }
 
 exports.framework = 'React';
-exports.title = '<StatusBar>';
+exports.title = 'StatusBar';
+exports.category = 'Basic';
+exports.documentationURL = 'https://reactnative.dev/docs/statusbar';
 exports.description = 'Component for controlling the status bar';
 exports.examples = [
   {
diff --git a/packages/rn-tester/js/examples/Switch/SwitchExample.js b/packages/rn-tester/js/examples/Switch/SwitchExample.js
index ce825594e1150a..1acbb65c765608 100644
--- a/packages/rn-tester/js/examples/Switch/SwitchExample.js
+++ b/packages/rn-tester/js/examples/Switch/SwitchExample.js
@@ -202,7 +202,9 @@ class EventSwitchExample extends React.Component<{...}, $FlowFixMeState> {
   }
 }
 
-exports.title = '<Switch>';
+exports.title = 'Switch';
+exports.documentationURL = 'https://reactnative.dev/docs/switch';
+exports.category = 'UI';
 exports.displayName = 'SwitchExample';
 exports.description = 'Native boolean input';
 exports.examples = [
diff --git a/packages/rn-tester/js/examples/TVEventHandler/TVEventHandlerExample.js b/packages/rn-tester/js/examples/TVEventHandler/TVEventHandlerExample.js
index 2980bc12745e08..26aff1bfc30ef2 100644
--- a/packages/rn-tester/js/examples/TVEventHandler/TVEventHandlerExample.js
+++ b/packages/rn-tester/js/examples/TVEventHandler/TVEventHandlerExample.js
@@ -77,6 +77,7 @@ class TVEventHandlerView extends React.Component<Props, State> {
 
 exports.framework = 'React';
 exports.title = 'TVEventHandler example';
+exports.category = 'iOS';
 exports.description = 'iOS alerts and action sheets';
 exports.examples = [
   {
diff --git a/packages/rn-tester/js/examples/Text/TextExample.android.js b/packages/rn-tester/js/examples/Text/TextExample.android.js
index cec4b348d19fe4..9a53a9f553169a 100644
--- a/packages/rn-tester/js/examples/Text/TextExample.android.js
+++ b/packages/rn-tester/js/examples/Text/TextExample.android.js
@@ -878,7 +878,9 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
   },
 });
-exports.title = '<Text>';
+exports.title = 'Text';
+exports.documentationURL = 'https://reactnative.dev/docs/text';
+exports.category = 'Basic';
 exports.description = 'Base component for rendering styled text.';
 exports.examples = [
   {
diff --git a/packages/rn-tester/js/examples/Text/TextExample.ios.js b/packages/rn-tester/js/examples/Text/TextExample.ios.js
index 334daff88c0ff8..9562f1c45b4940 100644
--- a/packages/rn-tester/js/examples/Text/TextExample.ios.js
+++ b/packages/rn-tester/js/examples/Text/TextExample.ios.js
@@ -479,7 +479,9 @@ class TextWithCapBaseBox extends React.Component<*, *> {
   }
 }
 
-exports.title = '<Text>';
+exports.title = 'Text';
+exports.documentationURL = 'https://reactnative.dev/docs/text';
+exports.category = 'Basic';
 exports.description = 'Base component for rendering styled text.';
 exports.displayName = 'TextExample';
 exports.examples = [
diff --git a/packages/rn-tester/js/examples/TextInput/TextInputExample.android.js b/packages/rn-tester/js/examples/TextInput/TextInputExample.android.js
index 8c7020f02ccc74..9551a9a96fca89 100644
--- a/packages/rn-tester/js/examples/TextInput/TextInputExample.android.js
+++ b/packages/rn-tester/js/examples/TextInput/TextInputExample.android.js
@@ -144,7 +144,9 @@ const styles = StyleSheet.create({
   },
 });
 
-exports.title = '<TextInput>';
+exports.title = 'TextInput';
+exports.documentationURL = 'https://reactnative.dev/docs/textinput';
+exports.category = 'Basic';
 exports.description = 'Single and multi-line text inputs.';
 exports.examples = ([
   ...TextInputSharedExamples,
diff --git a/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js b/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js
index 311efa1179b066..218ad62d9f4e45 100644
--- a/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js
+++ b/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js
@@ -255,7 +255,9 @@ const styles = StyleSheet.create({
 });
 
 exports.displayName = (undefined: ?string);
-exports.title = '<TextInput>';
+exports.title = 'TextInput';
+exports.documentationURL = 'https://reactnative.dev/docs/textinput';
+exports.category = 'Basic';
 exports.description = 'Single and multi-line text inputs.';
 exports.examples = ([
   ...TextInputSharedExamples,
diff --git a/packages/rn-tester/js/examples/Timer/TimerExample.js b/packages/rn-tester/js/examples/Timer/TimerExample.js
index e9c9b74c8cf4de..596020e12705f9 100644
--- a/packages/rn-tester/js/examples/Timer/TimerExample.js
+++ b/packages/rn-tester/js/examples/Timer/TimerExample.js
@@ -262,6 +262,7 @@ class TimerTester extends React.Component<TimerTesterProps> {
 
 exports.framework = 'React';
 exports.title = 'Timers';
+exports.category = 'UI';
 exports.description = 'A demonstration of Timers in React Native.';
 
 exports.examples = [
diff --git a/packages/rn-tester/js/examples/ToastAndroid/ToastAndroidExample.android.js b/packages/rn-tester/js/examples/ToastAndroid/ToastAndroidExample.android.js
index 27ac0e49cffe7e..f83eabada87302 100644
--- a/packages/rn-tester/js/examples/ToastAndroid/ToastAndroidExample.android.js
+++ b/packages/rn-tester/js/examples/ToastAndroid/ToastAndroidExample.android.js
@@ -124,6 +124,7 @@ const styles = StyleSheet.create({
 });
 
 exports.title = 'Toast Example';
+exports.category = 'Android';
 exports.description =
   'Example that demonstrates the use of an Android Toast to provide feedback.';
 exports.examples = [
diff --git a/packages/rn-tester/js/examples/Touchable/TouchableExample.js b/packages/rn-tester/js/examples/Touchable/TouchableExample.js
index 3d1c4008ac731c..7c313cbf185604 100644
--- a/packages/rn-tester/js/examples/Touchable/TouchableExample.js
+++ b/packages/rn-tester/js/examples/Touchable/TouchableExample.js
@@ -553,7 +553,9 @@ const styles = StyleSheet.create({
 
 exports.displayName = (undefined: ?string);
 exports.description = 'Touchable and onPress examples.';
-exports.title = '<Touchable*> and onPress';
+exports.title = 'Touchable* and onPress';
+exports.category = 'UI';
+exports.documentationURL = 'https://reactnative.dev/docs/touchablehighlight';
 exports.examples = [
   {
     title: '<TouchableHighlight>',
diff --git a/packages/rn-tester/js/examples/Transform/TransformExample.js b/packages/rn-tester/js/examples/Transform/TransformExample.js
index a42a00c105742f..350f1c6c3fd265 100644
--- a/packages/rn-tester/js/examples/Transform/TransformExample.js
+++ b/packages/rn-tester/js/examples/Transform/TransformExample.js
@@ -237,6 +237,8 @@ const styles = StyleSheet.create({
 });
 
 exports.title = 'Transforms';
+exports.category = 'UI';
+exports.documentationURL = 'https://reactnative.dev/docs/transforms';
 exports.description = 'View transforms';
 exports.examples = [
   {
diff --git a/packages/rn-tester/js/examples/TransparentHitTest/TransparentHitTestExample.js b/packages/rn-tester/js/examples/TransparentHitTest/TransparentHitTestExample.js
index 5c1f50cae40296..edf8bbc9db063e 100644
--- a/packages/rn-tester/js/examples/TransparentHitTest/TransparentHitTestExample.js
+++ b/packages/rn-tester/js/examples/TransparentHitTest/TransparentHitTestExample.js
@@ -37,7 +37,8 @@ class TransparentHitTestExample extends React.Component<{...}> {
   }
 }
 
-exports.title = '<TransparentHitTestExample>';
+exports.title = 'TransparentHitTestExample';
+exports.category = 'UI';
 exports.displayName = 'TransparentHitTestExample';
 exports.description = 'Transparent view receiving touch events';
 exports.examples = [
diff --git a/packages/rn-tester/js/examples/TurboModule/TurboModuleExample.js b/packages/rn-tester/js/examples/TurboModule/TurboModuleExample.js
index a22d3c703546c3..7539b6733ad738 100644
--- a/packages/rn-tester/js/examples/TurboModule/TurboModuleExample.js
+++ b/packages/rn-tester/js/examples/TurboModule/TurboModuleExample.js
@@ -15,6 +15,7 @@ const SampleTurboModuleExample = require('./SampleTurboModuleExample');
 
 exports.displayName = (undefined: ?string);
 exports.title = 'TurboModule';
+exports.category = 'Basic';
 exports.description = 'Usage of TurboModule';
 exports.examples = [
   {
diff --git a/packages/rn-tester/js/examples/Vibration/VibrationExample.js b/packages/rn-tester/js/examples/Vibration/VibrationExample.js
index b328d80f538db8..721a9da4ec8dff 100644
--- a/packages/rn-tester/js/examples/Vibration/VibrationExample.js
+++ b/packages/rn-tester/js/examples/Vibration/VibrationExample.js
@@ -23,6 +23,8 @@ const {
 
 exports.framework = 'React';
 exports.title = 'Vibration';
+exports.category = 'Basic';
+exports.documentationURL = 'https://reactnative.dev/docs/vibration';
 exports.description = 'Vibration API';
 
 let pattern, patternLiteral, patternDescription;
diff --git a/packages/rn-tester/js/examples/View/ViewExample.js b/packages/rn-tester/js/examples/View/ViewExample.js
index 96636eb2a417e6..cea8eddf7ac750 100644
--- a/packages/rn-tester/js/examples/View/ViewExample.js
+++ b/packages/rn-tester/js/examples/View/ViewExample.js
@@ -19,7 +19,9 @@ const {
   View,
 } = require('react-native');
 
-exports.title = '<View>';
+exports.title = 'View';
+exports.documentationURL = 'https://reactnative.dev/docs/view';
+exports.category = 'Basic';
 exports.description = ('Basic building block of all UI, examples that ' +
   'demonstrate some of the many styles available.': string);
 
diff --git a/packages/rn-tester/js/examples/WebSocket/WebSocketExample.js b/packages/rn-tester/js/examples/WebSocket/WebSocketExample.js
index 169678443df9af..53aec1a76ac723 100644
--- a/packages/rn-tester/js/examples/WebSocket/WebSocketExample.js
+++ b/packages/rn-tester/js/examples/WebSocket/WebSocketExample.js
@@ -345,6 +345,7 @@ const styles = StyleSheet.create({
 });
 
 exports.title = 'WebSocket';
+exports.category = 'Basic';
 exports.description = 'WebSocket API';
 exports.examples = [
   {
diff --git a/packages/rn-tester/js/examples/XHR/XHRExample.js b/packages/rn-tester/js/examples/XHR/XHRExample.js
index c8871a01276f22..4418e58f605cbb 100644
--- a/packages/rn-tester/js/examples/XHR/XHRExample.js
+++ b/packages/rn-tester/js/examples/XHR/XHRExample.js
@@ -20,6 +20,7 @@ const XHRExampleOnTimeOut = require('./XHRExampleOnTimeOut');
 
 exports.framework = 'React';
 exports.title = 'XMLHttpRequest';
+exports.category = 'Basic';
 exports.description = ('Example that demonstrates upload and download ' +
   'requests using XMLHttpRequest.': string);
 exports.examples = [
diff --git a/packages/rn-tester/js/types/RNTesterTypes.js b/packages/rn-tester/js/types/RNTesterTypes.js
index 7abf2f875b1390..73206557af27a2 100644
--- a/packages/rn-tester/js/types/RNTesterTypes.js
+++ b/packages/rn-tester/js/types/RNTesterTypes.js
@@ -35,6 +35,8 @@ export type RNTesterExampleModule = $ReadOnly<{|
   title: string,
   description: string,
   displayName?: ?string,
+  documentationURL?: ?string,
+  category?: ?string,
   framework?: string,
   examples: Array<RNTesterExampleModuleItem>,
   simpleExampleContainer?: ?boolean,
@@ -43,4 +45,7 @@ export type RNTesterExampleModule = $ReadOnly<{|
 export type RNTesterExample = $ReadOnly<{|
   key: string,
   module: RNTesterExampleModule,
+  category?: string,
+  supportsTVOS?: boolean,
+  documentationURL?: string,
 |}>;
diff --git a/packages/rn-tester/js/utils/RNTesterActions.js b/packages/rn-tester/js/utils/RNTesterActions.js
index 10b6ee1cd83e6f..e9ec1080d604f2 100644
--- a/packages/rn-tester/js/utils/RNTesterActions.js
+++ b/packages/rn-tester/js/utils/RNTesterActions.js
@@ -25,15 +25,17 @@ export type RNTesterAction =
   | RNTesterListAction
   | RNTesterExampleAction;
 
-function Back(): RNTesterBackAction {
+function Back(screen: string): RNTesterBackAction {
   return {
     type: 'RNTesterBackAction',
+    screen,
   };
 }
 
-function ExampleList(): RNTesterListAction {
+function OpenList(screen: string): RNTesterListAction {
   return {
     type: 'RNTesterListAction',
+    screen,
   };
 }
 
@@ -46,7 +48,7 @@ function ExampleAction(openExample: string): RNTesterExampleAction {
 
 const RNTesterActions = {
   Back,
-  ExampleList,
+  OpenList,
   ExampleAction,
 };
 
diff --git a/packages/rn-tester/js/utils/RNTesterAsyncStorageAbstraction.js b/packages/rn-tester/js/utils/RNTesterAsyncStorageAbstraction.js
new file mode 100644
index 00000000000000..084bac82307633
--- /dev/null
+++ b/packages/rn-tester/js/utils/RNTesterAsyncStorageAbstraction.js
@@ -0,0 +1,190 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+import {Platform, Linking} from 'react-native';
+import {AsyncStorage} from 'react-native';
+const RNTesterNavigationReducer = require('./RNTesterNavigationReducer');
+const URIActionMap = require('./URIActionMap');
+import type {RNTesterExample} from '../types/RNTesterTypes';
+
+const APP_STATE_KEY = 'RNTesterAppState.v2';
+
+type Context = $FlowFixMe;
+
+export const initializeAsyncStore = (context: Context) => {
+  Linking.getInitialURL().then(url => {
+    AsyncStorage.getItem(APP_STATE_KEY, (err, storedString) => {
+      const exampleAction = URIActionMap(
+        context.props.exampleFromAppetizeParams,
+      );
+      const urlAction = URIActionMap(url);
+      const launchAction = exampleAction || urlAction;
+      if (err || !storedString) {
+        const initialAction = launchAction || {type: 'RNTesterListAction'};
+        context.setState(
+          RNTesterNavigationReducer(context.state, initialAction),
+        );
+        return;
+      }
+
+      const storedState = JSON.parse(storedString);
+      if (launchAction) {
+        context.setState(RNTesterNavigationReducer(storedState, launchAction));
+        return;
+      }
+      context.setState({
+        openExample: storedState.openExample,
+      });
+    });
+  });
+
+  if (Platform.OS === 'ios') {
+    Linking.addEventListener('url', url => {
+      context._handleAction(URIActionMap(url));
+    });
+  }
+
+  AsyncStorage.getItem('Components', (err, storedString) => {
+    if (err || !storedString) {
+      return;
+    }
+    const components = JSON.parse(storedString);
+    context.setState({
+      Components: components,
+    });
+  });
+  AsyncStorage.getItem('Api', (err, storedString) => {
+    if (err || !storedString) {
+      return;
+    }
+    const api = JSON.parse(storedString);
+    context.setState({
+      Api: api,
+    });
+  });
+  AsyncStorage.getItem('RecentComponents', (err, storedString) => {
+    if (err || !storedString) {
+      return;
+    }
+    const recentComponents = JSON.parse(storedString);
+    context.setState({
+      recentComponents: recentComponents,
+    });
+  });
+  AsyncStorage.getItem('RecentApi', (err, storedString) => {
+    if (err || !storedString) {
+      return;
+    }
+    const recentApis = JSON.parse(storedString);
+    context.setState({
+      recentApis: recentApis,
+    });
+  });
+};
+
+export const addApi = (
+  apiName: string,
+  api: RNTesterExample,
+  context: $FlowFixMe,
+) => {
+  const stateApi = Object.assign({}, context.state.Api);
+  stateApi[apiName] = api;
+  context.setState({
+    Api: stateApi,
+  });
+  // Syncing the bookmarks over async storage
+  AsyncStorage.setItem('Api', JSON.stringify(stateApi));
+};
+
+export const addComponent = (
+  componentName: string,
+  component: RNTesterExample,
+  context: Context,
+) => {
+  const stateComponent = Object.assign({}, context.state.Components);
+  stateComponent[componentName] = component;
+  context.setState({
+    Components: stateComponent,
+  });
+  // Syncing the bookmarks over async storage
+  AsyncStorage.setItem('Components', JSON.stringify(stateComponent));
+};
+
+export const removeApi = (apiName: string, context: Context) => {
+  const stateApi = Object.assign({}, context.state.Api);
+  delete stateApi[apiName];
+  context.setState({
+    Api: stateApi,
+  });
+  AsyncStorage.setItem('Api', JSON.stringify(stateApi));
+};
+
+export const removeComponent = (componentName: string, context: Context) => {
+  const stateComponent = Object.assign({}, context.state.Components);
+  delete stateComponent[componentName];
+  context.setState({
+    Components: stateComponent,
+  });
+  AsyncStorage.setItem('Components', JSON.stringify(stateComponent));
+};
+
+export const checkBookmarks = (
+  title: string,
+  key: string,
+  context: Context,
+): boolean => {
+  if (key === 'APIS' || key === 'RECENT_APIS') {
+    return context.state.Api[title] === undefined;
+  }
+  return context.state.Components[title] === undefined;
+};
+
+export const updateRecentlyViewedList = (
+  item: RNTesterExample,
+  key: string,
+  context: Context,
+) => {
+  const openedItem = item;
+  if (key === 'COMPONENTS' || key === 'RECENT_COMPONENTS') {
+    let componentsCopy = [...context.state.recentComponents];
+    const ind = componentsCopy.findIndex(
+      component => component.key === openedItem.key,
+    );
+    if (ind !== -1) {
+      componentsCopy.splice(ind, 1);
+    }
+    if (context.state.recentComponents.length >= 5) {
+      componentsCopy.pop();
+    }
+    componentsCopy.unshift(openedItem);
+    context.setState({
+      recentComponents: componentsCopy,
+    });
+    // Syncing the recently viewed components over async storage
+    AsyncStorage.setItem('RecentComponents', JSON.stringify(componentsCopy));
+  } else {
+    let apisCopy = [...context.state.recentApis];
+    const ind = apisCopy.findIndex(api => api.key === openedItem.key);
+    if (ind !== -1) {
+      apisCopy.splice(ind, 1);
+    }
+    if (context.state.recentApis.length >= 5) {
+      apisCopy.pop();
+    }
+    apisCopy.unshift(openedItem);
+    context.setState({
+      recentApis: apisCopy,
+    });
+    // Syncing the recently viewed apis over async storage
+    AsyncStorage.setItem('RecentApi', JSON.stringify(apisCopy));
+  }
+};
diff --git a/packages/rn-tester/js/utils/RNTesterList.android.js b/packages/rn-tester/js/utils/RNTesterList.android.js
index 2b1b921efe75f0..bb509d0f3b0103 100644
--- a/packages/rn-tester/js/utils/RNTesterList.android.js
+++ b/packages/rn-tester/js/utils/RNTesterList.android.js
@@ -15,18 +15,22 @@ import type {RNTesterExample} from '../types/RNTesterTypes';
 const ComponentExamples: Array<RNTesterExample> = [
   {
     key: 'ActivityIndicatorExample',
+    category: 'UI',
     module: require('../examples/ActivityIndicator/ActivityIndicatorExample'),
   },
   {
     key: 'ButtonExample',
+    category: 'UI',
     module: require('../examples/Button/ButtonExample'),
   },
   {
     key: 'FlatListExample',
+    category: 'ListView',
     module: require('../examples/FlatList/FlatListExample'),
   },
   {
     key: 'ImageExample',
+    category: 'Basic',
     module: require('../examples/Image/ImageExample'),
   },
   {
@@ -39,74 +43,75 @@ const ComponentExamples: Array<RNTesterExample> = [
   },
   {
     key: 'ModalExample',
+    category: 'UI',
     module: require('../examples/Modal/ModalExample'),
   },
   {
     key: 'MultiColumnExample',
+    category: 'ListView',
     module: require('../examples/MultiColumn/MultiColumnExample'),
   },
   {
     key: 'NewAppScreenExample',
     module: require('../examples/NewAppScreen/NewAppScreenExample'),
   },
-  {
-    key: 'PickerExample',
-    module: require('../examples/Picker/PickerExample'),
-  },
   {
     key: 'PressableExample',
+    category: 'UI',
     module: require('../examples/Pressable/PressableExample'),
   },
-  {
-    key: 'ProgressBarAndroidExample',
-    module: require('../examples/ProgressBarAndroid/ProgressBarAndroidExample'),
-  },
   {
     key: 'RefreshControlExample',
     module: require('../examples/RefreshControl/RefreshControlExample'),
   },
   {
     key: 'ScrollViewExample',
+    category: 'Basic',
     module: require('../examples/ScrollView/ScrollViewExample'),
   },
   {
     key: 'ScrollViewSimpleExample',
+    category: 'Basic',
     module: require('../examples/ScrollView/ScrollViewSimpleExample'),
   },
   {
     key: 'ScrollViewAnimatedExample',
+    category: 'Basic',
     module: require('../examples/ScrollView/ScrollViewAnimatedExample'),
   },
   {
     key: 'SectionListExample',
+    category: 'ListView',
     module: require('../examples/SectionList/SectionListExample'),
   },
-  {
-    key: 'SliderExample',
-    module: require('../examples/Slider/SliderExample'),
-  },
   {
     key: 'StatusBarExample',
+    category: 'UI',
     module: require('../examples/StatusBar/StatusBarExample'),
   },
   {
     key: 'SwitchExample',
+    category: 'UI',
     module: require('../examples/Switch/SwitchExample'),
   },
   {
     key: 'TextExample',
+    category: 'Basic',
     module: require('../examples/Text/TextExample'),
   },
   {
     key: 'TextInputExample',
+    category: 'Basic',
     module: require('../examples/TextInput/TextInputExample'),
   },
   {
     key: 'TouchableExample',
+    category: 'UI',
     module: require('../examples/Touchable/TouchableExample'),
   },
   {
     key: 'ViewExample',
+    category: 'Basic',
     module: require('../examples/View/ViewExample'),
   },
 ];
@@ -114,130 +119,147 @@ const ComponentExamples: Array<RNTesterExample> = [
 const APIExamples: Array<RNTesterExample> = [
   {
     key: 'AccessibilityExample',
+    category: 'Basic',
     module: require('../examples/Accessibility/AccessibilityExample'),
   },
   {
     key: 'AccessibilityAndroidExample',
+    category: 'Android',
     module: require('../examples/Accessibility/AccessibilityAndroidExample'),
   },
   {
     key: 'AlertExample',
+    category: 'UI',
     module: require('../examples/Alert/AlertExample'),
   },
   {
     key: 'AnimatedExample',
+    category: 'UI',
     module: require('../examples/Animated/AnimatedExample'),
   },
   {
     key: 'Animation - GratuitousAnimation',
+    category: 'UI',
     module: require('../examples/Animated/AnimatedGratuitousApp/AnExApp'),
   },
   {
     key: 'AppearanceExample',
+    category: 'UI',
     module: require('../examples/Appearance/AppearanceExample'),
   },
   {
     key: 'AppStateExample',
+    category: 'Basic',
     module: require('../examples/AppState/AppStateExample'),
   },
   {
     key: 'BorderExample',
+    category: 'UI',
     module: require('../examples/Border/BorderExample'),
   },
-  {
-    key: 'BoxShadowExample',
-    module: require('../examples/BoxShadow/BoxShadowExample'),
-  },
-  {
-    key: 'ClipboardExample',
-    module: require('../examples/Clipboard/ClipboardExample'),
-  },
   {
     key: 'CrashExample',
+    category: 'Basic',
     module: require('../examples/Crash/CrashExample'),
   },
-  {
-    key: 'DatePickerAndroidExample',
-    module: require('../examples/DatePicker/DatePickerAndroidExample'),
-  },
   {
     key: 'DevSettings',
+    category: 'Basic',
     module: require('../examples/DevSettings/DevSettingsExample'),
   },
   {
     key: 'Dimensions',
+    category: 'UI',
     module: require('../examples/Dimensions/DimensionsExample'),
   },
   {
     key: 'LayoutEventsExample',
+    category: 'UI',
     module: require('../examples/Layout/LayoutEventsExample'),
   },
   {
     key: 'LinkingExample',
+    category: 'Basic',
     module: require('../examples/Linking/LinkingExample'),
   },
   {
     key: 'LayoutAnimationExample',
+    category: 'UI',
     module: require('../examples/Layout/LayoutAnimationExample'),
   },
   {
     key: 'LayoutExample',
+    category: 'UI',
     module: require('../examples/Layout/LayoutExample'),
   },
   {
     key: 'NativeAnimationsExample',
+    category: 'UI',
     module: require('../examples/NativeAnimation/NativeAnimationsExample'),
   },
   {
     key: 'OrientationChangeExample',
+    category: 'UI',
     module: require('../examples/OrientationChange/OrientationChangeExample'),
   },
   {
     key: 'PanResponderExample',
+    category: 'Basic',
     module: require('../examples/PanResponder/PanResponderExample'),
   },
   {
     key: 'PermissionsExampleAndroid',
+    category: 'Android',
     module: require('../examples/PermissionsAndroid/PermissionsExample'),
   },
   {
     key: 'PlatformColorExample',
+    category: 'UI',
     module: require('../examples/PlatformColor/PlatformColorExample'),
   },
   {
     key: 'PointerEventsExample',
+    category: 'Basic',
     module: require('../examples/PointerEvents/PointerEventsExample'),
   },
   {
     key: 'RTLExample',
+    category: 'Basic',
     module: require('../examples/RTL/RTLExample'),
   },
   {
     key: 'ShareExample',
+    category: 'Basic',
     module: require('../examples/Share/ShareExample'),
   },
   {
     key: 'TimerExample',
+    category: 'UI',
     module: require('../examples/Timer/TimerExample'),
   },
   {
     key: 'ToastAndroidExample',
+    category: 'Android',
     module: require('../examples/ToastAndroid/ToastAndroidExample'),
   },
   {
     key: 'TransformExample',
+    category: 'UI',
     module: require('../examples/Transform/TransformExample'),
   },
   {
     key: 'VibrationExample',
+    category: 'Basic',
     module: require('../examples/Vibration/VibrationExample'),
   },
   {
     key: 'WebSocketExample',
+    category: 'Basic',
     module: require('../examples/WebSocket/WebSocketExample'),
   },
   {
     key: 'XHRExample',
+    category: 'Basic',
     module: require('../examples/XHR/XHRExample'),
   },
 ];
diff --git a/packages/rn-tester/js/utils/RNTesterList.ios.js b/packages/rn-tester/js/utils/RNTesterList.ios.js
index 8e43dacf5415ac..f0e96e4b005734 100644
--- a/packages/rn-tester/js/utils/RNTesterList.ios.js
+++ b/packages/rn-tester/js/utils/RNTesterList.ios.js
@@ -15,23 +15,27 @@ import type {RNTesterExample} from '../types/RNTesterTypes';
 const ComponentExamples: Array<RNTesterExample> = [
   {
     key: 'ActivityIndicatorExample',
+    category: 'UI',
     module: require('../examples/ActivityIndicator/ActivityIndicatorExample'),
+    supportsTVOS: true,
   },
   {
     key: 'ButtonExample',
     module: require('../examples/Button/ButtonExample'),
-  },
-  {
-    key: 'DatePickerIOSExample',
-    module: require('../examples/DatePicker/DatePickerIOSExample'),
+    category: 'UI',
+    supportsTVOS: true,
   },
   {
     key: 'FlatListExample',
     module: require('../examples/FlatList/FlatListExample'),
+    category: 'ListView',
+    supportsTVOS: true,
   },
   {
     key: 'ImageExample',
     module: require('../examples/Image/ImageExample'),
+    category: 'Basic',
+    supportsTVOS: true,
   },
   {
     key: 'JSResponderHandlerExample',
@@ -40,106 +44,109 @@ const ComponentExamples: Array<RNTesterExample> = [
   {
     key: 'InputAccessoryViewExample',
     module: require('../examples/InputAccessoryView/InputAccessoryViewExample'),
+    supportsTVOS: true,
   },
   {
     key: 'KeyboardAvoidingViewExample',
     module: require('../examples/KeyboardAvoidingView/KeyboardAvoidingViewExample'),
+    supportsTVOS: false,
   },
   {
     key: 'LayoutEventsExample',
     module: require('../examples/Layout/LayoutEventsExample'),
-  },
-  {
-    key: 'MaskedViewExample',
-    module: require('../examples/MaskedView/MaskedViewExample'),
+    supportsTVOS: true,
   },
   {
     key: 'ModalExample',
     module: require('../examples/Modal/ModalExample'),
+    supportsTVOS: true,
   },
   {
     key: 'MultiColumnExample',
     module: require('../examples/MultiColumn/MultiColumnExample'),
+    supportsTVOS: true,
   },
   {
     key: 'NewAppScreenExample',
     module: require('../examples/NewAppScreen/NewAppScreenExample'),
-  },
-  {
-    key: 'PickerExample',
-    module: require('../examples/Picker/PickerExample'),
-  },
-  {
-    key: 'PickerIOSExample',
-    module: require('../examples/Picker/PickerIOSExample'),
+    supportsTVOS: false,
   },
   {
     key: 'PressableExample',
     module: require('../examples/Pressable/PressableExample'),
-  },
-  {
-    key: 'ProgressViewIOSExample',
-    module: require('../examples/ProgressViewIOS/ProgressViewIOSExample'),
+    supportsTVOS: true,
   },
   {
     key: 'RefreshControlExample',
     module: require('../examples/RefreshControl/RefreshControlExample'),
+    supportsTVOS: false,
   },
   {
     key: 'ScrollViewSimpleExample',
     module: require('../examples/ScrollView/ScrollViewSimpleExample'),
+    category: 'Basic',
+    supportsTVOS: true,
   },
   {
     key: 'SafeAreaViewExample',
     module: require('../examples/SafeAreaView/SafeAreaViewExample'),
+    supportsTVOS: true,
   },
   {
     key: 'ScrollViewExample',
     module: require('../examples/ScrollView/ScrollViewExample'),
+    category: 'Basic',
+    supportsTVOS: true,
   },
   {
     key: 'ScrollViewAnimatedExample',
     module: require('../examples/ScrollView/ScrollViewAnimatedExample'),
+    supportsTVOS: true,
   },
   {
     key: 'SectionListExample',
     module: require('../examples/SectionList/SectionListExample'),
-  },
-  {
-    key: 'SegmentedControlIOSExample',
-    module: require('../examples/SegmentedControlIOS/SegmentedControlIOSExample'),
-  },
-  {
-    key: 'SliderExample',
-    module: require('../examples/Slider/SliderExample'),
+    category: 'ListView',
+    supportsTVOS: true,
   },
   {
     key: 'StatusBarExample',
     module: require('../examples/StatusBar/StatusBarExample'),
+    supportsTVOS: false,
   },
   {
     key: 'SwitchExample',
     module: require('../examples/Switch/SwitchExample'),
+    category: 'UI',
+    supportsTVOS: false,
   },
   {
     key: 'TextExample',
     module: require('../examples/Text/TextExample.ios'),
+    category: 'Basic',
+    supportsTVOS: true,
   },
   {
     key: 'TextInputExample',
-    module: require('../examples/TextInput/TextInputExample.ios'),
+    module: require('../examples/TextInput/TextInputExample'),
+    category: 'Basic',
+    supportsTVOS: true,
   },
   {
     key: 'TouchableExample',
     module: require('../examples/Touchable/TouchableExample'),
+    supportsTVOS: true,
   },
   {
     key: 'TransparentHitTestExample',
     module: require('../examples/TransparentHitTest/TransparentHitTestExample'),
+    supportsTVOS: false,
   },
   {
     key: 'ViewExample',
     module: require('../examples/View/ViewExample'),
+    category: 'Basic',
+    supportsTVOS: true,
   },
 ];
 
@@ -147,54 +154,60 @@ const APIExamples: Array<RNTesterExample> = [
   {
     key: 'AccessibilityExample',
     module: require('../examples/Accessibility/AccessibilityExample'),
+    supportsTVOS: false,
   },
   {
     key: 'AccessibilityIOSExample',
     module: require('../examples/Accessibility/AccessibilityIOSExample'),
+    category: 'iOS',
+    supportsTVOS: false,
   },
   {
     key: 'ActionSheetIOSExample',
     module: require('../examples/ActionSheetIOS/ActionSheetIOSExample'),
+    category: 'iOS',
+    supportsTVOS: true,
   },
   {
     key: 'AlertIOSExample',
     module: require('../examples/Alert/AlertIOSExample'),
+    category: 'iOS',
+    supportsTVOS: true,
   },
   {
     key: 'AnimatedExample',
     module: require('../examples/Animated/AnimatedExample'),
+    supportsTVOS: true,
   },
   {
     key: 'AnExApp',
     module: require('../examples/Animated/AnimatedGratuitousApp/AnExApp'),
+    supportsTVOS: true,
   },
   {
     key: 'AppearanceExample',
     module: require('../examples/Appearance/AppearanceExample'),
+    supportsTVOS: false,
   },
   {
     key: 'AppStateExample',
     module: require('../examples/AppState/AppStateExample'),
-  },
-  {
-    key: 'AsyncStorageExample',
-    module: require('../examples/AsyncStorage/AsyncStorageExample'),
+    supportsTVOS: true,
   },
   {
     key: 'BorderExample',
     module: require('../examples/Border/BorderExample'),
+    supportsTVOS: true,
   },
   {
     key: 'BoxShadowExample',
     module: require('../examples/BoxShadow/BoxShadowExample'),
-  },
-  {
-    key: 'ClipboardExample',
-    module: require('../examples/Clipboard/ClipboardExample'),
+    supportsTVOS: true,
   },
   {
     key: 'CrashExample',
     module: require('../examples/Crash/CrashExample'),
+    supportsTVOS: false,
   },
   {
     key: 'DevSettings',
@@ -203,86 +216,102 @@ const APIExamples: Array<RNTesterExample> = [
   {
     key: 'Dimensions',
     module: require('../examples/Dimensions/DimensionsExample'),
+    supportsTVOS: true,
   },
   {
     key: 'LayoutAnimationExample',
     module: require('../examples/Layout/LayoutAnimationExample'),
+    supportsTVOS: true,
   },
   {
     key: 'LayoutExample',
     module: require('../examples/Layout/LayoutExample'),
+    supportsTVOS: true,
   },
   {
     key: 'LinkingExample',
     module: require('../examples/Linking/LinkingExample'),
+    supportsTVOS: true,
   },
   {
     key: 'NativeAnimationsExample',
     module: require('../examples/NativeAnimation/NativeAnimationsExample'),
+    supportsTVOS: true,
   },
   {
     key: 'OrientationChangeExample',
     module: require('../examples/OrientationChange/OrientationChangeExample'),
+    supportsTVOS: false,
   },
   {
     key: 'PanResponderExample',
     module: require('../examples/PanResponder/PanResponderExample'),
+    supportsTVOS: false,
   },
   {
     key: 'PlatformColorExample',
     module: require('../examples/PlatformColor/PlatformColorExample'),
+    supportsTVOS: true,
   },
   {
     key: 'PointerEventsExample',
     module: require('../examples/PointerEvents/PointerEventsExample'),
-  },
-  {
-    key: 'PushNotificationIOSExample',
-    module: require('../examples/PushNotificationIOS/PushNotificationIOSExample'),
+    supportsTVOS: false,
   },
   {
     key: 'RCTRootViewIOSExample',
     module: require('../examples/RCTRootView/RCTRootViewIOSExample'),
+    supportsTVOS: true,
   },
   {
     key: 'RTLExample',
     module: require('../examples/RTL/RTLExample'),
+    supportsTVOS: true,
   },
   {
     key: 'ShareExample',
     module: require('../examples/Share/ShareExample'),
+    supportsTVOS: true,
   },
   {
     key: 'SnapshotExample',
     module: require('../examples/Snapshot/SnapshotExample'),
+    supportsTVOS: true,
   },
   {
     key: 'TimerExample',
     module: require('../examples/Timer/TimerExample'),
+    supportsTVOS: true,
   },
   {
     key: 'TransformExample',
     module: require('../examples/Transform/TransformExample'),
+    supportsTVOS: true,
   },
   {
     key: 'TurboModuleExample',
     module: require('../examples/TurboModule/TurboModuleExample'),
+    supportsTVOS: false,
   },
   {
     key: 'TVEventHandlerExample',
     module: require('../examples/TVEventHandler/TVEventHandlerExample'),
+    supportsTVOS: true,
   },
   {
     key: 'VibrationExample',
     module: require('../examples/Vibration/VibrationExample'),
+    supportsTVOS: false,
   },
   {
     key: 'WebSocketExample',
     module: require('../examples/WebSocket/WebSocketExample'),
+    supportsTVOS: true,
   },
   {
     key: 'XHRExample',
     module: require('../examples/XHR/XHRExample'),
+    supportsTVOS: true,
   },
 ];
 
diff --git a/packages/rn-tester/js/utils/RNTesterNavigationReducer.js b/packages/rn-tester/js/utils/RNTesterNavigationReducer.js
index ee8d9e273e407a..0f8efa4455906b 100644
--- a/packages/rn-tester/js/utils/RNTesterNavigationReducer.js
+++ b/packages/rn-tester/js/utils/RNTesterNavigationReducer.js
@@ -11,11 +11,26 @@
 'use strict';
 
 const RNTesterList = require('./RNTesterList');
+import type {RNTesterExample} from '../types/RNTesterTypes';
 
-export type RNTesterNavigationState = {openExample: ?string, ...};
+export type RNTesterNavigationState = {
+  openExample: ?string,
+  screen: string,
+  Components: {...},
+  Api: {...},
+  recentComponents: Array<RNTesterExample>,
+  recentApis: Array<RNTesterExample>,
+  AddApi: (apiName: string, api: RNTesterExample) => mixed,
+  AddComponent: (componentName: string, component: RNTesterExample) => mixed,
+  RemoveApi: (apiName: string) => mixed,
+  RemoveComponent: (componentName: string) => mixed,
+  checkBookmark: (title: string, key: string) => mixed,
+  updateRecentlyViewedList: (item: RNTesterExample, key: string) => mixed,
+  ...
+};
 
 function RNTesterNavigationReducer(
-  state: ?RNTesterNavigationState,
+  state: RNTesterNavigationState,
   action: any,
 ): RNTesterNavigationState {
   if (
@@ -27,17 +42,27 @@ function RNTesterNavigationReducer(
     (state.openExample && action.type === 'RNTesterBackAction')
   ) {
     return {
+      ...state,
+      screen: action.screen ?? 'component',
       // A null openExample will cause the views to display the RNTester example list
       openExample: null,
     };
   }
 
+  if (action.screen === 'bookmark' && action.type === 'RNTesterBackAction') {
+    return {
+      ...state,
+      screen: 'component',
+      openExample: null,
+    };
+  }
+
   if (action.type === 'RNTesterExampleAction') {
     // Make sure we see the module before returning the new state
     const ExampleModule = RNTesterList.Modules[action.openExample];
-
     if (ExampleModule) {
       return {
+        ...state,
         openExample: action.openExample,
       };
     }
diff --git a/packages/rn-tester/js/utils/RNTesterStatePersister.js b/packages/rn-tester/js/utils/RNTesterStatePersister.js
index 751070395d129a..8130a69c38bba9 100644
--- a/packages/rn-tester/js/utils/RNTesterStatePersister.js
+++ b/packages/rn-tester/js/utils/RNTesterStatePersister.js
@@ -11,7 +11,7 @@
 'use strict';
 
 const React = require('react');
-const {AsyncStorage} = require('react-native');
+import {AsyncStorage} from 'react-native';
 
 export type PassProps<State> = {
   state: State,

From 83efc70936702b74578698c5a144b87b5a652714 Mon Sep 17 00:00:00 2001
From: Gant Laborde <gantman@gmail.com>
Date: Tue, 25 Aug 2020 23:35:51 -0500
Subject: [PATCH 2/2] Change default metro.config.js to utilize inline requires

This feature has been in experimental mode since 0.59.0
---
 template/metro.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/template/metro.config.js b/template/metro.config.js
index 13a964217f20a0..e91aba937cd579 100644
--- a/template/metro.config.js
+++ b/template/metro.config.js
@@ -10,7 +10,7 @@ module.exports = {
     getTransformOptions: async () => ({
       transform: {
         experimentalImportSupport: false,
-        inlineRequires: false,
+        inlineRequires: true,
       },
     }),
   },