Update title to example

Summary: Changelog: [Internal] Update title when navigating to an example

Reviewed By: kacieb

Differential Revision: D29545092

fbshipit-source-id: 7ce2f7d978601a5e11e2d60a8fd17be0249ce122

packages/rn-tester/js/RNTesterAppShared.js

@@ -50,6 +50,7 @@ const RNTesterApp = (): React.Node => {
 
   const {
     activeModuleKey,
+    activeModuleTitle,
     activeModuleExampleKey,
     screen,
     bookmarks,
@@ -100,10 +101,10 @@ const RNTesterApp = (): React.Node => {
   }, [activeModuleKey, handleBackPress]);
 
   const handleModuleCardPress = React.useCallback(
-    ({exampleType, key}) => {
+    ({exampleType, key, title}) => {
       dispatch({
         type: RNTesterActionsType.MODULE_CARD_PRESS,
-        data: {exampleType, key},
+        data: {exampleType, key, title},
       });
     },
     [dispatch],
@@ -151,11 +152,14 @@ const RNTesterApp = (): React.Node => {
     activeModuleExampleKey != null
       ? activeModule?.examples.find(e => e.name === activeModuleExampleKey)
       : null;
-  const title = Screens.COMPONENTS
-    ? 'Components'
-    : Screens.APIS
-    ? 'APIs'
-    : 'Bookmarks';
+  const title =
+    activeModuleTitle != null
+      ? activeModuleTitle
+      : screen === Screens.COMPONENTS
+      ? 'Components'
+      : screen === Screens.APIS
+      ? 'APIs'
+      : 'Bookmarks';
 
   const activeExampleList =
     screen === Screens.COMPONENTS

packages/rn-tester/js/components/RNTesterModuleList.js

@@ -39,7 +39,10 @@ const ExampleModuleRow = ({
     <TouchableHighlight
       style={styles.imageViewStyle}
       onPress={() =>
-        toggleBookmark({exampleType: item.exampleType, key: item.key})
+        toggleBookmark({
+          exampleType: item.exampleType,
+          key: item.key,
+        })
       }>
       <Image
         style={styles.imageStyle}
@@ -84,7 +87,11 @@ const ExampleModuleRow = ({
         </View>
       }
       onPress={() =>
-        handlePress({exampleType: item.exampleType, key: item.key})
+        handlePress({
+          exampleType: item.exampleType,
+          key: item.key,
+          title: item.module.title,
+        })
       }
     />
   );

packages/rn-tester/js/types/RNTesterTypes.js

@@ -61,6 +61,7 @@ export type ComponentList = null | {components: string[], apis: string[]};
 
 export type RNTesterState = {
   activeModuleKey: null | string,
+  activeModuleTitle: null | string,
   activeModuleExampleKey: null | string,
   screen: ScreenTypes,
   bookmarks: ComponentList,

packages/rn-tester/js/utils/RNTesterReducer.js

@@ -78,6 +78,7 @@ export const RNTesterReducer = (
       return {
         ...state,
         activeModuleKey: null,
+        activeModuleTitle: null,
         activeModuleExampleKey: null,
         screen: action.data.screen,
       };
@@ -85,6 +86,7 @@ export const RNTesterReducer = (
       return {
         ...state,
         activeModuleKey: action.data.key,
+        activeModuleTitle: action.data.title,
         activeModuleExampleKey: null,
         recentlyUsed: getUpdatedRecentlyUsed({
           exampleType: action.data.exampleType,
@@ -113,6 +115,8 @@ export const RNTesterReducer = (
         activeModuleExampleKey: null,
         activeModuleKey:
           state.activeModuleExampleKey != null ? state.activeModuleKey : null,
+        activeModuleTitle:
+          state.activeModuleExampleKey != null ? state.activeModuleTitle : null,
       };
     default:
       throw new Error(`Invalid action type ${action.type}`);

packages/rn-tester/js/utils/testerStateUtils.js

@@ -26,6 +26,7 @@ export const Screens = {
 
 export const initialState: RNTesterState = {
   activeModuleKey: null,
+  activeModuleTitle: null,
   activeModuleExampleKey: null,
   screen: null,
   bookmarks: null,
@@ -135,6 +136,7 @@ export const getInitialStateFromAsyncStorage = async (
   if (!initialStateString) {
     return {
       activeModuleKey: null,
+      activeModuleTitle: null,
       activeModuleExampleKey: null,
       screen: Screens.COMPONENTS,
       bookmarks: {components: [], apis: []},