expo-dev-menu 7.0.5 → 7.0.6

package/CHANGELOG.md

@@ -10,6 +10,10 @@
 
 ### 💡 Others
 
+## 7.0.6 — 2025-08-28
+
+_This version does not introduce any user-facing changes._
+
 ## 7.0.5 — 2025-08-27
 
 _This version does not introduce any user-facing changes._

package/android/build.gradle

@@ -12,7 +12,7 @@ apply plugin: 'expo-module-gradle-plugin'
 apply plugin: 'org.jetbrains.kotlin.plugin.compose'
 
 group = 'host.exp.exponent'
-version = '7.0.5'
+version = '7.0.6'
 
 expoModule {
   canBePublished false
@@ -22,7 +22,7 @@ android {
   namespace "expo.modules.devmenu"
   defaultConfig {
     versionCode 10
-    versionName '7.0.5'
+    versionName '7.0.6'
   }
   buildFeatures {
     compose true
@@ -77,7 +77,7 @@ dependencies {
 
   implementation("com.composables:core:1.37.0")
 
-  implementation 'io.github.lukmccall:radix-ui-colors:1.0.1'
+  api 'io.github.lukmccall:radix-ui-colors:1.0.1'
 
   // Needed by gesture handler
   implementation "androidx.core:core-ktx:1.6.0"

package/android/src/main/java/expo/modules/devmenu/compose/BindingView.kt

@@ -6,7 +6,8 @@ import android.content.Context
 import android.widget.LinearLayout
 import androidx.compose.ui.platform.ComposeView
 import expo.modules.devmenu.DevMenuManager
-import expo.modules.devmenu.compose.theme.AppTheme
+import expo.modules.devmenu.compose.newtheme.AppTheme
+import expo.modules.devmenu.compose.ui.DevMenuBottomSheet
 import expo.modules.devmenu.fab.MovableFloatingActionButton
 
 @SuppressLint("ViewConstructor")
@@ -18,20 +19,18 @@ class BindingView(context: Context, lazyViewModel: Lazy<DevMenuViewModel>) : Lin
     addView(
       ComposeView(context).apply {
         setContent {
-          expo.modules.devmenu.compose.newtheme.AppTheme {
-            AppTheme {
-              DevMenuScreen(viewModel.state, viewModel::onAction)
-              MovableFloatingActionButton(
-                state = viewModel.state,
-                onRefreshPress = {
-                  lazyViewModel.value.onAction(DevMenuAction.Reload)
-                },
-                onOpenMenuPress = {
-                  // TODO: @behenate For some reason doing onAction(DevMenuAction.Open) only works after a first refresh / opening the menu for the first time
-                  DevMenuManager.openMenu(context as Activity)
-                }
-              )
-            }
+          AppTheme {
+            DevMenuBottomSheet(viewModel.state, viewModel::onAction)
+            MovableFloatingActionButton(
+              state = viewModel.state,
+              onRefreshPress = {
+                lazyViewModel.value.onAction(DevMenuAction.Reload)
+              },
+              onOpenMenuPress = {
+                // TODO: @behenate For some reason doing onAction(DevMenuAction.Open) only works after a first refresh / opening the menu for the first time
+                DevMenuManager.openMenu(context as Activity)
+              }
+            )
           }
         }
       }

package/android/src/main/java/expo/modules/devmenu/compose/DevMenuAction.kt

@@ -7,9 +7,9 @@ sealed class DevMenuAction(val shouldCloseMenu: Boolean = false) {
   object GoHome : DevMenuAction(shouldCloseMenu = true)
   object TogglePerformanceMonitor : DevMenuAction(shouldCloseMenu = true)
   object ToggleElementInspector : DevMenuAction(shouldCloseMenu = true)
-  object ToggleFab : DevMenuAction(shouldCloseMenu = true)
+  object ToggleFab : DevMenuAction(shouldCloseMenu = false)
   object OpenJSDebugger : DevMenuAction(shouldCloseMenu = true)
-  data class ToggleFastRefresh(val newValue: Boolean) : DevMenuAction(shouldCloseMenu = true)
+  data class ToggleFastRefresh(val newValue: Boolean) : DevMenuAction(shouldCloseMenu = false)
   object OpenReactNativeDevMenu : DevMenuAction(shouldCloseMenu = true)
   object FinishOnboarding : DevMenuAction(shouldCloseMenu = false)
 }

package/android/src/main/java/expo/modules/devmenu/compose/newtheme/Colors.kt

@@ -61,6 +61,28 @@ class Colors(private val pallet: RadixPallet<Color>) {
         pallet.blue.`10`
       }
     )
+
+    val secondary = Button(
+      foreground = if (pallet.isDark) {
+        Color.White
+      } else {
+        pallet.gray.`12`
+      },
+      background = if (pallet.isDark) {
+        pallet.gray.`3`
+      } else {
+        Color.White
+      }
+    )
+
+    val tertiary = Button(
+      foreground = if (pallet.isDark) {
+        pallet.blue.`11`
+      } else {
+        pallet.blue.`10`
+      },
+      background = Color.Transparent
+    )
   }
 
   val text = Text()

package/android/src/main/java/expo/modules/devmenu/compose/primitives/AppIcon.kt

@@ -20,8 +20,7 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.core.graphics.drawable.toBitmap
 import expo.modules.devmenu.compose.newtheme.NewAppTheme
-
-private val IsRunningInPreview = Build.DEVICE == "layoutlib"
+import expo.modules.devmenu.compose.utils.IsRunningInPreview
 
 @Composable
 fun AppIcon(

package/android/src/main/java/expo/modules/devmenu/compose/primitives/Divider.kt

@@ -8,12 +8,12 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.Dp
-import expo.modules.devmenu.compose.theme.Theme
+import expo.modules.devmenu.compose.newtheme.NewAppTheme
 
 @Composable
 fun Divider(
   thickness: Dp = Dp.Hairline,
-  color: Color = Theme.colors.border.default
+  color: Color = NewAppTheme.colors.border.default
 ) {
   Canvas(Modifier.fillMaxWidth().height(thickness)) {
     drawLine(

package/android/src/main/java/expo/modules/devmenu/compose/primitives/Spacer.kt

@@ -4,11 +4,11 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.Dp
-import expo.modules.devmenu.compose.theme.Theme
+import expo.modules.devmenu.compose.newtheme.NewAppTheme
 
 @Composable
 fun Spacer(
-  height: Dp = Theme.spacing.medium,
+  height: Dp = NewAppTheme.spacing.`2`,
   modifier: Modifier? = null
 ) {
   androidx.compose.foundation.layout.Spacer(

package/android/src/main/java/expo/modules/devmenu/compose/primitives/Surface.kt

@@ -12,13 +12,13 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.unit.Dp
-import expo.modules.devmenu.compose.theme.Theme
+import expo.modules.devmenu.compose.newtheme.NewAppTheme
 
 @Composable
 fun Surface(
   modifier: Modifier = Modifier,
   shape: Shape = RectangleShape,
-  color: Color = Theme.colors.background.default,
+  color: Color = NewAppTheme.colors.background.default,
   border: BorderStroke? = null,
   content: @Composable () -> Unit
 ) {
@@ -42,8 +42,8 @@ fun Surface(
 @Composable
 fun RoundedSurface(
   modifier: Modifier = Modifier,
-  borderRadius: Dp = Theme.sizing.borderRadius.large,
-  color: Color = Theme.colors.background.default,
+  borderRadius: Dp = NewAppTheme.borderRadius.xl,
+  color: Color = NewAppTheme.colors.background.default,
   border: BorderStroke? = null,
   content: @Composable () -> Unit
 ) {

package/android/src/main/java/expo/modules/devmenu/compose/primitives/Text.kt

@@ -1,6 +1,5 @@
 package expo.modules.devmenu.compose.primitives
 
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.text.BasicText
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -8,12 +7,8 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.tooling.preview.Preview
 import expo.modules.devmenu.compose.newtheme.NewAppTheme
-import expo.modules.devmenu.compose.theme.FontSize
-import expo.modules.devmenu.compose.theme.Theme
 
 @Composable
 fun NewText(
@@ -62,117 +57,3 @@ fun NewText(
     modifier = modifier
   )
 }
-
-@Composable
-fun Text(
-  text: String,
-  fontSize: FontSize = Theme.typography.medium,
-  fontWeight: FontWeight = FontWeight.Normal,
-  color: Color? = null,
-  maxLines: Int = Int.MAX_VALUE,
-  softWrap: Boolean = true,
-  textAlign: TextAlign = TextAlign.Start,
-  modifier: Modifier = Modifier
-) {
-  BasicText(
-    text,
-    maxLines = maxLines,
-    softWrap = softWrap,
-    style = fontSize.font.merge(
-      color = color ?: Theme.colors.text.default,
-      fontFamily = Theme.typography.inter,
-      fontWeight = fontWeight,
-      textAlign = textAlign
-    ),
-    overflow = TextOverflow.Visible,
-    modifier = modifier
-  )
-}
-
-@Composable
-fun Text(
-  text: AnnotatedString,
-  fontSize: FontSize = Theme.typography.medium,
-  fontWeight: FontWeight = FontWeight.Normal,
-  color: Color? = null,
-  maxLines: Int = Int.MAX_VALUE,
-  softWrap: Boolean = true,
-  textAlign: TextAlign = TextAlign.Start,
-  modifier: Modifier = Modifier
-) {
-  BasicText(
-    text,
-    maxLines = maxLines,
-    softWrap = softWrap,
-    style = fontSize.font.merge(
-      color = color ?: Theme.colors.text.default,
-      fontFamily = Theme.typography.inter,
-      fontWeight = fontWeight,
-      textAlign = textAlign
-    ),
-    overflow = TextOverflow.Visible,
-    modifier = modifier
-  )
-}
-
-@Composable
-fun Heading(
-  text: String,
-  fontSize: FontSize = Theme.typography.large,
-  color: Color = Theme.colors.text.default,
-  maxLines: Int = Int.MAX_VALUE,
-  overflow: TextOverflow = TextOverflow.Clip,
-  modifier: Modifier = Modifier
-) {
-  BasicText(
-    text,
-    maxLines = maxLines,
-    overflow = overflow,
-    style = fontSize.font.merge(
-      color = color,
-      fontWeight = FontWeight.SemiBold,
-      fontFamily = Theme.typography.inter
-    ),
-    modifier = modifier
-  )
-}
-
-@Composable
-fun Mono(
-  text: String,
-  fontSize: FontSize = Theme.typography.medium,
-  color: Color? = null,
-  maxLines: Int = Int.MAX_VALUE,
-  modifier: Modifier = Modifier
-) {
-  BasicText(
-    text,
-    maxLines = maxLines,
-    style = fontSize.font.merge(
-      color = color ?: Theme.colors.text.default,
-      fontFamily = Theme.typography.mono
-    ),
-    modifier = modifier
-  )
-}
-
-@Composable
-@Preview(showBackground = true)
-fun TextPreview() {
-  Column {
-    Text("Hello, World!")
-    Text("Hello, World!", fontSize = Theme.typography.size25)
-  }
-}
-
-@Composable
-@Preview(showBackground = true)
-fun HeadingPreview() {
-  Heading("Hello, World!")
-}
-
-@Composable
-@Preview(showBackground = true)
-fun MonoPreview() {
-  Mono("Hello, World!")
-}

package/android/src/main/java/expo/modules/devmenu/compose/primitives/ToggleSwitch.kt

@@ -16,7 +16,6 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import com.composeunstyled.ToggleSwitch
 import expo.modules.devmenu.compose.newtheme.NewAppTheme
-import expo.modules.devmenu.compose.theme.Theme
 
 @Composable
 fun ToggleSwitch(
@@ -38,7 +37,7 @@ fun ToggleSwitch(
   ToggleSwitch(
     toggled = isToggled,
     onToggled = onToggled,
-    shape = RoundedCornerShape(Theme.sizing.borderRadius.full),
+    shape = RoundedCornerShape(NewAppTheme.borderRadius.full),
     backgroundColor = animatedBackgroundColor,
     modifier = Modifier.width(52.dp),
     thumb = {

package/android/src/main/java/expo/modules/devmenu/compose/ripple/RippleFactory.kt

@@ -37,7 +37,7 @@ import androidx.compose.ui.node.currentValueOf
 import androidx.compose.ui.node.observeReads
 import androidx.compose.ui.unit.Dp
 import com.composeunstyled.LocalContentColor
-import expo.modules.devmenu.compose.theme.LocalIsDarkTheme
+import expo.modules.devmenu.compose.newtheme.LocalIsDarkTheme
 
 /**
  * Creates a Ripple using the provided values and values inferred from the theme.

package/android/src/main/java/expo/modules/devmenu/compose/ui/AppInfo.kt

@@ -8,13 +8,10 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.composeunstyled.Button
-import com.composeunstyled.Icon
-import expo.modules.devmenu.R
 import expo.modules.devmenu.compose.DevMenuAction
 import expo.modules.devmenu.compose.DevMenuActionHandler
 import expo.modules.devmenu.compose.newtheme.NewAppTheme
@@ -35,25 +32,25 @@ fun AppInfo(
     horizontalArrangement = Arrangement.Center,
     modifier = modifier
   ) {
-    AppIcon(size = 44.dp)
+    AppIcon()
 
     Spacer(NewAppTheme.spacing.`3`)
 
-    Column {
+    Column(
+      verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`1`)
+    ) {
       NewText(
         appName,
         style = NewAppTheme.font.lg.merge(fontWeight = FontWeight.SemiBold)
       )
 
       if (runtimeVersion != null) {
-        Spacer(NewAppTheme.spacing.`1`)
         NewText(
           "Runtime version: $runtimeVersion",
           style = NewAppTheme.font.md,
           color = NewAppTheme.colors.text.secondary
         )
       } else if (sdkVersion != null) {
-        Spacer(NewAppTheme.spacing.`1`)
         NewText(
           "SDK version: $sdkVersion",
           style = NewAppTheme.font.md,
@@ -74,12 +71,9 @@ fun AppInfo(
         .align(Alignment.CenterVertically)
         .size(36.dp)
     ) {
-      Icon(
-        painter = painterResource(R.drawable.x_close),
-        contentDescription = "Close",
-        tint = NewAppTheme.colors.icon.tertiary,
-        modifier = Modifier
-          .size(16.dp)
+      Icons.Close(
+        size = 16.dp,
+        tint = NewAppTheme.colors.icon.tertiary
       )
     }
   }

package/android/src/main/java/expo/modules/devmenu/compose/{BottomSheet.kt → ui/BottomSheetScaffold.kt}

@@ -1,9 +1,10 @@
-package expo.modules.devmenu.compose
+package expo.modules.devmenu.compose.ui
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -37,7 +38,7 @@ fun rememberBottomSheetState() = rememberModalBottomSheetState(
 )
 
 @Composable
-fun BottomSheet(
+fun BottomSheetScaffold(
   state: ModalBottomSheetState,
   onDismiss: () -> Unit = {},
   header: @Composable () -> Unit = {},
@@ -62,8 +63,10 @@ fun BottomSheet(
         .background(NewAppTheme.colors.background.default)
     ) {
       Column(
-        modifier = Modifier.fillMaxWidth(),
-        horizontalAlignment = Alignment.CenterHorizontally
+        horizontalAlignment = Alignment.CenterHorizontally,
+        modifier = Modifier
+          .fillMaxWidth()
+          .navigationBarsPadding()
       ) {
         Box(modifier = Modifier.padding(NewAppTheme.spacing.`4`)) {
           header()
@@ -75,7 +78,10 @@ fun BottomSheet(
             .fillMaxWidth()
             .verticalScroll(scrollState)
         ) {
-          Box(modifier = Modifier.padding(horizontal = NewAppTheme.spacing.`4`)) {
+          Box(
+            modifier = Modifier
+              .padding(horizontal = NewAppTheme.spacing.`4`)
+          ) {
             content()
           }
         }

package/android/src/main/java/expo/modules/devmenu/compose/ui/BundlerInfo.kt

@@ -2,16 +2,11 @@ package expo.modules.devmenu.compose.ui
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import com.composeunstyled.Icon
-import expo.modules.devmenu.R
 import expo.modules.devmenu.compose.newtheme.NewAppTheme
 import expo.modules.devmenu.compose.primitives.NewText
 import expo.modules.devmenu.compose.utils.copyToClipboard
@@ -43,12 +38,9 @@ fun BundlerInfo(
       }
     },
     rightComponent = {
-      Icon(
-        painter = painterResource(R.drawable.copy),
-        contentDescription = "Copy Bundler URL",
-        tint = NewAppTheme.colors.icon.tertiary,
-        modifier = Modifier
-          .size(20.dp)
+      Icons.Copy(
+        size = 20.dp,
+        tint = NewAppTheme.colors.icon.tertiary
       )
     },
     onClick = {

package/android/src/main/java/expo/modules/devmenu/compose/ui/DevMenuBottomSheet.kt

@@ -0,0 +1,78 @@
+package expo.modules.devmenu.compose.ui
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import com.composables.core.SheetDetent.Companion.Hidden
+import expo.modules.devmenu.compose.DevMenuAction
+import expo.modules.devmenu.compose.DevMenuActionHandler
+import expo.modules.devmenu.compose.DevMenuState
+
+@Composable
+fun DevMenuBottomSheet(
+  state: DevMenuState,
+  onAction: DevMenuActionHandler = {}
+) {
+  val appInfo = state.appInfo ?: return
+  val isOpen = state.isOpen
+  val shouldShowOnboarding = remember(state.isOnboardingFinished) {
+    mutableStateOf(!state.isOnboardingFinished)
+  }
+  val bottomSheetState = rememberBottomSheetState()
+
+  LaunchedEffect(isOpen) {
+    if (isOpen) {
+      bottomSheetState.targetDetent = Peek
+    } else {
+      if (bottomSheetState.currentDetent != Hidden) {
+        bottomSheetState.animateTo(Hidden)
+        shouldShowOnboarding.value = false
+      }
+    }
+  }
+
+  val wrappedOnAction: DevMenuActionHandler = remember {
+    ActionHandler@{ action: DevMenuAction ->
+      val shouldClose = action.shouldCloseMenu
+
+      if (action == DevMenuAction.Close) {
+        // If the action is to close the menu, we want to start the animation and then close the menu
+        bottomSheetState.targetDetent = Hidden
+        return@ActionHandler
+      }
+
+      onAction(action)
+      if (shouldClose) {
+        bottomSheetState.targetDetent = Hidden
+      }
+    }
+  }
+
+  BottomSheetScaffold(
+    state = bottomSheetState,
+    onDismiss = {
+      if (isOpen) {
+        shouldShowOnboarding.value = false
+        // If the menu is open, we want to close it
+        // and not just hide the bottom sheet.
+        onAction(DevMenuAction.Close)
+      }
+    },
+    header = {
+      AppInfo(
+        appName = appInfo.appName,
+        runtimeVersion = appInfo.runtimeVersion,
+        sdkVersion = appInfo.sdkVersion,
+        onAction = wrappedOnAction
+      )
+    }
+  ) {
+    DevMenuScreen(
+      appInfo = appInfo,
+      devToolsSettings = state.devToolsSettings,
+      shouldShowOnboarding = shouldShowOnboarding.value,
+      onAction = wrappedOnAction
+    )
+  }
+}

package/android/src/main/java/expo/modules/devmenu/compose/ui/DevMenuScreen.kt

@@ -0,0 +1,94 @@
+package expo.modules.devmenu.compose.ui
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import expo.modules.devmenu.DevToolsSettings
+import expo.modules.devmenu.compose.DevMenuAction
+import expo.modules.devmenu.compose.DevMenuActionHandler
+import expo.modules.devmenu.compose.DevMenuState
+import expo.modules.devmenu.compose.newtheme.NewAppTheme
+import expo.modules.devmenu.compose.primitives.Spacer
+
+@Composable
+fun DevMenuScreen(
+  appInfo: DevMenuState.AppInfo,
+  devToolsSettings: DevToolsSettings,
+  shouldShowOnboarding: Boolean = false,
+  onAction: DevMenuActionHandler = {}
+) {
+  if (shouldShowOnboarding) {
+    Onboarding(
+      onOnboardingFinished = {
+        onAction(DevMenuAction.FinishOnboarding)
+      }
+    )
+    return
+  }
+
+  Column {
+    BundlerInfo(bundlerIp = appInfo.hostUrl)
+
+    Spacer(NewAppTheme.spacing.`2`)
+
+    Row(
+      horizontalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`2`),
+      verticalAlignment = Alignment.Companion.CenterVertically
+    ) {
+      QuickAction(
+        label = "Reload",
+        icon = { Icons.Reload(size = 20.dp, tint = NewAppTheme.colors.icon.default) },
+        modifier = Modifier.Companion.weight(1f),
+        onClick = { onAction(DevMenuAction.Reload) }
+      )
+
+      QuickAction(
+        label = "Go home",
+        icon = { Icons.Home(size = 20.dp, tint = NewAppTheme.colors.icon.default) },
+        modifier = Modifier.Companion.weight(1f),
+        onClick = { onAction(DevMenuAction.GoHome) }
+      )
+    }
+
+    Spacer(NewAppTheme.spacing.`5`)
+
+    ToolsSection(onAction, devToolsSettings)
+
+    Box(modifier = Modifier.Companion.padding(vertical = NewAppTheme.spacing.`6`)) {
+      Warning("Debugging not working? Try manually reloading first")
+    }
+
+    SystemSection(
+      appInfo.appVersion,
+      appInfo.runtimeVersion,
+      fullDataProvider = { appInfo.toJson() }
+    )
+  }
+}
+
+@Composable
+@Preview(showBackground = false)
+fun DevMenuScreenPreview() {
+  Box(
+    Modifier.Companion
+      .background(NewAppTheme.colors.background.default)
+      .padding(horizontal = NewAppTheme.spacing.`4`)
+  ) {
+    DevMenuScreen(
+      appInfo = DevMenuState.AppInfo(
+        appName = "Expo App",
+        runtimeVersion = "1.0.0",
+        hostUrl = "http://localhost:19006"
+      ),
+      devToolsSettings = DevToolsSettings()
+    )
+  }
+}