Showkase navigation breaks when preview contains a BackHandler (#267)

* Fix #247

* Address comments

* Fix detekt issue

* Generate new screenshots

* Add updated golden copies of screenshots

.github/workflows/android.yml

@@ -136,4 +136,7 @@ jobs:
 #        with:
 #          name: Api${{ matrix.api-level }}
 #          path: sample/screenshots/debug/Api${{ matrix.api-level }}
-#          retention-days: 1
+#          retention-days: 1
+
+
+

sample/src/main/java/com/airbnb/android/showkasesample/Rows.kt

@@ -1,5 +1,6 @@
 package com.airbnb.android.showkasesample
 
+import androidx.activity.compose.BackHandler
 import androidx.compose.material.Text
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
@@ -37,7 +38,8 @@ fun SimpleRow(title: String, subtitle: String) {
     ShowkaseTheme {
         Card(
             shape = RoundedCornerShape(padding1x),
-            modifier = Modifier.fillMaxWidth()
+            modifier = Modifier
+                .fillMaxWidth()
                 .padding(padding2x)
         ) {
             ListItem(text = {
@@ -58,7 +60,8 @@ fun SimpleRow(title: String, subtitle: String) {
                 )
             }, icon = {
                 Column(
-                    modifier = Modifier.width(60.dp)
+                    modifier = Modifier
+                        .width(60.dp)
                         .height(60.dp)
                         .background(color = Color.Gray)
                 ) {}
@@ -71,7 +74,8 @@ fun SimpleRow(title: String, subtitle: String) {
 fun TitleSubtitleThumbnailRow() {
     ShowkaseTheme {
         Card(
-            modifier = Modifier.height(120.dp)
+            modifier = Modifier
+                .height(120.dp)
                 .fillMaxWidth()
                 .padding(padding2x),
             shape = RoundedCornerShape(padding1x)
@@ -95,7 +99,8 @@ fun TitleSubtitleThumbnailRow() {
                     start.linkTo(image.end, margin = padding4x)
                 })
 
-                Column(modifier = Modifier.height(72.dp)
+                Column(modifier = Modifier
+                    .height(72.dp)
                     .width(72.dp)
                     .background(color = Color.Gray)
                     .constrainAs(image) {
@@ -112,7 +117,8 @@ fun TitleSubtitleThumbnailRow() {
 fun BottomLabelRow(title: String, subtitle: String, label: String) {
     ShowkaseTheme {
         Column(
-            modifier = Modifier.fillMaxWidth()
+            modifier = Modifier
+                .fillMaxWidth()
                 .background(color = MaterialTheme.colors.surface)
                 .padding(padding4x)
         ) {
@@ -158,11 +164,15 @@ fun BottomLabelRow(title: String, subtitle: String, label: String) {
 fun ProductCardRow(imageUrl: String, title: String, subtitle: String) {
     ShowkaseTheme {
         Column(
-            modifier = Modifier.fillMaxWidth().background(color = MaterialTheme.colors.surface)
+            modifier = Modifier
+                .fillMaxWidth()
+                .background(color = MaterialTheme.colors.surface)
         ) {
             NetworkImage(
                 imageUrl = imageUrl,
-                modifier = Modifier.fillMaxWidth().height(200.dp)
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(200.dp)
             )
             Text(
                 text = title,
@@ -241,3 +251,14 @@ fun TitleSubtitleThumbnailRowPreview() {
         TitleSubtitleThumbnailRow()
     }
 }
+
+@ShowkaseComposable@ShowkaseComposable("Title Subtitle with Thumbnail and Back Handler", "Rows")
+@Preview
+@Composable
+fun TitleSubtitleThumbnailRowWithBackHandlingPreview() {
+    Column {
+        TitleSubtitleThumbnailRow()
+    }
+    BackHandler(onBack = {  })
+}
+

showkase/src/main/java/com/airbnb/android/showkase/ui/ShowkaseBrowserApp.kt

@@ -2,6 +2,9 @@ package com.airbnb.android.showkase.ui
 
 import android.annotation.SuppressLint
 import android.content.res.Configuration
+import androidx.activity.OnBackPressedDispatcher
+import androidx.activity.OnBackPressedDispatcherOwner
+import androidx.activity.compose.LocalOnBackPressedDispatcherOwner
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.expandHorizontally
 import androidx.compose.animation.expandIn
@@ -35,6 +38,8 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalInspectionMode
+import androidx.compose.ui.platform.LocalLifecycleOwner
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.TextStyle
@@ -69,7 +74,21 @@ internal fun ShowkaseBrowserApp(
     val lightModeConfiguration = Configuration(LocalConfiguration.current).apply {
         uiMode = Configuration.UI_MODE_NIGHT_NO
     }
-    CompositionLocalProvider(LocalConfiguration provides lightModeConfiguration) {
+    val lifecycleOwner = LocalLifecycleOwner.current
+    val backPressedDispatcherOwner = remember {
+        object : OnBackPressedDispatcherOwner {
+            override fun getLifecycle() = lifecycleOwner.lifecycle
+
+            override fun getOnBackPressedDispatcher() = OnBackPressedDispatcher()
+        }
+    }
+    CompositionLocalProvider(
+        LocalConfiguration provides lightModeConfiguration,
+        LocalInspectionMode provides true,
+        // This is added to make sure that the navigation of the ShowkaseBrowser does not break
+        // when one of the previews has a back press handler in the implementation of the component.
+        LocalOnBackPressedDispatcherOwner provides backPressedDispatcherOwner
+    ) {
         val navController = rememberNavController()
         Scaffold(
             drawerContent = null,