Bottom tab with search button on the right

[aliencodingjava]

I know we can code this, but not the way iOS is doing it.
I don't have the code, but when I try to make some, it crashes during the animation. For example, when I press the search button in the right tabs, a search bar should animate from right to left, but the whole animation kind of crashes the app.

I tried the same thing a little differently, using a transition to animate when expanding and closing.
Every time, this expand didn't work well; it was like lagging when I expanded because of the calculation of how long it would take to expand to full width or close back to its original size.

Is there another way to make this animation or transition work without lagging (it needs to be very smooth)?

I need to know if anyone has had this problem and how to fix it, or what to use?
I know in Kotlin XML we can use MotionLayout.xml.
In Compose, I'm not very familiar.

I'm away from my PC, so I can't show the code.

Update.

I figured out with a litle help from youtube
@philipplackner

In my case I need something like this
This file below is in folder
JSON5 file (res/raw/expand-colapse.json5)

{
  ConstraintSets: {
    start: {
      glassPanel: {
        width: "spread",
        height: 80,
        start: ['parent', 'start', 16],
        end: ['parent', 'end', 16],
        bottom: ['parent', 'bottom', 16]
      }
    },
    end: {
      glassPanel: {
        width: "spread",
        height: "spread",
        start: ['parent', 'start', 0],
        end: ['parent', 'end', 0],
        top: ['parent', 'top', 0],
        bottom: ['parent', 'bottom', 0]
      }
    }
  },

  Transitions: {
    default: {
      from: 'start',
      to: 'end',
      // optional duration, easing, keyframes etc. can be added later this is only for testing purpose 
    }
  }
}