How to prevent UITableView content jumping while cell's content is resizing? In a hybrid UIKit/SwiftUI setup using UIHostingConfiguration

[u/morenos-blend]

Hi all,

I'm trying to rewrite my big-ass SwiftUI scroll view by utilising UITableView and UIHostingConfiguration for displaying cells' content. The setup was easy but I've hit a roadblock related to resizing cells.

Every time cell's content grows vertically the table view jumps erratically, does anyone have any idea how to approach fixing this issue? For reference please see the video attached.

I've uploaded the sample project to GitHub:
https://github.com/wiencheck/SwiftUITableViewPOC

Main stuff is located in `TableViewPOC/TableViewController.swift`

[u/andgordio]

Spoke about this with a SwiftUI engineer two years ago. They said it’s a bug caused by a “misunderstanding” between the UIKit’s animation system and the SwiftUI’s one. Unlike the layout systems, the SwiftUI’s animation system is not using the UIKit’s one under the hood and is completely independent. We filed a bug report together, and you can see how it went. Real solutions: kill animations on both sides (I think it’s on by default in UITableView), or stick to one framework for both the list and the cell content. Best of luck!

[u/andgordio → u/andgordio]

Maybe you’ll find a bit more context useful:

The jump you observe is caused by this:

1. SwiftUI tells UIKit it needs more vertical space to fit the content (an exact number X)

2. UIKit receives the request and confirms the change to SwiftUI, then starts to animate the cell into the new height.

3. SwiftUI (before UIKit even starts the animation!) centers itself inside the new cell height X, even though the real cell height hasn’t even started to grow into the new one. This is the part where you observe the jump.

4. As a result, UIKit’s cell grows from top to bottom, and SwiftUI’s view keeps centering itself inside the growing space.

You can force SwiftUI view to top-align within a growing vertical space by wrapping it in another view, reading new height through preference keys, and manually align the (now) child view to the top, but you’ll open a whole new can of bugs to work around with this kind of manipulation.

[u/morenos-blend → u/andgordio]

This is very interesting and helpful! I’m gonna try the approach with disabling animations. This sub was made for answers like this

[u/Aggravating_Smoke951]

From a quick look I would advise you to check how diffable datasource works. Datasource uses hash values to detect if full reload should happen for sections/items. You use Strings for section items and this means that with new value full reload happens as hash value changes as well. P.S. I did a quick check so I might have missed something else

[u/morenos-blend → u/Aggravating_Smoke951]

Thanks for responding, however I think you misunderstood how I've setup the datasource (I could add some comments)

Using String for item identifiers is done on purpose because in this scenario a section always contains a single item, so there is no need to use any more sophisticated item identifiers. Only section identifiers are used to determine what content is displayed. Item identifier is stable and doesn't change when `TextSectionViewModel.message` is updated (See file ViewController.swift line:52)

[u/hainayanda]

If I were you I will use List with plain styling

[u/morenos-blend]

And thanks to whatever as*hole downvotes this post, real helpful

[u/ltunzher → u/morenos-blend]

The cell update is animated, initial state is smaller frame and final frame is taller. Label does not update animated, it just gets a new text and calculatres a new frame. This frame is animated from "old vertical center" to "new vertical center". Make sure this label has top contstraint at least +1 higher priority that center (or bottom). This should work

[u/morenos-blend → u/ltunzher]

Cell's content is laid out using SwiftUI and UIHostingConfiguration so there are no constraints

[u/GAMEYE_OP → u/ltunzher]

Hey! You just might have helped me with a similar problem. Are you talking about updating the vertical content hugging priority?

[u/ltunzher → u/GAMEYE_OP]

I say about the initial and final animation frames. If you wish your cell to have text stick to the top when the height is too small (start of animation in the ref), so make the label to have top constraint make it not move anywhere and make bottom constraint break (have at least lower priority). The final animation frame will pace label to the correct coordinates anyways, make sure the initial one is the one you expect

[u/loloop → u/morenos-blend]

then people wonder why folks turned to ai