expo-dev-launcher 6.0.7 → 6.0.8

package/android/src/debug/java/expo/modules/devlauncher/compose/screens/SettingsScreen.kt

@@ -4,21 +4,18 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBarsPadding
 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 androidx.compose.ui.unit.sp
-import com.composeunstyled.Icon
-import expo.modules.devlauncher.R
-import expo.modules.devlauncher.compose.DefaultScreenContainer
+import expo.modules.devlauncher.compose.ui.DefaultScreenContainer
 import expo.modules.devlauncher.compose.models.SettingsAction
 import expo.modules.devlauncher.compose.models.SettingsState
+import expo.modules.devlauncher.compose.ui.LauncherIcons
 import expo.modules.devlauncher.services.ApplicationInfo
 import expo.modules.devmenu.compose.newtheme.NewAppTheme
 import expo.modules.devmenu.compose.primitives.Divider
@@ -26,6 +23,7 @@ import expo.modules.devmenu.compose.primitives.NewText
 import expo.modules.devmenu.compose.primitives.RoundedSurface
 import expo.modules.devmenu.compose.primitives.Spacer
 import expo.modules.devmenu.compose.primitives.ToggleSwitch
+import expo.modules.devmenu.compose.ui.MenuIcons
 import expo.modules.devmenu.compose.ui.NewMenuButton
 import expo.modules.devmenu.compose.ui.Section
 import expo.modules.devmenu.compose.ui.SystemSection
