Media & Text - Alignment

[pinarol]

Media & Text block text part is not aligning due to alignment options.

Since text is shorter than media in this case it is expected that it moves:

Expected behaviour:

Text part is aligned similar to web:

[designsimply]

This came up in 13.5 beta testing. Steps to reproduce:

1. Start a new post.
2. Add a Media & Text block with an image and some text.
3. Rotate the device to landscape to see the media and text side-by-side.
4. Try to use the different alignment options showing for the block.

Result: horizontal alignment options don't work in the Media & Text block. It's quite easy to spot on iPad. (26s)
^{Tested with WPiOS 13.5.0.0 beta (TestFlight) on iPad Mini 4 (WiFi) (iPad5,1) iPadOS 13.1.2.}

_{/hat tip @rachelmcr for the report (internal reference: p5T066-136-p2#comment-3658)}

[koke]

I was investigating this on Friday, and what I know so far is that we have code in place to make this work, and that in a way it's doing what's expected. When you align some items vertically you'd expect to see something like this:

However, there is something making the media container and the inner blocks 100% tall, so even if they're actually aligned, there's no visual difference:

I started investigating the nested BlockList because I thought maybe that was problematic. Normally you want to specify a fixed height for a scroll view so its container view is bounded, and it can scroll when the content size is larger than the container:

However, I started a sample project with nested FlatList and it was working fine: https://snack.expo.io/@kokejb/scrollview-flexbox (I'd recommend testing on an iPad)

I noticed that FlatList is smart enough to detect when it's nested, and instead of adding a second ScrollView, it will use the context of the parent one. Our KeyboardAwareFlatList is not that smart and it adds another ScrollView to the hierarchy. I tried replacing it with a FlatList and it was still failing in a slightly different way.

Also, our media container is using ImageBackground and loading images from the network, which might be interfering with the flexbox calculations, as they re-render once they get the image sizes.

I started #1502, which doesn't have much yet, but the sample content is useful for testing all the cases.