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 00000000000000..a6e5075de537a8
Binary files /dev/null and b/packages/rn-tester/js/assets/bookmark-filled.png differ
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 00000000000000..a17ef85991fba1
Binary files /dev/null and b/packages/rn-tester/js/assets/bookmark-outline-blue.png differ
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 00000000000000..2b2281e5373db0
Binary files /dev/null and b/packages/rn-tester/js/assets/bookmark-outline-gray.png differ
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 00000000000000..a939dac5740acc
Binary files /dev/null and b/packages/rn-tester/js/assets/bookmark-outline.png differ
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 00000000000000..772111340dc91a
Binary files /dev/null and b/packages/rn-tester/js/assets/bottom-nav-apis-icon-active.png differ
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 00000000000000..29de7b79b6086a
Binary files /dev/null and b/packages/rn-tester/js/assets/bottom-nav-apis-icon-inactive.png differ
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 00000000000000..29d29dff8f2ba1
Binary files /dev/null and b/packages/rn-tester/js/assets/bottom-nav-bookmark-fill.png differ
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 00000000000000..dfe68645aa1ca6
Binary files /dev/null and b/packages/rn-tester/js/assets/bottom-nav-bookmark-outline.png differ
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 00000000000000..31b0427bb776ab
Binary files /dev/null and b/packages/rn-tester/js/assets/bottom-nav-center-box.png differ
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 00000000000000..22c56d70603808
Binary files /dev/null and b/packages/rn-tester/js/assets/bottom-nav-components-icon-active.png differ
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 00000000000000..aa051c06e07f06
Binary files /dev/null and b/packages/rn-tester/js/assets/bottom-nav-components-icon-inactive.png differ
diff --git a/packages/rn-tester/js/assets/documentation.png b/packages/rn-tester/js/assets/documentation.png
new file mode 100644
index 00000000000000..d43e2593969e66
Binary files /dev/null and b/packages/rn-tester/js/assets/documentation.png differ
diff --git a/packages/rn-tester/js/assets/empty.png b/packages/rn-tester/js/assets/empty.png
new file mode 100644
index 00000000000000..c659c6c057486e
Binary files /dev/null and b/packages/rn-tester/js/assets/empty.png differ
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 00000000000000..8fa30d327e6787
Binary files /dev/null and b/packages/rn-tester/js/assets/header-back-button.png differ
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 00000000000000..ac8e5eb99a825f
Binary files /dev/null and b/packages/rn-tester/js/assets/search-icon.png differ
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,