Studio BumbleBee "Render Problem" For Compose Preview

Question

I am unable to preview anything in Studio, extending to something as simple as a Text. I get a "Render Error", revealing this stack trace.

java.lang.NoSuchMethodException: com.<packageName>.Navigation_ComponentsKt.<PreviewName>
    at androidx.compose.ui.tooling.CommonPreviewUtils.findComposableMethod(CommonPreviewUtils.kt:78)
    at androidx.compose.ui.tooling.CommonPreviewUtils.invokeComposableViaReflection$ui_tooling_release(CommonPreviewUtils.kt:183)
    at androidx.compose.ui.tooling.ComposeViewAdapter$init$3$1$composable$1.invoke(ComposeViewAdapter.kt:553)
    at androidx.compose.ui.tooling.ComposeViewAdapter$init$3$1$composable$1.invoke(ComposeViewAdapter.kt:551)
    at androidx.compose.ui.tooling.ComposeViewAdapter$init$3$1.invoke(ComposeViewAdapter.kt:590)
    at androidx.compose.ui.tooling.ComposeViewAdapter$init$3$1.invoke(ComposeViewAdapter.kt:546)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
    at androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:215)
    at androidx.compose.ui.tooling.InspectableKt.Inspectable(Inspectable.kt:64)
    at androidx.compose.ui.tooling.ComposeViewAdapter$WrapPreview$1.invoke(ComposeViewAdapter.kt:495)
    at androidx.compose.ui.tooling.ComposeViewAdapter$WrapPreview$1.invoke(ComposeViewAdapter.kt:494)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
    at androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:215)
    at androidx.compose.ui.tooling.ComposeViewAdapter.WrapPreview(ComposeViewAdapter.kt:490)
    at androidx.compose.ui.tooling.ComposeViewAdapter.access$WrapPreview(ComposeViewAdapter.kt:120)
    at androidx.compose.ui.tooling.ComposeViewAdapter$init$3.invoke(ComposeViewAdapter.kt:546)
    at androidx.compose.ui.tooling.ComposeViewAdapter$init$3.invoke(ComposeViewAdapter.kt:543)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
    at androidx.compose.ui.platform.ComposeView.Content(ComposeView.android.kt:384)
    at androidx.compose.ui.platform.AbstractComposeView$ensureCompositionCreated$1.invoke(ComposeView.android.kt:228)
    at androidx.compose.ui.platform.AbstractComposeView$ensureCompositionCreated$1.invoke(ComposeView.android.kt:227)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
    at androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:215)
    at androidx.compose.ui.platform.CompositionLocalsKt.ProvideCommonCompositionLocals(CompositionLocals.kt:148)
    at androidx.compose.ui.platform.AndroidCompositionLocals_androidKt$ProvideAndroidCompositionLocals$3.invoke(AndroidCompositionLocals.android.kt:114)
    at androidx.compose.ui.platform.AndroidCompositionLocals_androidKt$ProvideAndroidCompositionLocals$3.invoke(AndroidCompositionLocals.android.kt:113)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
    at androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:215)
    at androidx.compose.ui.platform.AndroidCompositionLocals_androidKt.ProvideAndroidCompositionLocals(AndroidCompositionLocals.android.kt:106)
    at androidx.compose.ui.platform.WrappedComposition$setContent$1$1$3.invoke(Wrapper.android.kt:162)
    at androidx.compose.ui.platform.WrappedComposition$setContent$1$1$3.invoke(Wrapper.android.kt:161)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
    at androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:215)
    at androidx.compose.ui.platform.WrappedComposition$setContent$1$1.invoke(Wrapper.android.kt:161)
    at androidx.compose.ui.platform.WrappedComposition$setContent$1$1.invoke(Wrapper.android.kt:144)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
    at androidx.compose.runtime.ComposerKt.invokeComposable(Composer.kt:3330)
    at androidx.compose.runtime.ComposerImpl$doCompose$2$5.invoke(Composer.kt:2577)
    at androidx.compose.runtime.ComposerImpl$doCompose$2$5.invoke(Composer.kt:2573)
    at androidx.compose.runtime.SnapshotStateKt.observeDerivedStateRecalculations(SnapshotState.kt:540)
    at androidx.compose.runtime.ComposerImpl.doCompose(Composer.kt:2566)
    at androidx.compose.runtime.ComposerImpl.composeContent$runtime_release(Composer.kt:2517)
    at androidx.compose.runtime.CompositionImpl.composeContent(Composition.kt:476)
    at androidx.compose.runtime.Recomposer.composeInitial$runtime_release(Recomposer.kt:727)
    at androidx.compose.runtime.CompositionImpl.setContent(Composition.kt:432)
    at androidx.compose.ui.platform.WrappedComposition$setContent$1.invoke(Wrapper.android.kt:144)
    at androidx.compose.ui.platform.WrappedComposition$setContent$1.invoke(Wrapper.android.kt:135)
    at androidx.compose.ui.platform.AndroidComposeView.setOnViewTreeOwnersAvailable(AndroidComposeView.android.kt:727)
    at androidx.compose.ui.platform.WrappedComposition.setContent(Wrapper.android.kt:135)
    at androidx.compose.ui.platform.WrappedComposition.onStateChanged(Wrapper.android.kt:187)
    at androidx.lifecycle.LifecycleRegistry$ObserverWithState.dispatchEvent(LifecycleRegistry.java:354)
    at androidx.lifecycle.LifecycleRegistry.addObserver(LifecycleRegistry.java:196)
    at androidx.compose.ui.platform.WrappedComposition$setContent$1.invoke(Wrapper.android.kt:142)
    at androidx.compose.ui.platform.WrappedComposition$setContent$1.invoke(Wrapper.android.kt:135)
    at androidx.compose.ui.platform.AndroidComposeView.onAttachedToWindow(AndroidComposeView.android.kt:814)
    at android.view.View.dispatchAttachedToWindow(View.java:20751)
    at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3490)
    at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3497)
    at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3497)
    at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3497)
    at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3497)
    at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3497)
    at android.view.AttachInfo_Accessor.setAttachInfo(AttachInfo_Accessor.java:57)
    at com.android.layoutlib.bridge.impl.RenderSessionImpl.inflate(RenderSessionImpl.java:362)
    at com.android.layoutlib.bridge.Bridge.createSession(Bridge.java:436)
    at com.android.tools.idea.layoutlib.LayoutLibrary.createSession(LayoutLibrary.java:121)
    at com.android.tools.idea.rendering.RenderTask.createRenderSession(RenderTask.java:714)
    at com.android.tools.idea.rendering.RenderTask.lambda$inflate$7(RenderTask.java:870)
    at com.android.tools.idea.rendering.RenderExecutor$runAsyncActionWithTimeout$2.run(RenderExecutor.kt:187)
    at java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1128)
    at java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:628)
    at java.base/java.lang.Thread.run(Thread.java:834)

