expo-dev-launcher 5.2.0-canary-20250701-6a945c5 → 5.2.0-canary-20250709-136b77f

package/CHANGELOG.md

@@ -11,6 +11,7 @@
 ### 🐛 Bug fixes
 
 - [iOS] Fix missing CDP headers when using static frameworks. ([#37448](https://github.com/expo/expo/pull/37448) by [@alanjhughes](https://github.com/alanjhughes))
+- [Android] Use same strings in UI as iOS. ([#37786](https://github.com/expo/expo/pull/37786) by [@douglowder](https://github.com/douglowder))
 
 ### 💡 Others
 
@@ -20,6 +21,14 @@
 
 - Added support for React Native 0.80.x. ([#37400](https://github.com/expo/expo/pull/37400) by [@gabrieldonadel](https://github.com/gabrieldonadel))
 
+## 5.1.16 - 2025-07-03
+
+_This version does not introduce any user-facing changes._
+
+## 5.1.15 - 2025-07-02
+
+_This version does not introduce any user-facing changes._
+
 ## 5.1.14 - 2025-06-26
 
 ### 🐛 Bug fixes

package/android/build.gradle

@@ -20,13 +20,13 @@ expoModule {
 }
 
 group = "host.exp.exponent"
-version = "5.2.0-canary-20250701-6a945c5"
+version = "5.2.0-canary-20250709-136b77f"
 
 android {
   namespace "expo.modules.devlauncher"
   defaultConfig {
     versionCode 9
-    versionName "5.2.0-canary-20250701-6a945c5"
+    versionName "5.2.0-canary-20250709-136b77f"
   }
 
   buildTypes {

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

@@ -2,28 +2,16 @@ package expo.modules.devlauncher.compose
 
 import android.content.Context
 import android.widget.LinearLayout
-import androidx.compose.runtime.collectAsState
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.remember
 import androidx.compose.ui.platform.ComposeView
-import expo.modules.devmenu.AppInfo
 import expo.modules.devmenu.compose.theme.AppTheme
 
-class BindingView(context: Context, val viewModel: DevLauncherViewModel) : LinearLayout(context) {
+class BindingView(context: Context) : LinearLayout(context) {
   init {
     addView(
       ComposeView(context).apply {
         setContent {
           AppTheme {
-            val runningPackager by viewModel.packagerService.runningPackagers.collectAsState()
-            val nativeAppInfo = remember { AppInfo.getNativeAppInfo(context) }
-            DevLauncherBottomTabsNavigator(
-              DevLauncherState(
-                appName = nativeAppInfo.appName,
-                runningPackagers = runningPackager,
-                onAction = viewModel::onAction
-              )
-            )
+            DevLauncherBottomTabsNavigator()
           }
         }
       }

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

@@ -14,21 +14,15 @@ import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
 import expo.modules.devlauncher.compose.primitives.DefaultScaffold
-import expo.modules.devlauncher.compose.screens.HomeScreen
-import expo.modules.devlauncher.compose.screens.Profile
-import expo.modules.devlauncher.compose.screens.SettingsScreen
+import expo.modules.devlauncher.compose.routes.Home
+import expo.modules.devlauncher.compose.routes.HomeRoute
+import expo.modules.devlauncher.compose.routes.ProfileRoute
+import expo.modules.devlauncher.compose.routes.Settings
+import expo.modules.devlauncher.compose.routes.SettingsRoute
 import expo.modules.devlauncher.compose.ui.BottomTabBar
 import expo.modules.devlauncher.compose.ui.Full
 import expo.modules.devlauncher.compose.ui.rememberBottomSheetState
-import expo.modules.devlauncher.services.PackagerInfo
 import expo.modules.devmenu.compose.theme.Theme
-import kotlinx.serialization.Serializable
-
-@Serializable
-object Home
-
-@Serializable
-object Settings
 
 @Composable
 fun DefaultScreenContainer(
@@ -52,16 +46,8 @@ data class Tab(
   val screen: Any
 )
 
-data class DevLauncherState(
-  val appName: String = "BareExpo",
-  val runningPackagers: Set<PackagerInfo> = emptySet<PackagerInfo>(),
-  val onAction: DevLauncherActionHandler = {}
-)
-
 @Composable
-fun DevLauncherBottomTabsNavigator(
-  state: DevLauncherState
-) {
+fun DevLauncherBottomTabsNavigator() {
   val navController = rememberNavController()
   val bottomSheetState = rememberBottomSheetState()
 
@@ -78,10 +64,14 @@ fun DevLauncherBottomTabsNavigator(
         ExitTransition.None
       }
     ) {
-      composable<Home> { DefaultScreenContainer { HomeScreen(state, onProfileClick = { bottomSheetState.jumpTo(Full) }) } }
-      composable<Settings> { DefaultScreenContainer { SettingsScreen() } }
+      composable<Home> {
+        HomeRoute(onProfileClick = { bottomSheetState.jumpTo(Full) })
+      }
+      composable<Settings> {
+        SettingsRoute()
+      }
     }
   }
 
-  Profile(bottomSheetState)
+  ProfileRoute(bottomSheetState)
 }

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

@@ -0,0 +1,84 @@
+package expo.modules.devlauncher.compose
+
+import android.util.Log
+import androidx.compose.runtime.mutableStateOf
+import androidx.core.net.toUri
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import expo.modules.devlauncher.DevLauncherController
+import expo.modules.devlauncher.MeQuery
+import expo.modules.devlauncher.services.HttpClientService
+import expo.modules.devlauncher.services.PackagerInfo
+import expo.modules.devlauncher.services.PackagerService
+import expo.modules.devlauncher.services.SessionService
+import expo.modules.devlauncher.services.UserState
+import expo.modules.devlauncher.services.inject
+import kotlinx.coroutines.flow.launchIn
+import kotlinx.coroutines.flow.onEach
+import kotlinx.coroutines.launch
+
+sealed interface HomeAction {
+  class OpenApp(val url: String) : HomeAction
+}
+
+typealias HomeActionHandler = (HomeAction) -> Unit
+
+data class HomeState(
+  val appName: String = "BareExpo",
+  val runningPackagers: Set<PackagerInfo> = emptySet(),
+  val currentAccount: MeQuery.Account? = null
+)
+
+class HomeViewModel() : ViewModel() {
+  val httpClientService = inject<HttpClientService>()
+  val devLauncherController = inject<DevLauncherController>()
+  val sessionService = inject<SessionService>()
+
+  val packagerService = PackagerService(httpClientService.httpClient, viewModelScope)
+
+  private var _state = mutableStateOf(
+    HomeState(
+      runningPackagers = packagerService.runningPackagers.value,
+      currentAccount = when (val userState = sessionService.user.value) {
+        UserState.Fetching, UserState.LoggedOut -> null
+        is UserState.LoggedIn -> userState.selectedAccount
+      }
+    )
+  )
+
+  val state
+    get() = _state.value
+
+  init {
+    packagerService.runningPackagers.onEach { newPackagers ->
+      _state.value = _state.value.copy(
+        runningPackagers = newPackagers
+      )
+    }.launchIn(viewModelScope)
+
+    sessionService.user.onEach { newUser ->
+      when (newUser) {
+        UserState.Fetching, UserState.LoggedOut -> _state.value = _state.value.copy(
+          currentAccount = null
+        )
+
+        is UserState.LoggedIn -> _state.value = _state.value.copy(
+          currentAccount = newUser.selectedAccount
+        )
+      }
+    }.launchIn(viewModelScope)
+  }
+
+  fun onAction(action: HomeAction) {
+    when (action) {
+      is HomeAction.OpenApp ->
+        viewModelScope.launch {
+          try {
+            devLauncherController.loadApp(action.url.toUri(), mainActivity = null)
+          } catch (e: Exception) {
+            Log.e("DevLauncher", "Failed to open app: ${action.url}", e)
+          }
+        }
+    }
+  }
+}

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

@@ -2,39 +2,39 @@ package expo.modules.devlauncher.compose
 
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
-import expo.modules.devlauncher.services.ApolloClientService
 import expo.modules.devlauncher.services.SessionService
+import expo.modules.devlauncher.services.UserState
 import expo.modules.devlauncher.services.inject
-import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.asStateFlow
 import kotlinx.coroutines.flow.launchIn
 import kotlinx.coroutines.flow.onEach
 import kotlinx.coroutines.flow.update
-import kotlinx.coroutines.launch
 
-sealed interface ProfileState {
-  data class Account(
-    val name: String,
-    val avatar: String?
-  )
+data class Account(
+  val id: String,
+  val name: String,
+  val avatar: String?,
+  val isSelected: Boolean = false
+)
 
+sealed interface ProfileState {
   class LoggedIn(
-    val isLoading: Boolean = true,
     val accounts: List<Account> = emptyList()
   ) : ProfileState
 
+  object Fetching : ProfileState
   object LoggedOut : ProfileState
 }
 
 class ProfileViewModel : ViewModel() {
   sealed interface Action {
     class LogIn(val sessionSecret: String) : Action
+    class SwitchAccount(val account: Account) : Action
     object SignOut : Action
   }
 
-  val sessionSession = inject<SessionService>()
-  val apolloClientService = inject<ApolloClientService>()
+  val session = inject<SessionService>()
 
   private val _state = MutableStateFlow<ProfileState>(ProfileState.LoggedOut)
 
@@ -42,54 +42,40 @@ class ProfileViewModel : ViewModel() {
     get() = _state.asStateFlow()
 
   init {
-    sessionSession.session.onEach { newSession ->
-      if (newSession != null) {
-        fetchMe()
-        _state.update {
-          ProfileState.LoggedIn()
+    session.user.onEach { newUserState ->
+      when (newUserState) {
+        UserState.LoggedOut -> _state.update { ProfileState.LoggedOut }
+        UserState.Fetching -> _state.update { ProfileState.Fetching }
+        is UserState.LoggedIn -> _state.update {
+          ProfileState.LoggedIn(
+            accounts = newUserState.data.meUserActor?.accounts?.map { account ->
+              Account(
+                id = account.id,
+                name = account.name,
+                avatar = account.ownerUserActor?.profilePhoto,
+                isSelected = account.id == newUserState.selectedAccount?.id
+              )
+            } ?: emptyList()
+          )
         }
-      } else {
-        _state.update { ProfileState.LoggedOut }
       }
     }
       .launchIn(viewModelScope)
   }
 
-  private fun fetchMe() {
-    viewModelScope.launch(Dispatchers.IO) {
-      val me = apolloClientService.fetchMe()
-      _state.update { prevState ->
-        // User logged out in the meantime, we can ignore the result
-        if (prevState is ProfileState.LoggedOut) {
-          return@update prevState
-        }
-
-        val accounts = me.data?.meUserActor?.accounts?.map {
-          ProfileState.Account(
-            name = it.name,
-            avatar = it.ownerUserActor?.profilePhoto
-          )
-        } ?: emptyList()
-
-        ProfileState.LoggedIn(
-          isLoading = false,
-          accounts = accounts
-        )
-      }
-    }
-  }
-
   fun onAction(action: Action) {
     when (action) {
       is Action.LogIn -> {
-        sessionSession.setSession(
+        session.setSession(
           Session(action.sessionSecret)
         )
       }
 
       Action.SignOut -> {
-        sessionSession.setSession(null)
+        session.setSession(null)
       }
+
+      is Action.SwitchAccount -> session.switchAccount(action.account.id)
     }
   }
 }

package/android/src/debug/java/expo/modules/devlauncher/compose/primitives/Accordion.kt

@@ -91,7 +91,7 @@ fun Accordion(
 @Composable
 @Preview(showBackground = true, heightDp = 200)
 fun AccordionVariantPreview() {
-  Accordion(text = "Enter URL") {
+  Accordion(text = "Enter URL manually") {
     Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisl interdum, mattis purus a, consequat ipsum. Aliquam sem mauris, egestas a elit a, lacinia efficitur nisi. Maecenas scelerisque erat nisi, ac interdum mauris volutpat vel. Proin sed lectus at purus interdum porta. Ut mollis feugiat dignissim.")
   }
 }

package/android/src/debug/java/expo/modules/devlauncher/compose/primitives/Asyncimage.kt

@@ -0,0 +1,40 @@
+package expo.modules.devlauncher.compose.primitives
+
+import androidx.compose.foundation.Image
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.graphics.ImageBitmap
+import androidx.compose.ui.graphics.asImageBitmap
+import expo.modules.devlauncher.services.ImageLoaderService
+import expo.modules.devlauncher.services.inject
+import kotlinx.coroutines.launch
+
+@Composable
+fun AsyncImage(
+  url: String
+) {
+  val imageLoaderService = inject<ImageLoaderService>()
+  val scope = rememberCoroutineScope()
+  var imageBitmap by remember { mutableStateOf<ImageBitmap?>(null) }
+
+  LaunchedEffect(url) {
+    scope.launch {
+      val image = imageLoaderService.loadImage(url)
+      if (image != null) {
+        imageBitmap = image.asImageBitmap()
+      }
+    }
+  }
+
+  imageBitmap?.let {
+    Image(
+      bitmap = it,
+      contentDescription = url
+    )
+  }
+}

package/android/src/debug/java/expo/modules/devlauncher/compose/routes/Home.kt

@@ -0,0 +1,23 @@
+package expo.modules.devlauncher.compose.routes
+
+import androidx.compose.runtime.Composable
+import androidx.lifecycle.viewmodel.compose.viewModel
+import expo.modules.devlauncher.compose.DefaultScreenContainer
+import expo.modules.devlauncher.compose.HomeViewModel
+import expo.modules.devlauncher.compose.screens.HomeScreen
+import kotlinx.serialization.Serializable
+
+@Serializable
+object Home
+
+@Composable
+fun HomeRoute(onProfileClick: () -> Unit) {
+  DefaultScreenContainer {
+    val viewModel = viewModel<HomeViewModel>()
+    HomeScreen(
+      state = viewModel.state,
+      onAction = viewModel::onAction,
+      onProfileClick = onProfileClick
+    )
+  }
+}

package/android/src/debug/java/expo/modules/devlauncher/compose/{screens → routes}/Profile.kt

@@ -1,4 +1,4 @@
-package expo.modules.devlauncher.compose.screens
+package expo.modules.devlauncher.compose.routes
 
 import androidx.activity.compose.rememberLauncherForActivityResult
 import androidx.compose.runtime.Composable
@@ -18,7 +18,7 @@ import expo.modules.devlauncher.compose.ui.ProfileLayout
 import expo.modules.devlauncher.compose.ui.SignUp
 
 @Composable
-fun Profile(
+fun ProfileRoute(
   bottomSheetState: ModalBottomSheetState,
   viewModel: ProfileViewModel = viewModel()
 ) {
@@ -44,6 +44,9 @@ fun Profile(
             accounts = state.accounts,
             onSignOut = {
               viewModel.onAction(ProfileViewModel.Action.SignOut)
+            },
+            onClick = { account ->
+              viewModel.onAction(ProfileViewModel.Action.SwitchAccount(account))
             }
           )
         }
@@ -58,6 +61,9 @@ fun Profile(
             }
           )
         }
+
+        ProfileState.Fetching -> {
+        }
       }
     }
   }

package/android/src/debug/java/expo/modules/devlauncher/compose/routes/Settings.kt

@@ -0,0 +1,16 @@
+package expo.modules.devlauncher.compose.routes
+
+import androidx.compose.runtime.Composable
+import expo.modules.devlauncher.compose.DefaultScreenContainer
+import expo.modules.devlauncher.compose.screens.SettingsScreen
+import kotlinx.serialization.Serializable
+
+@Serializable
+object Settings
+
+@Composable
+fun SettingsRoute() {
+  DefaultScreenContainer {
+    SettingsScreen()
+  }
+}

package/android/src/debug/java/expo/modules/devlauncher/compose/screens/{Home.kt → HomeScreen.kt}

@@ -19,8 +19,8 @@ import androidx.compose.ui.tooling.preview.Preview
 import com.composeunstyled.Button
 import com.composeunstyled.TextField
 import expo.modules.devlauncher.R
-import expo.modules.devlauncher.compose.DevLauncherAction
-import expo.modules.devlauncher.compose.DevLauncherState
+import expo.modules.devlauncher.compose.HomeAction
+import expo.modules.devlauncher.compose.HomeState
 import expo.modules.devlauncher.compose.primitives.Accordion
 import expo.modules.devlauncher.compose.ui.AppHeader
 import expo.modules.devlauncher.compose.ui.RunningAppCard
@@ -33,10 +33,18 @@ import expo.modules.devmenu.compose.primitives.Text
 import expo.modules.devmenu.compose.theme.Theme
 
 @Composable
-fun HomeScreen(state: DevLauncherState, onProfileClick: () -> Unit) {
+fun HomeScreen(
+  state: HomeState,
+  onAction: (HomeAction) -> Unit,
+  onProfileClick: () -> Unit
+) {
   Column {
     ScreenHeaderContainer(modifier = Modifier.padding(Theme.spacing.medium)) {
-      AppHeader(state.appName, onProfileClick = onProfileClick)
+      AppHeader(
+        appName = state.appName,
+        currentAccount = state.currentAccount,
+        onProfileClick = onProfileClick
+      )
     }
 
     Column(
@@ -49,7 +57,7 @@ fun HomeScreen(state: DevLauncherState, onProfileClick: () -> Unit) {
         Spacer(Theme.spacing.small)
 
         SectionHeader(
-          "Development",
+          "Development servers",
           leftIcon = {
             Image(
               painter = painterResource(R.drawable._expodevclientcomponents_assets_terminalicon),
@@ -73,12 +81,12 @@ fun HomeScreen(state: DevLauncherState, onProfileClick: () -> Unit) {
             RunningAppCard(
               appIp = packager.url
             ) {
-              state.onAction(DevLauncherAction.OpenApp(packager.url))
+              onAction(HomeAction.OpenApp(packager.url))
             }
             Divider()
           }
 
-          Accordion("Enter URL", initialState = false) {
+          Accordion("Enter URL manually", initialState = false) {
             val url = remember { mutableStateOf("") }
 
             Column {
@@ -89,7 +97,7 @@ fun HomeScreen(state: DevLauncherState, onProfileClick: () -> Unit) {
                 onValueChange = { newValue ->
                   url.value = newValue
                 },
-                placeholder = "http://10.0.2.2:801",
+                placeholder = "http://10.0.2.2:8081",
                 textStyle = Theme.typography.medium.font,
                 maxLines = 1,
                 modifier = Modifier
@@ -109,7 +117,7 @@ fun HomeScreen(state: DevLauncherState, onProfileClick: () -> Unit) {
               Spacer(Theme.spacing.tiny)
 
               Button(onClick = {
-                state.onAction(DevLauncherAction.OpenApp(url.value))
+                onAction(HomeAction.OpenApp(url.value))
               }, modifier = Modifier.fillMaxWidth()) {
                 Row(modifier = Modifier.padding(vertical = Theme.spacing.small)) {
                   Text("Connect")
@@ -130,5 +138,5 @@ fun HomeScreen(state: DevLauncherState, onProfileClick: () -> Unit) {
 @Preview(showBackground = true)
 @Composable
 fun HomeScreenPreview() {
-  HomeScreen(state = DevLauncherState(), onProfileClick = {})
+  HomeScreen(state = HomeState(), onAction = {}, onProfileClick = {})
 }

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

@@ -0,0 +1,37 @@
+package expo.modules.devlauncher.compose.ui
+
+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 com.composables.core.Icon
+import expo.modules.devlauncher.R
+import expo.modules.devlauncher.compose.primitives.AsyncImage
+import expo.modules.devmenu.compose.primitives.RoundedSurface
+import expo.modules.devmenu.compose.theme.Theme
+
+@Composable
+fun AccountAvatar(
+  url: String?,
+  size: Dp = Theme.sizing.icon.medium,
+  modifier: Modifier = Modifier
+) {
+  RoundedSurface(
+    borderRadius = Theme.sizing.borderRadius.full,
+    modifier = Modifier.size(size).then(modifier)
+  ) {
+    if (url != null) {
+      AsyncImage(
+        url = url
+      )
+    } else {
+      Icon(
+        painterResource(R.drawable._expodevclientcomponents_assets_buildingicon),
+        contentDescription = "Avatar",
+        modifier = Modifier.padding(Theme.spacing.micro)
+      )
+    }
+  }
+}

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

@@ -1,27 +1,60 @@
 package expo.modules.devlauncher.compose.ui
 
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
-import com.apollographql.apollo.api.label
-import expo.modules.devlauncher.compose.ProfileState
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import com.composables.core.Icon
+import com.composeunstyled.Button
+import expo.modules.devlauncher.R
+import expo.modules.devlauncher.compose.Account
+import expo.modules.devmenu.compose.primitives.Divider
 import expo.modules.devmenu.compose.primitives.RoundedSurface
+import expo.modules.devmenu.compose.primitives.RowLayout
 import expo.modules.devmenu.compose.primitives.Spacer
+import expo.modules.devmenu.compose.primitives.Text
 import expo.modules.devmenu.compose.theme.Theme
-import expo.modules.devmenu.compose.ui.MenuButton
 
 @Composable
 fun AccountSelector(
-  accounts: List<ProfileState.Account>,
+  accounts: List<Account>,
+  onClick: (Account) -> Unit = {},
   onSignOut: () -> Unit = {}
 ) {
   Column {
     RoundedSurface {
       Column {
-        for (account in accounts) {
-          MenuButton(
-
-            label = account.name
-          )
+        for ((index, account) in accounts.withIndex()) {
+          Button(
+            onClick = { onClick(account) },
+            enabled = !account.isSelected
+          ) {
+            val avatar = @Composable {
+              RoundedSurface(borderRadius = Theme.sizing.borderRadius.full) {
+                AccountAvatar(
+                  account.avatar
+                )
+              }
+            }
+            RowLayout(
+              modifier = Modifier.padding(Theme.spacing.small),
+              leftComponent = avatar,
+              rightComponent = {
+                if (account.isSelected) {
+                  Icon(
+                    painterResource(R.drawable._expodevclientcomponents_assets_checkicon),
+                    contentDescription = "Checked"
+                  )
+                }
+              }
+            ) {
+              Text(account.name)
+            }
+          }
+          if (index < accounts.size - 1) {
+            Divider()
+          }
         }
       }
     }