adding RNTester to react-native-improved (#15)

Author: fabOnReact

example/index.js

@@ -1,5 +1,5 @@
 import { AppRegistry } from 'react-native';
-import App from './src/App';
 import { name as appName } from './app.json';
+import RNTesterApp from './src/RNTesterAppShared';
 
-AppRegistry.registerComponent(appName, () => App);
+AppRegistry.registerComponent(appName, () => RNTesterApp);

example/src/App.tsx

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {AppRegistry} from 'react-native';
+
+import RNTesterApp from './RNTesterAppShared';
+
+AppRegistry.registerComponent('RNTesterApp', () => RNTesterApp);
+
+module.exports = RNTesterApp;

example/src/RNTesterApp.android.js

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 type {Node} from 'react';
+
+import {AppRegistry} from 'react-native';
+import React from 'react';
+
+import SnapshotViewIOS from './examples/Snapshot/SnapshotViewIOS.ios';
+import RNTesterModuleContainer from './components/RNTesterModuleContainer';
+import RNTesterList from './utils/RNTesterList';
+import RNTesterApp from './RNTesterAppShared';
+import type {RNTesterModuleInfo} from './types/RNTesterTypes';
+
+AppRegistry.registerComponent('SetPropertiesExampleApp', () =>
+  require('./examples/SetPropertiesExample/SetPropertiesExampleApp'),
+);
+AppRegistry.registerComponent('RootViewSizeFlexibilityExampleApp', () =>
+  require('./examples/RootViewSizeFlexibilityExample/RootViewSizeFlexibilityExampleApp'),
+);
+AppRegistry.registerComponent('RNTesterApp', () => RNTesterApp);
+
+// Register suitable examples for snapshot tests
+RNTesterList.Components.concat(RNTesterList.APIs).forEach(
+  (Example: RNTesterModuleInfo) => {
+    const ExampleModule = Example.module;
+    if (ExampleModule.displayName) {
+      class Snapshotter extends React.Component<{...}> {
+        render(): Node {
+          return (
+            <SnapshotViewIOS>
+              <RNTesterModuleContainer
+                module={ExampleModule}
+                onExampleCardPress={() => {}}
+              />
+            </SnapshotViewIOS>
+          );
+        }
+      }
+
+      AppRegistry.registerComponent(
+        ExampleModule.displayName,
+        () => Snapshotter,
+      );
+    }
+  },
+);
+
+module.exports = RNTesterApp;

example/src/RNTesterApp.ios.js

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 typeof RNTesterApp from './RNTesterAppShared';
+
+declare module.exports: RNTesterApp;

example/src/RNTesterApp.js.flow

@@ -0,0 +1,200 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {RNTesterEmptyBookmarksState} from './components/RNTesterEmptyBookmarksState';
+import RNTesterModuleContainer from './components/RNTesterModuleContainer';
+import RNTesterModuleList from './components/RNTesterModuleList';
+import RNTesterNavBar, {navBarHeight} from './components/RNTesterNavbar';
+import {RNTesterThemeContext, themes} from './components/RNTesterTheme';
+import RNTTitleBar from './components/RNTTitleBar';
+import RNTesterList from './utils/RNTesterList';
+import {
+  RNTesterNavigationActionsType,
+  RNTesterNavigationReducer,
+} from './utils/RNTesterNavigationReducer';
+import {
+  Screens,
+  getExamplesListWithBookmarksAndRecentlyUsed,
+  initialNavigationState,
+} from './utils/testerStateUtils';
+import * as React from 'react';
+import {BackHandler, StyleSheet, View, useColorScheme} from 'react-native';
+
+// RNTester App currently uses in memory storage for storing navigation state
+
+const RNTesterApp = (): React.Node => {
+  const [state, dispatch] = React.useReducer(
+    RNTesterNavigationReducer,
+    initialNavigationState,
+  );
+  const colorScheme = useColorScheme();
+
+  const {
+    activeModuleKey,
+    activeModuleTitle,
+    activeModuleExampleKey,
+    screen,
+    bookmarks,
+    recentlyUsed,
+  } = state;
+
+  const examplesList = React.useMemo(
+    () =>
+      getExamplesListWithBookmarksAndRecentlyUsed({bookmarks, recentlyUsed}),
+    [bookmarks, recentlyUsed],
+  );
+
+  const handleBackPress = React.useCallback(() => {
+    if (activeModuleKey != null) {
+      dispatch({type: RNTesterNavigationActionsType.BACK_BUTTON_PRESS});
+    }
+  }, [dispatch, activeModuleKey]);
+
+  // Setup hardware back button press listener
+  React.useEffect(() => {
+    const handleHardwareBackPress = () => {
+      if (activeModuleKey) {
+        handleBackPress();
+        return true;
+      }
+      return false;
+    };
+
+    BackHandler.addEventListener('hardwareBackPress', handleHardwareBackPress);
+
+    return () => {
+      BackHandler.removeEventListener(
+        'hardwareBackPress',
+        handleHardwareBackPress,
+      );
+    };
+  }, [activeModuleKey, handleBackPress]);
+
+  const handleModuleCardPress = React.useCallback(
+    ({exampleType, key, title}: any) => {
+      dispatch({
+        type: RNTesterNavigationActionsType.MODULE_CARD_PRESS,
+        data: {exampleType, key, title},
+      });
+    },
+    [dispatch],
+  );
+
+  const handleModuleExampleCardPress = React.useCallback(
+    (exampleName: string) => {
+      dispatch({
+        type: RNTesterNavigationActionsType.EXAMPLE_CARD_PRESS,
+        data: {key: exampleName},
+      });
+    },
+    [dispatch],
+  );
+
+  const toggleBookmark = React.useCallback(
+    ({exampleType, key}: any) => {
+      dispatch({
+        type: RNTesterNavigationActionsType.BOOKMARK_PRESS,
+        data: {exampleType, key},
+      });
+    },
+    [dispatch],
+  );
+
+  const handleNavBarPress = React.useCallback(
+    (args: {screen: string}) => {
+      dispatch({
+        type: RNTesterNavigationActionsType.NAVBAR_PRESS,
+        data: {screen: args.screen},
+      });
+    },
+    [dispatch],
+  );
+
+  const theme = colorScheme === 'dark' ? themes.dark : themes.light;
+
+  if (examplesList === null) {
+    return null;
+  }
+
+  const activeModule =
+    activeModuleKey != null ? RNTesterList.Modules[activeModuleKey] : null;
+  const activeModuleExample =
+    activeModuleExampleKey != null
+      ? activeModule?.examples.find(e => e.name === activeModuleExampleKey)
+      : null;
+  const title =
+    activeModuleTitle != null
+      ? activeModuleTitle
+      : screen === Screens.COMPONENTS
+      ? 'Components'
+      : screen === Screens.APIS
+      ? 'APIs'
+      : 'Bookmarks';
+
+  const activeExampleList =
+    screen === Screens.COMPONENTS
+      ? examplesList.components
+      : screen === Screens.APIS
+      ? examplesList.apis
+      : examplesList.bookmarks;
+
+  return (
+    <RNTesterThemeContext.Provider value={theme}>
+      <RNTTitleBar
+        title={title}
+        theme={theme}
+        onBack={activeModule ? handleBackPress : null}
+        documentationURL={activeModule?.documentationURL}
+      />
+      <View
+        style={StyleSheet.compose(styles.container, {
+          backgroundColor: theme.GroupedBackgroundColor,
+        })}>
+        {activeModule != null ? (
+          <RNTesterModuleContainer
+            module={activeModule}
+            example={activeModuleExample}
+            onExampleCardPress={handleModuleExampleCardPress}
+          />
+        ) : screen === Screens.BOOKMARKS &&
+          examplesList.bookmarks.length === 0 ? (
+          <RNTesterEmptyBookmarksState />
+        ) : (
+          <RNTesterModuleList
+            sections={activeExampleList}
+            toggleBookmark={toggleBookmark}
+            handleModuleCardPress={handleModuleCardPress}
+          />
+        )}
+      </View>
+      <View style={styles.bottomNavbar}>
+        <RNTesterNavBar
+          screen={screen || Screens.COMPONENTS}
+          isExamplePageOpen={!!activeModule}
+          handleNavBarPress={handleNavBarPress}
+        />
+      </View>
+    </RNTesterThemeContext.Provider>
+  );
+};
+
+export default RNTesterApp;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  bottomNavbar: {
+    height: navBarHeight,
+  },
+  hidden: {
+    display: 'none',
+  },
+});