Crash Fatal Exception: java.lang.IllegalArgumentException The width of the balloon must bigger than zero.

[kostapostolakis]

Please complete the following information:

• Library Version: com.github.skydoves:balloon-compose:1.6.5
• Affected Device(s):

Describe the Bug:
I have a crash reported in Firebase. I cannot reproduce it. Attached the stacktrace from firebase.
balloon crash stacktrace.txt

I have created this reusable view:

@Composable
fun SimpleTooltip(
    context: Context,
    showTooltip: Boolean = false,
    onTooltipDismiss: (() -> Unit)? = null,
    selectedElement: @Composable () -> Unit = {}
) {
    Balloon(
        balloonContent = {
            // Tooltip UI
        },
        builder = rememberBalloonBuilder {
            setWidth(BalloonSizeSpec.WRAP)
            setHeight(BalloonSizeSpec.WRAP)

            setArrowSize(10)
            setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
            setArrowPosition(0.5f)

            setMarginHorizontal(8)

            setPadding(12)
            setCornerRadius(16f)
            setBackgroundColor(SharedRes.colors.surface.getColor(context))
            setBalloonAnimation(BalloonAnimation.ELASTIC)

            setIsVisibleOverlay(true)
            setOverlayColor(Color(SharedRes.colors.background.getColor(context)).copy(0.8f))
            setOverlayPadding(16f)

            setBalloonHighlightAnimation(BalloonHighlightAnimation.SHAKE)
            setOverlayShape(BalloonOverlayCircle(100f))
            setDismissWhenClicked(true)
        }
    ) { balloonWindow ->
        selectedElement.invoke()

        if (showTooltip) {
            balloonWindow.setOnBalloonDismissListener {
                onTooltipDismiss?.invoke()
            }

            balloonWindow.showAlignBottom()
        }
    }
}

Expected Behavior:
The app should not crash.

If that helps, all the crashes have been mentioned as "Early crashes", that means that they have occurred at the first 2" of the app launch. But the strange thing is that the class name is not from the name of the main Activity. 🤔

[skydoves]

Hey @kostapostolakis, I don't think calling showAlignBottom function directly inside the content, because it can try to display balloon before completely initializing it. Give it a try below or add some delays using the delay(100) method.

        ) { balloonWindow ->

          LaunchedEffect(Unit) {
            balloonWindow.awaitAlignBottom()
          }

[kostapostolakis]

Oh I see. If I call it inside "onBalloonWindowInitialized"?

[kostapostolakis]

Trying this also crashes.

    var balloonWindow: BalloonWindow? by remember { mutableStateOf(null) }

    val builder = rememberBalloonBuilder {
        ...
    }

    Balloon(
        balloonContent = {
            ...
        },
        onBalloonWindowInitialized = { balloonWindow = it },
        builder = builder,
        content = {
            selectedElement.invoke()

            balloonWindow?.showAlignStart()
        }
    )

[skydoves]

@kostapostolakis would you try with the solution below?

      content = { balloonWindow ->
  
          LaunchedEffect(Unit) {
           delay(100) // remove or not
            balloonWindow.showAlignStart()
          }
     }

[kostapostolakis]

Your solution didn't work. Any other ideas?

[skydoves]

Would you able to provide the composable functions inside the balloonContent lambda?

[kostapostolakis]

I use it in many places, having something like this:

IconButton(onClick = { mainGameViewModel.showInstructions() }) {
                    Icon(
                        modifier = Modifier.size(24.dp),
                        painter = painterResource(id = SharedRes.images.outline_info_black_24.drawableResId),
                        contentDescription = null,
                        tint = getKmmColor(id = SharedRes.colors.primaryVariant)
                    )
                }

Or something like this:

FloatingActionButton(
                    backgroundColor = getKmmColor(id = SharedRes.colors.secondary),
                    onClick = { mainGameViewModel.showCharacterDetailsButtonTapped() }
                ) {
                    Icon(
                        modifier = Modifier.size(24.dp),
                        painter = painterResource(mainGameViewModel.getFloatingButtonImageForCharacter().drawableResId),
                        contentDescription = null,
                        tint = getKmmColor(id = SharedRes.colors.onSecondary)
                    )
                }

I tried everywhere to set a fixed size, but it did not work.

[skydoves]

Hey @kostapostolakis, I'm really not sure what really makes this issue, since I rarely see this issue on the crash reports. Would you please make a very simple project that reproduce this issue on your side?

[kostapostolakis]

I cannot reproduce the crash. I can only see it in Firebase.