Skip to content

RFC: New APIs to customise the DevMenu #925

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

RFC: New APIs to customise the DevMenu #925

wants to merge 9 commits into from
+84 −0

Conversation

j-piasecki
Copy link

@j-piasecki j-piasecki commented Aug 12, 2025 •
edited
Loading

Proposes new APIs that would allow frameworks to customize the DevMenu.

View the rendered RFC

jvenene
jvenene reviewed Aug 12, 2025
View reviewed changes
cortinico
cortinico reviewed Aug 13, 2025
View reviewed changes
gabrieldonadel
gabrieldonadel reviewed Aug 27, 2025
View reviewed changes
gabrieldonadel
gabrieldonadel reviewed Aug 27, 2025
View reviewed changes
This was referenced Aug 29, 2025
Open
Open
coado added a commit to coado/react-native that referenced this pull request Sep 11, 2025
@coado @facebook-github-bot
Android: Add new configuration for DevSupportManager (facebook#53557)
ba4068e 
Summary:
Following the [RFC](react-native-community/discussions-and-proposals#925), this PR adds new `DevMenuConfiguration` object and extends `ReactHost` API for passing settings to the particular `DevSupportManager`.  The `DevMenuConfiguration` includes:

- isDevMenuEnabled,
- isShakeGestureEnabled,
- areKeyboardShortcutsEnabled,

## Changelog:

[ANDROID][ADDED] - Add new configuration for `RCTDevMenu`


Test Plan:
Tested with different configuration on `DevMenuConfiguration`:

<details>
<summary>Click to view code</summary>

```kt
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    fullyDrawnReporter.addReporter()
    maybeUpdateBackgroundColor()

    reactDelegate?.reactHost?.let { reactHost ->
      val devMenuConfiguration = DevMenuConfiguration(
        isDevMenuEnabled = true,
        isShakeGestureEnabled = false,
        areKeyboardShortcutsEnabled = false,
      )
      reactHost.setDevMenuConfiguration(devMenuConfiguration)
    }

    // register insets listener to update margins on the ReactRootView to avoid overlap w/ system
    // bars
    reactDelegate?.reactRootView?.let { rootView ->
      val insetsType: Int =
          WindowInsetsCompat.Type.systemBars() or WindowInsetsCompat.Type.displayCutout()

      val windowInsetsListener = { view: View, windowInsets: WindowInsetsCompat ->
        val insets = windowInsets.getInsets(insetsType)

        (view.layoutParams as FrameLayout.LayoutParams).apply {
          setMargins(insets.left, insets.top, insets.right, insets.bottom)
        }

        WindowInsetsCompat.CONSUMED
      }
      ViewCompat.setOnApplyWindowInsetsListener(rootView, windowInsetsListener)
    }
  }
```

</details>

Reviewed By: vzaidman

Differential Revision: D81684310

Pulled By: coado
coado added a commit to coado/react-native that referenced this pull request Sep 15, 2025
@coado @facebook-github-bot
iOS: Add new configuration for RCTDevMenu (facebook#53505)
56c7a32 
Summary:
Following the [RFC](react-native-community/discussions-and-proposals#925), this PR adds new `RCTDevMenu` configuration  and extends `RCTReactNativeFactory` API for passing it to the particular `RCTHost`.  The `RCTDevMenuConfiguration` includes:

- isDevMenuEnabled,
- isShakeGestureEnabled,
- areKeyboardShortcutsEnabled



## Changelog:

[IOS][ADDED] - Add new configuration for `RCTDevMenu` 

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests


Test Plan:
Tested with different configurations on `RCTDevMenuConfiguration`:

<details>
<summary>Click to view code</summary>

```objc
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.reactNativeFactory = [[RCTReactNativeFactory alloc] initWithDelegate:self];
#if USE_OSS_CODEGEN
  self.dependencyProvider = [RCTAppDependencyProvider new];
#endif
  
  RCTDevMenuConfiguration *devMenuConfiguration = [[RCTDevMenuConfiguration alloc] initWithDevMenuEnabled:true shakeGestureEnabled:false keyboardShortcutsEnabled:false];

  [self.reactNativeFactory setDevMenuConfiguration:devMenuConfiguration];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];

  [self.reactNativeFactory startReactNativeWithModuleName:@"RNTesterApp"
                                                 inWindow:self.window
                                        initialProperties:[self prepareInitialProps]
                                            launchOptions:launchOptions];

  [[UNUserNotificationCenter currentNotificationCenter] setDelegate:self];

  return YES;
}
```

</details>

Differential Revision: D81684275

Pulled By: coado
coado added a commit to coado/react-native that referenced this pull request Sep 15, 2025
@coado @facebook-github-bot
Android: Add new configuration for DevSupportManager (facebook#53557)
d0bd284 
Summary:
Following the [RFC](react-native-community/discussions-and-proposals#925), this PR adds new `DevMenuConfiguration` object and extends `ReactHost` API for passing settings to the particular `DevSupportManager`.  The `DevMenuConfiguration` includes:

- isDevMenuEnabled,
- isShakeGestureEnabled,
- areKeyboardShortcutsEnabled,

## Changelog:

[ANDROID][ADDED] - Add new configuration for `RCTDevMenu`


Test Plan:
Tested with different configuration on `DevMenuConfiguration`:

<details>
<summary>Click to view code</summary>

```kt
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    fullyDrawnReporter.addReporter()
    maybeUpdateBackgroundColor()

    reactDelegate?.reactHost?.let { reactHost ->
      val devMenuConfiguration = DevMenuConfiguration(
        isDevMenuEnabled = true,
        isShakeGestureEnabled = false,
        areKeyboardShortcutsEnabled = false,
      )
      reactHost.setDevMenuConfiguration(devMenuConfiguration)
    }

    // register insets listener to update margins on the ReactRootView to avoid overlap w/ system
    // bars
    reactDelegate?.reactRootView?.let { rootView ->
      val insetsType: Int =
          WindowInsetsCompat.Type.systemBars() or WindowInsetsCompat.Type.displayCutout()

      val windowInsetsListener = { view: View, windowInsets: WindowInsetsCompat ->
        val insets = windowInsets.getInsets(insetsType)

        (view.layoutParams as FrameLayout.LayoutParams).apply {
          setMargins(insets.left, insets.top, insets.right, insets.bottom)
        }

        WindowInsetsCompat.CONSUMED
      }
      ViewCompat.setOnApplyWindowInsetsListener(rootView, windowInsetsListener)
    }
  }
```

</details>

Reviewed By: vzaidman

Differential Revision: D81684310

Pulled By: coado
coado added a commit to coado/react-native that referenced this pull request Sep 15, 2025
@coado @facebook-github-bot
Android: Add new configuration for DevSupportManager (facebook#53557)
e51e0c5 
Summary:
Following the [RFC](react-native-community/discussions-and-proposals#925), this PR adds new `DevMenuConfiguration` object and extends `ReactHost` API for passing settings to the particular `DevSupportManager`.  The `DevMenuConfiguration` includes:

- isDevMenuEnabled,
- isShakeGestureEnabled,
- areKeyboardShortcutsEnabled,

## Changelog:

[ANDROID][ADDED] - Add new configuration for `RCTDevMenu`


Test Plan:
Tested with different configuration on `DevMenuConfiguration`:

<details>
<summary>Click to view code</summary>

```kt
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    fullyDrawnReporter.addReporter()
    maybeUpdateBackgroundColor()

    reactDelegate?.reactHost?.let { reactHost ->
      val devMenuConfiguration = DevMenuConfiguration(
        isDevMenuEnabled = true,
        isShakeGestureEnabled = false,
        areKeyboardShortcutsEnabled = false,
      )
      reactHost.setDevMenuConfiguration(devMenuConfiguration)
    }

    // register insets listener to update margins on the ReactRootView to avoid overlap w/ system
    // bars
    reactDelegate?.reactRootView?.let { rootView ->
      val insetsType: Int =
          WindowInsetsCompat.Type.systemBars() or WindowInsetsCompat.Type.displayCutout()

      val windowInsetsListener = { view: View, windowInsets: WindowInsetsCompat ->
        val insets = windowInsets.getInsets(insetsType)

        (view.layoutParams as FrameLayout.LayoutParams).apply {
          setMargins(insets.left, insets.top, insets.right, insets.bottom)
        }

        WindowInsetsCompat.CONSUMED
      }
      ViewCompat.setOnApplyWindowInsetsListener(rootView, windowInsetsListener)
    }
  }
```

</details>

Reviewed By: vzaidman

Differential Revision: D81684310

Pulled By: coado
coado added a commit to coado/react-native that referenced this pull request Sep 17, 2025
@coado @facebook-github-bot
Android: Add new configuration for DevSupportManager (facebook#53557)
95a2b75 
Summary:
Following the [RFC](react-native-community/discussions-and-proposals#925), this PR adds new `DevMenuConfiguration` object and extends `ReactHost` API for passing settings to the particular `DevSupportManager`.  The `DevMenuConfiguration` includes:

- isDevMenuEnabled,
- isShakeGestureEnabled,
- areKeyboardShortcutsEnabled,

## Changelog:

[ANDROID][ADDED] - Add new configuration for `RCTDevMenu`


Test Plan:
Tested with different configuration on `DevMenuConfiguration`:

<details>
<summary>Click to view code</summary>

```kt
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    fullyDrawnReporter.addReporter()
    maybeUpdateBackgroundColor()

    reactDelegate?.reactHost?.let { reactHost ->
      val devMenuConfiguration = DevMenuConfiguration(
        isDevMenuEnabled = true,
        isShakeGestureEnabled = false,
        areKeyboardShortcutsEnabled = false,
      )
      reactHost.setDevMenuConfiguration(devMenuConfiguration)
    }

    // register insets listener to update margins on the ReactRootView to avoid overlap w/ system
    // bars
    reactDelegate?.reactRootView?.let { rootView ->
      val insetsType: Int =
          WindowInsetsCompat.Type.systemBars() or WindowInsetsCompat.Type.displayCutout()

      val windowInsetsListener = { view: View, windowInsets: WindowInsetsCompat ->
        val insets = windowInsets.getInsets(insetsType)

        (view.layoutParams as FrameLayout.LayoutParams).apply {
          setMargins(insets.left, insets.top, insets.right, insets.bottom)
        }

        WindowInsetsCompat.CONSUMED
      }
      ViewCompat.setOnApplyWindowInsetsListener(rootView, windowInsetsListener)
    }
  }
```

</details>

Differential Revision: D81684310

Pulled By: coado
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@cortinico cortinico cortinico left review comments

@gabrieldonadel gabrieldonadel gabrieldonadel left review comments

+1 more reviewer

@jvenene jvenene jvenene left review comments

Reviewers whose approvals may not affect merge requirements

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@j-piasecki @cortinico @gabrieldonadel @jvenene