ZupIT/beagle

ListView and GridView padding doesn't work in Android platform

Opened this issue · 1 comments

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

Does padding work in gridView (or listView)?

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

{
                    "_beagleComponent_": "beagle:gridView", (or listview)
                    "direction": "HORIZONTAL",
                    "style": {
                        "backgroundColor": "#0000ff",
                        "padding": {
                            "all": {
                                "value": 40,
                                "type": "REAL"
                            }
                        }
                    }
                    ... the template and other layout
}

Expected Results

Padding should be applied to the inner part of the view.

observed in Android: Nothing happen to the inner part of the view.
observed in React Web: padding was added.
(I don't have iOS but I was told it works)

Hello @brianchu. Although this information is nowhere to be found in the documentation, the ListView's style doesn't support padding. I just tested it on iOS and, just like on Android, it doesn't apply padding.

The reason why it works on React Web is because whenever a style property is not directly implemented by the component, Beagle uses it as plain css.

Recommendations:

  • Use padding in the contents of your list view
  • Or, if you don't need to scroll the List View's content, use padding in the parent of the ListView

It would make a lot of sense to have all style properties in the ListView implemented. Unfortunately, we don't have a team dedicated to Beagle at the moment and we must count on the community for implementing new features.