This seems to be happening only since two to three updates earlier of the Bumblebee Studio, and it is causing much discomfort.

I just realised while asking that I should probably file this as an issue on the issuetracker, but now I have typed this question, and I AM NOT GOING TO WASTE THIS HARDWORK.

Jokes aside, if anyone has stumbled upon this before, and possibly has a fix, kindly share. Is this a known issue of AGP or some other component? Workarounds are welcome.

Thanks

Answer 1

Step 1: Use latest version

    implementation "androidx.compose.ui:ui-tooling:1.3.3"

Step 2: Set systemUi and showBackground

@Preview(showSystemUi = true, showBackground = true)
@Composable
fun ModifierPreview() {

Text("hello world")
}

Step 3: Run the application for first time.

Without run the application it shows error. So first time run the app next time click refresh.

Answer 2

Quick Fix

Use Android Studio Artic Fox 2020.3.1. It's now stable and supports Compose.

I've tested this Composable and it works fine:

@Preview(showBackground = true)
@Composable
fun Greeting(name: String = "") {
    Text(text = "Hello $name!")
}

Any questions left? Just comment.

See also

If you want to you can enable "Interactive and animation preview tools". It's under Settings -> Enable Interactive and animation preview tools

This allows you to instantly see the changes you made without building. This works only for some some basic types like strings and integers

Answer 3

You have to use different version of androidx tooling in your build.gradle file
implementation "androidx.compose.ui:ui-tooling:1.0.0-rc01"
If it doesn't work try different version which works for you

Answer 4

In my case, I was trying to preview by trying to retrieve data from my ViewModel, which was causing the issue.

I was doing this:

@Preview(showSystemUi = true, showBackground = true)
@Composable
fun Preview() {
  Catalog(
    viewModel.getSomeData() // Don't do this!
  ) 
}

The key challenge here was the use of Hilt for dependency injection. Hilt injects ViewModels at runtime, but Compose previews are generated at compile time, leading to a "view not found" error because the ViewModel isn't available.

The solution is: avoid directly accessing the ViewModel in the preview function. For previews, use static data or mock the necessary data instead.