@@ -47,10 +45,9 @@ fun SettingsScreen(
         .fillMaxWidth()
         .padding(vertical = NewAppTheme.spacing.`6`)
     ) {
-      Icon(
-        painterResource(R.drawable.settings),
-        contentDescription = "Settings icon",
-        modifier = Modifier.size(48.dp)
+      LauncherIcons.Settings(
+        size = 48.dp,
+        tint = NewAppTheme.colors.icon.quaternary
       )
 
       NewText(
@@ -63,11 +60,9 @@ fun SettingsScreen(
 
     NewMenuButton(
       icon = {
-        Icon(
-          painter = painterResource(R.drawable.show_at_launch),
-          contentDescription = "Show at launch icon",
-          tint = NewAppTheme.colors.icon.tertiary,
-          modifier = Modifier.size(20.dp)
+        LauncherIcons.ShowAtLaunch(
+          size = 20.dp,
+          tint = NewAppTheme.colors.icon.tertiary
         )
       },
       content = {
@@ -85,20 +80,44 @@ fun SettingsScreen(
 
     Spacer(NewAppTheme.spacing.`6`)
 
-    Section.Header("MENU GESTURES")
+    MenuGesturesSection(state, onAction)
 
     Spacer(NewAppTheme.spacing.`3`)
 
+    NewText(
+      "Selected gestures will toggle the developer menu while inside a preview. The menu allows you to reload or return to home and exposes developer tools.",
+      style = NewAppTheme.font.md.merge(
+        lineHeight = 21.sp
+      ),
+      color = NewAppTheme.colors.text.quaternary
+    )
+
+    Spacer(NewAppTheme.spacing.`6`)
+
+    val info = state.applicationInfo
+    SystemSection(
+      appVersion = info?.appVersion,
+      runtimeVersion = (info as? ApplicationInfo.Updates)?.runtimeVersion,
+      fullDataProvider = { info?.toJson() ?: "No application info available" }
+    )
+  }
+}
+
+@Composable
+private fun MenuGesturesSection(state: SettingsState, onAction: (SettingsAction) -> Unit) {
+  Column(
+    verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`3`)
+  ) {
+    Section.Header("MENU GESTURES")
+
     RoundedSurface {
       Column {
         NewMenuButton(
           withSurface = false,
           icon = {
-            Icon(
-              painter = painterResource(R.drawable.pulse),
-              contentDescription = "Shake device icon",
-              tint = NewAppTheme.colors.icon.tertiary,
-              modifier = Modifier.size(20.dp)
+            MenuIcons.Performance(
+              size = 20.dp,
+              tint = NewAppTheme.colors.icon.tertiary
             )
           },
           content = {
@@ -122,11 +141,9 @@ fun SettingsScreen(
         NewMenuButton(
           withSurface = false,
           icon = {
-            Icon(
-              painter = painterResource(R.drawable.inspect),
-              contentDescription = "3 fingers long press icon",
-              tint = NewAppTheme.colors.icon.tertiary,
-              modifier = Modifier.size(20.dp)
+            MenuIcons.Inspect(
+              size = 20.dp,
+              tint = NewAppTheme.colors.icon.tertiary
             )
           },
           content = {
@@ -150,11 +167,9 @@ fun SettingsScreen(
         NewMenuButton(
           withSurface = false,
           icon = {
-            Icon(
-              painter = painterResource(R.drawable.dev_menu_fab_icon),
-              contentDescription = "Action button icon",
-              tint = NewAppTheme.colors.icon.tertiary,
-              modifier = Modifier.size(20.dp)
+            MenuIcons.Fab(
+              size = 20.dp,
+              tint = NewAppTheme.colors.icon.tertiary
             )
           },
           content = {
@@ -171,25 +186,6 @@ fun SettingsScreen(
         )
       }
     }
-
-    Spacer(NewAppTheme.spacing.`3`)
-
-    NewText(
-      "Selected gestures will toggle the developer menu while inside a preview. The menu allows you to reload or return to home and exposes developer tools.",
-      style = NewAppTheme.font.md.merge(
-        lineHeight = 21.sp
-      ),
-      color = NewAppTheme.colors.text.quaternary
-    )
-
-    Spacer(NewAppTheme.spacing.`6`)
-
-    val info = state.applicationInfo
-    SystemSection(
-      appVersion = info?.appVersion,
-      runtimeVersion = (info as? ApplicationInfo.Updates)?.runtimeVersion,
-      fullDataProvider = { info?.toJson() ?: "No application info available" }
-    )
   }
 }
 

package/android/src/debug/java/expo/modules/devlauncher/compose/ui/AccountAvatar.kt

@@ -5,11 +5,8 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import com.composeunstyled.Icon
-import expo.modules.devlauncher.R
 import expo.modules.devlauncher.compose.primitives.AsyncImage
 import expo.modules.devmenu.compose.newtheme.NewAppTheme
 import expo.modules.devmenu.compose.primitives.RoundedSurface
@@ -31,9 +28,8 @@ fun AccountAvatar(
         url = url
       )
     } else {
-      Icon(
-        painter = painterResource(R.drawable.user),
-        contentDescription = "User Icon",
+      LauncherIcons.User(
+        size = size,
         tint = NewAppTheme.colors.icon.tertiary,
         modifier = Modifier
           .background(NewAppTheme.colors.background.element)

package/android/src/debug/java/expo/modules/devlauncher/compose/ui/AccountSelector.kt

@@ -4,17 +4,13 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import com.composeunstyled.Icon
-import expo.modules.devlauncher.R
 import expo.modules.devlauncher.compose.models.Account
 import expo.modules.devmenu.compose.newtheme.NewAppTheme
 import expo.modules.devmenu.compose.primitives.NewText
@@ -61,11 +57,9 @@ fun AccountSelector(
           },
           rightComponent = {
             if (account.isSelected) {
-              Icon(
-                painterResource(R.drawable.check_circle),
-                contentDescription = "Checked",
-                tint = Color(0xFF34C759),
-                modifier = Modifier.size(20.dp)
+              LauncherIcons.CheckCircle(
+                size = 20.dp,
+                tint = Color(0xFF34C759)
               )
             }
           },

package/android/src/debug/java/expo/modules/devlauncher/compose/ui/AppHeader.kt

@@ -10,15 +10,12 @@ import androidx.compose.foundation.layout.size
 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 androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.composeunstyled.Button
-import com.composeunstyled.Icon
 import expo.modules.devlauncher.MeQuery
-import expo.modules.devlauncher.R
 import expo.modules.devlauncher.compose.primitives.AsyncImage
 import expo.modules.devlauncher.services.AppService
 import expo.modules.devlauncher.services.SessionService
@@ -28,7 +25,6 @@ import expo.modules.devmenu.compose.newtheme.NewAppTheme
 import expo.modules.devmenu.compose.primitives.AppIcon
 import expo.modules.devmenu.compose.primitives.NewText
 import expo.modules.devmenu.compose.primitives.RoundedSurface
-import expo.modules.devmenu.compose.primitives.Spacer
 
 @Composable
 fun AppHeader(
@@ -79,7 +75,8 @@ fun AppHeader(
     AppIcon()
 
     Column(
-      verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`1`)
+      verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`1`),
+      modifier = Modifier.weight(1f)
     ) {
       NewText(
         appName,
@@ -94,10 +91,6 @@ fun AppHeader(
       )
     }
 
-    Spacer(
-      modifier = Modifier.weight(1f)
-    )
-
     RoundedSurface(
       borderRadius = NewAppTheme.borderRadius.full,
       color = NewAppTheme.colors.background.element
@@ -114,12 +107,9 @@ fun AppHeader(
               url = profilePhoto
             )
           } else {
-            Icon(
-              painter = painterResource(R.drawable.user),
-              contentDescription = "User Icon",
-              tint = NewAppTheme.colors.icon.tertiary,
-              modifier = Modifier
-                .size(24.dp)
+            LauncherIcons.User(
+              size = 24.dp,
+              tint = NewAppTheme.colors.icon.tertiary
             )
           }
         }

package/android/src/debug/java/expo/modules/devlauncher/compose/ui/AppLoadingErrorDialog.kt

@@ -10,10 +10,10 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-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
@@ -23,12 +23,30 @@ import com.composables.core.DialogState
 import com.composables.core.Scrim
 import com.composables.core.rememberDialogState
 import com.composeunstyled.Button
-import com.composeunstyled.Icon
 import com.composeunstyled.Text
-import expo.modules.devlauncher.R
+import expo.modules.devlauncher.compose.models.HomeAction
+import expo.modules.devlauncher.compose.models.HomeState
 import expo.modules.devmenu.compose.newtheme.NewAppTheme
 import expo.modules.devmenu.compose.primitives.Divider
 import expo.modules.devmenu.compose.primitives.NewText
+import expo.modules.devmenu.compose.ui.MenuIcons
+
+@Composable
+fun rememberAppLoadingErrorDialogState(state: HomeState, onAction: (HomeAction) -> Unit): DialogState {
+  val errorDialogState = rememberDialogState(initiallyVisible = false)
+  LaunchedEffect(state.loadingError) {
+    if (state.loadingError != null) {
+      errorDialogState.visible = true
+    }
+  }
+
+  LaunchedEffect(errorDialogState.visible) {
+    if (!errorDialogState.visible) {
+      onAction(HomeAction.ClearLoadingError)
+    }
+  }
+  return errorDialogState
+}
 
 @Composable
 fun AppLoadingErrorDialog(
@@ -64,9 +82,8 @@ fun AppLoadingErrorDialog(
           Button(onClick = {
             dialogState.visible = false
           }) {
-            Icon(
-              painter = painterResource(R.drawable.x_icon),
-              contentDescription = "Close dialog",
+            MenuIcons.Close(
+              size = 20.dp,
               tint = NewAppTheme.colors.icon.tertiary
             )
           }

package/android/src/debug/java/expo/modules/devlauncher/compose/ui/BottomSheet.kt

@@ -74,7 +74,10 @@ fun BottomSheet(
           Box(
             modifier = Modifier
               .size(width = 60.dp, height = 5.dp)
-              .background(NewAppTheme.colors.border.secondary, shape = RoundedCornerShape(size = 5.dp))
+              .background(
+                NewAppTheme.colors.border.secondary,
+                shape = RoundedCornerShape(size = 5.dp)
+              )
           )
         }
         content()

package/android/src/debug/java/expo/modules/devlauncher/compose/ui/BottomTabBar.kt

@@ -13,12 +13,11 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
 import androidx.navigation.NavController
 import androidx.navigation.NavDestination.Companion.hasRoute
 import androidx.navigation.compose.currentBackStackEntryAsState
-import expo.modules.devlauncher.R
-import expo.modules.devlauncher.compose.Tab
 import expo.modules.devlauncher.compose.routes.Routes
 import expo.modules.devmenu.compose.newtheme.NewAppTheme
 
@@ -40,40 +39,42 @@ fun BottomTabBar(
       val navBackStackEntry by navController.currentBackStackEntryAsState()
       val currentDestination = navBackStackEntry?.destination
 
-      val buttonModifier = Modifier
-        .weight(1f)
-        .fillMaxHeight()
-      val icons = listOf(
-        Tab(
-          label = "Home",
-          icon = painterResource(id = R.drawable.home),
-          screen = Routes.Home
-        ),
-        Tab(
-          label = "Updates",
-          icon = painterResource(id = R.drawable.reload),
-          screen = Routes.Updates
-        ),
-        Tab(
-          label = "Settings",
-          icon = painterResource(id = R.drawable.settings),
-          screen = Routes.Settings
-        )
-      )
-      for (tab in icons) {
-        val isSelected = currentDestination?.hasRoute(tab.screen::class) == true
+      val button = @Composable { label: String,
+                                 icon: @Composable (size: Dp, tint: Color) -> Unit,
+                                 screen: Any ->
+        val isSelected = currentDestination?.hasRoute(screen::class) == true
         BottomTabButton(
-          label = tab.label,
-          icon = tab.icon,
-          modifier = buttonModifier,
+          label = label,
+          icon = icon,
+          modifier = Modifier
+            .weight(1f)
+            .fillMaxHeight(),
           isSelected = isSelected,
           onClick = {
-            navController.navigate(tab.screen) {
+            navController.navigate(screen) {
               popUpTo(navController.graph.id) { inclusive = true }
             }
           }
         )
       }
+
+      button(
+        "Home",
+        { size, tint -> LauncherIcons.Home(size, tint) },
+        Routes.Home
+      )
+
+      button(
+        "Updates",
+        { size, tint -> LauncherIcons.UpdatesNav(size, tint) },
+        Routes.Updates
+      )
+
+      button(
+        "Settings",
+        { size, tint -> LauncherIcons.Settings(size, tint) },
+        Routes.Settings
+      )
     }
   }
 }

package/android/src/debug/java/expo/modules/devlauncher/compose/ui/BottomTabButton.kt

@@ -5,30 +5,28 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 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.draw.clip
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import com.composeunstyled.Icon
 import expo.modules.devmenu.compose.newtheme.NewAppTheme
 import expo.modules.devmenu.compose.primitives.NewText
 
 @Composable
 fun BottomTabButton(
   label: String,
-  icon: Painter,
+  icon: @Composable (size: Dp, tint: Color) -> Unit,
   isSelected: Boolean,
   modifier: Modifier = Modifier,
   onClick: () -> Unit
 ) {
   Column(
-    horizontalAlignment = Alignment.Companion.CenterHorizontally,
+    horizontalAlignment = Alignment.CenterHorizontally,
     verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`1`),
     modifier = modifier
       .clip(
@@ -46,15 +44,13 @@ fun BottomTabButton(
       )
       .padding(vertical = NewAppTheme.spacing.`2`)
   ) {
-    Icon(
-      painter = icon,
-      tint = if (isSelected) {
+    icon(
+      24.dp,
+      if (isSelected) {
         NewAppTheme.colors.icon.info
       } else {
         NewAppTheme.colors.icon.quaternary
-      },
-      contentDescription = "$label Icon",
-      modifier = Modifier.size(24.dp)
+      }
     )
 
     NewText(

package/android/src/debug/java/expo/modules/devlauncher/compose/ui/DefaultScreenContainer.kt

@@ -0,0 +1,23 @@
+package expo.modules.devlauncher.compose.ui
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import expo.modules.devmenu.compose.newtheme.NewAppTheme
+
+@Composable
+fun DefaultScreenContainer(
+  content: @Composable () -> Unit
+) {
+  Box(
+    modifier = Modifier
+      .fillMaxSize()
+      .background(NewAppTheme.colors.background.default)
+      .statusBarsPadding()
+  ) {
+    content()
+  }
+}

package/android/src/debug/java/expo/modules/devlauncher/compose/ui/FetchDevelopmentServersButton.kt

@@ -4,7 +4,6 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -13,12 +12,9 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.composeunstyled.Button
-import com.composeunstyled.Icon
-import expo.modules.devlauncher.R
 import expo.modules.devlauncher.compose.models.HomeAction
 import expo.modules.devlauncher.compose.primitives.CircularProgressBar
 import expo.modules.devmenu.compose.newtheme.NewAppTheme
@@ -86,8 +82,8 @@ fun FetchDevelopmentServersButton(
     ) {
       Row(
         horizontalArrangement = Arrangement.SpaceBetween,
-        verticalAlignment = Alignment.Companion.CenterVertically,
-        modifier = Modifier.Companion
+        verticalAlignment = Alignment.CenterVertically,
+        modifier = Modifier
           .fillMaxWidth()
           .padding(NewAppTheme.spacing.`3`)
       ) {
@@ -102,12 +98,9 @@ fun FetchDevelopmentServersButton(
         if (isFetchingUIState) {
           CircularProgressBar(size = 20.dp)
         } else {
-          Icon(
-            painter = painterResource(R.drawable.download),
-            contentDescription = "Fetch development servers icon",
-            tint = NewAppTheme.colors.icon.quaternary,
-            modifier = Modifier
-              .size(20.dp)
+          LauncherIcons.Download(
+            size = 20.dp,
+            tint = NewAppTheme.colors.icon.quaternary
           )
         }
       }