feat: add dev menu item for Storybook entry point

Author: zubko

App.tsx

@@ -1,2 +1,27 @@
-import StorybookUIRoot from './.ondevice/Storybook';
-export {StorybookUIRoot as default};
+import React from 'react';
+import {View, Text, SafeAreaView, StyleSheet} from 'react-native';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
+import {MyButton} from './components/Button/Button';
+
+export default () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.safeArea}>
+      <View style={styles.container}>
+        <Text>Application</Text>
+        <MyButton text="Hello world!" color="purple" onPress={() => {}} />
+      </View>
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    paddingTop: 16,
+    gap: 16,
+    alignItems: 'center',
+  },
+});

android/app/build.gradle

@@ -165,6 +165,9 @@ dependencies {
     } else {
         implementation jscFlavor
     }
+
+    // for storybook dev menu
+    debugImplementation 'com.jakewharton:process-phoenix:2.1.2'
 }
 
 apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

android/app/src/main/java/com/react_native_storybook_starter/MainActivity.java

@@ -1,12 +1,28 @@
 package com.react_native_storybook_starter;
 
+import android.os.Bundle;
+
+import com.facebook.react.BuildConfig;
 import com.facebook.react.ReactActivity;
 import com.facebook.react.ReactActivityDelegate;
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
 import com.facebook.react.defaults.DefaultReactActivityDelegate;
 
 public class MainActivity extends ReactActivity {
 
+  @Override
+  protected void onCreate(Bundle savedInstanceState) {
+    // null is for react-native-screens
+    super.onCreate(null);
+
+    if (BuildConfig.DEBUG) {
+      StorybookDevMenuOptionHandler.initDevMenuItem(
+              getApplicationContext(),
+              getReactInstanceManager().getDevSupportManager()
+      );
+    }
+  }
+
   /**
    * Returns the name of the main component registered from JavaScript. This is used to schedule
    * rendering of the component.

android/app/src/main/java/com/react_native_storybook_starter/MainApplication.java

@@ -30,7 +30,11 @@ protected List<ReactPackage> getPackages() {
 
         @Override
         protected String getJSMainModuleName() {
-          return "index";
+          if (BuildConfig.DEBUG) {
+            return StorybookDevMenuPreferencesService.isStorybookEnabled(getApplicationContext()) ? "index.storybook" : "index";
+          } else {
+            return "index";
+          }
         }
 
         @Override

android/app/src/main/java/com/react_native_storybook_starter/StorybookDevMenuOptionHandler.java

@@ -0,0 +1,43 @@
+package com.react_native_storybook_starter;
+
+import android.content.Context;
+
+import com.facebook.react.BuildConfig;
+import com.facebook.react.devsupport.interfaces.DevOptionHandler;
+import com.facebook.react.devsupport.interfaces.DevSupportManager;
+
+import java.lang.reflect.InvocationTargetException;
+import java.lang.reflect.Method;
+
+public class StorybookDevMenuOptionHandler implements DevOptionHandler {
+
+    private final Context mContext;
+
+    public static void initDevMenuItem(Context context, DevSupportManager devSupportManager) {
+        devSupportManager.addCustomDevOption(
+                "Toggle Storybook",
+                new StorybookDevMenuOptionHandler(context)
+        );
+    }
+
+    public StorybookDevMenuOptionHandler(Context context) {
+        mContext = context;
+    }
+
+    @Override
+    public void onOptionSelected() {
+        StorybookDevMenuPreferencesService.toggleStorybookFlag(mContext);
+        if (BuildConfig.DEBUG) {
+            try {
+                // ProcessPhoenix.triggerRebirth(mContext);
+                // calling it using reflection, to include the package only to debug build
+                Class<?> processPhoenixClass = Class.forName("com.jakewharton.processphoenix.ProcessPhoenix");
+                Method method = processPhoenixClass.getMethod("triggerRebirth", Context.class);
+                method.invoke(null, mContext);
+            } catch (ClassNotFoundException | InvocationTargetException | NoSuchMethodException | IllegalAccessException e) {
+                e.printStackTrace();
+            }
+        }
+    }
+
+}

android/app/src/main/java/com/react_native_storybook_starter/StorybookDevMenuPreferencesService.java

@@ -0,0 +1,22 @@
+package com.react_native_storybook_starter;
+
+import android.content.Context;
+import android.content.SharedPreferences;
+import android.preference.PreferenceManager;
+
+public class StorybookDevMenuPreferencesService {
+    private static final String STORYBOOK_ENABLED_KEY = "storybook-enabled-dev-menu-item";
+
+    public static boolean isStorybookEnabled(Context context) {
+        SharedPreferences preferences = PreferenceManager.getDefaultSharedPreferences(context);
+        return preferences.getBoolean(STORYBOOK_ENABLED_KEY, false);
+    }
+
+    public static void toggleStorybookFlag(Context context) {
+        SharedPreferences preferences = PreferenceManager.getDefaultSharedPreferences(context);
+        boolean storybookEnabled = preferences.getBoolean(STORYBOOK_ENABLED_KEY, false);
+        SharedPreferences.Editor editor = preferences.edit();
+        editor.putBoolean(STORYBOOK_ENABLED_KEY, !storybookEnabled);
+        editor.apply();
+    }
+}

index.storybook.js

@@ -0,0 +1,8 @@
+/**
+ * Entry point for Storybook bundle
+ */
+import {AppRegistry} from 'react-native';
+import StorybookUIRoot from './.ondevice/Storybook';
+import {name as appName} from './app.json';
+
+AppRegistry.registerComponent(appName, () => StorybookUIRoot);

ios/RNSStorybookDevMenuModule.h

@@ -0,0 +1,12 @@
+#ifndef RNSStorybookDevMenuModule_h
+#define RNSStorybookDevMenuModule_h
+
+#import <React/RCTBridgeModule.h>
+
+RCT_EXTERN BOOL RNSStorybookDevMenuIsStorybookEnabled(void);
+
+@interface RNSStorybookDevMenuModule : NSObject <RCTBridgeModule>
+
+@end
+
+#endif /* RNSStorybookDevMenuModule_h */

ios/RNSStorybookDevMenuModule.m

@@ -0,0 +1,54 @@
+#import "RNSStorybookDevMenuModule.h"
+
+#if __has_include(<React/RCTDevMenu.h>)
+#import <React/RCTDevMenu.h>
+#endif
+
+#import <React/RCTReloadCommand.h>
+
+static BOOL IsStorybookEnabled = NO;
+
+BOOL RNSStorybookDevMenuIsStorybookEnabled(void) {
+  return IsStorybookEnabled;
+}
+
+@implementation RNSStorybookDevMenuModule {
+#if __has_include(<React/RCTDevMenu.h>)
+  RCTDevMenuItem *_devMenuItem;
+#endif
+}
+
+@synthesize bridge = _bridge;
+
+RCT_EXPORT_MODULE();
+
++ (BOOL)requiresMainQueueSetup {
+  return YES;
+}
+
+- (dispatch_queue_t)methodQueue {
+  return dispatch_get_main_queue();
+}
+
+#if __has_include(<React/RCTDevMenu.h>)
+- (RCTDevMenuItem *)devMenuItem {
+  if (!_devMenuItem) {
+    _devMenuItem = [RCTDevMenuItem buttonItemWithTitleBlock:^NSString *{
+      return @"Toggle Storybook";
+    } handler:^{
+      IsStorybookEnabled = !IsStorybookEnabled;
+      RCTTriggerReloadCommandListeners(@"Toggle Storybook");
+    }];
+  }
+  return _devMenuItem;
+}
+#endif
+
+- (void)setBridge:(RCTBridge *)bridge {
+    _bridge = bridge;
+#if __has_include(<React/RCTDevMenu.h>)
+    [_bridge.devMenu addItem:self.devMenuItem];
+#endif
+}
+
+@end

ios/react_native_storybook_starter.xcodeproj/project.pbxproj

@@ -9,6 +9,7 @@
 /* Begin PBXBuildFile section */
 		00E356F31AD99517003FC87E /* react_native_storybook_starterTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* react_native_storybook_starterTests.m */; };
 		0C80B921A6F3F58F76C31292 /* libPods-react_native_storybook_starter.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5DCACB8F33CDC322A6C60F78 /* libPods-react_native_storybook_starter.a */; };
