top of page
  • Writer's pictureDmitry Amelchenko

Funny UX bug

Sometimes you can't rely on assumptions for default UI elements sizing -- in that case, being more explicit is what you need.

Here is a good example.

ListItem from 'react-native-elements' may produce the UX which looks like this:

Notice how Friends List element starts to grow dynamically. Funny, right?

So, to fix this issue, all I had to do is to add explicit height to ListItem style:

<ListItem style={{ height: 70, }}>

And after that is just works.

It was a bit scary at first to see the height of a component changing dynamically on its own. First I tried to see if there is height defined anywhere explicitly -- nope. Then I had a suspicion that it may something to do with:

import { Col, Row, Grid } from "react-native-easy-grid" This is another 3rd party components set I like to use a lot, and in this case I used it inside the ListItem. Removing it completely and replacing it with plain vanilla <View/> elements didn't help.

The only thing that worked is the explicit height prop on the ListItem. It was much easier to fix than I thought after all, but, this leaves me wonder about the overall quality of 3rd party software that is out there, if you can't rely on simple implicit sizing behaviour.



bottom of page