+		118E6F6629EB114000637371 /* RNSStorybookDevMenuModule.m in Sources */ = {isa = PBXBuildFile; fileRef = 118E6F6429EB114000637371 /* RNSStorybookDevMenuModule.m */; };
 		13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; };
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
@@ -30,6 +31,8 @@
 		00E356EE1AD99517003FC87E /* react_native_storybook_starterTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = react_native_storybook_starterTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
 		00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		00E356F21AD99517003FC87E /* react_native_storybook_starterTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = react_native_storybook_starterTests.m; sourceTree = "<group>"; };
+		118E6F6429EB114000637371 /* RNSStorybookDevMenuModule.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNSStorybookDevMenuModule.m; sourceTree = "<group>"; };
+		118E6F6529EB114000637371 /* RNSStorybookDevMenuModule.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNSStorybookDevMenuModule.h; sourceTree = "<group>"; };
 		13B07F961A680F5B00A75B9A /* react_native_storybook_starter.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = react_native_storybook_starter.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = react_native_storybook_starter/AppDelegate.h; sourceTree = "<group>"; };
 		13B07FB01A68108700A75B9A /* AppDelegate.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; name = AppDelegate.mm; path = react_native_storybook_starter/AppDelegate.mm; sourceTree = "<group>"; };
@@ -92,6 +95,8 @@
 				13B07FB61A68108700A75B9A /* Info.plist */,
 				81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */,
 				13B07FB71A68108700A75B9A /* main.m */,
+				118E6F6529EB114000637371 /* RNSStorybookDevMenuModule.h */,
+				118E6F6429EB114000637371 /* RNSStorybookDevMenuModule.m */,
 			);
 			name = react_native_storybook_starter;
 			sourceTree = "<group>";
@@ -412,6 +417,7 @@
 			isa = PBXSourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				118E6F6629EB114000637371 /* RNSStorybookDevMenuModule.m in Sources */,
 				13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */,
 				13B07FC11A68108700A75B9A /* main.m in Sources */,
 			);