{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/litho/issues/248","repository_url":"https://api.github.com/repos/facebook/litho","labels_url":"https://api.github.com/repos/facebook/litho/issues/248/labels{/name}","comments_url":"https://api.github.com/repos/facebook/litho/issues/248/comments","events_url":"https://api.github.com/repos/facebook/litho/issues/248/events","html_url":"https://github.com/facebook/litho/issues/248","id":265890460,"number":248,"title":"Auto margin behaves differently compared with Yoga","user":{"login":"eveliotc","id":400641,"avatar_url":"https://avatars1.githubusercontent.com/u/400641?v=4","gravatar_id":"","url":"https://api.github.com/users/eveliotc","html_url":"https://github.com/eveliotc","followers_url":"https://api.github.com/users/eveliotc/followers","following_url":"https://api.github.com/users/eveliotc/following{/other_user}","gists_url":"https://api.github.com/users/eveliotc/gists{/gist_id}","starred_url":"https://api.github.com/users/eveliotc/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/eveliotc/subscriptions","organizations_url":"https://api.github.com/users/eveliotc/orgs","repos_url":"https://api.github.com/users/eveliotc/repos","events_url":"https://api.github.com/users/eveliotc/events{/privacy}","received_events_url":"https://api.github.com/users/eveliotc/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2017-10-16T19:39:45Z","updated_at":"2017-10-17T08:17:51Z","closed_at":null,"author_association":"NONE","body":"- [x] I have searched [existing issues](https://github.com/facebook/litho/issues) and this is not a duplicate\r\n\r\n## Version\r\n0.6.1\r\n\r\n## Issues and Steps to Reproduce\r\nCreate a layout that uses auto margins in Yoga such as this one (code below):\r\n\r\n![device-2017-10-16-113125](https://user-images.githubusercontent.com/400641/31631041-4f2c6f8e-b26d-11e7-87c1-e3454863aa62.png)\r\n\r\n## Expected vs Actual Behavior\r\nAuto margin should behave the same fashion as Yoga, \"anchoring\" the item to the end of the view, however it renders differently in Litho:\r\n\r\n![device-2017-10-16-113152](https://user-images.githubusercontent.com/400641/31631051-546ce30c-b26d-11e7-87b6-81bbe0972748.png)\r\n\r\n## Code\r\nComponent spec:\r\n\r\n```java\r\n@LayoutSpec\r\npublic class ItemComponentSpec {\r\n\r\n    @OnCreateLayout\r\n    static ComponentLayout onCreateLayout(\r\n            ComponentContext c,\r\n            @Prop final Model model) {\r\n        return Row.create(c)\r\n                .heightDip(72)\r\n                .alignItems(CENTER)\r\n                .child(Image.create(c)\r\n                        .scaleType(ImageView.ScaleType.FIT_CENTER)\r\n                        .drawable(model.icon)\r\n                        .withLayout()\r\n                        .marginDip(ALL, 12)\r\n                        .minWidthDip(32)\r\n                        .minHeightDip(32)\r\n                        .widthDip(32)\r\n                        .heightDip(32))\r\n                .child(Column.create(c)\r\n                        .flexShrink(1.0f)\r\n                        .flexGrow(1.0f)\r\n                        .marginDip(END, 12)\r\n                        .child(Text.create(c)\r\n                                .text(model.title)\r\n                                .textSizeSp(17)\r\n                                .maxLines(1)\r\n                                .ellipsize(TruncateAt.END)\r\n                                .shouldIncludeFontPadding(false)\r\n                                .textColor(BLACK))\r\n                        .child(Text.create(c)\r\n                                .text(model.subtitle)\r\n                                .textSizeSp(12)\r\n                                .maxLines(1)\r\n                                .ellipsize(TruncateAt.END)\r\n                                .shouldIncludeFontPadding(false)\r\n                                .textColorRes(R.color.dark_grey)))\r\n                .child(Text.create(c)\r\n                        .text(model.emoji)\r\n                        .textSizeSp(18)\r\n                        .maxLines(1)\r\n                        .withLayout()\r\n                        .marginDip(END, 12)\r\n                        .marginAuto(START))\r\n                .build();\r\n    }\r\n\r\n}\r\n```\r\n\r\nYoga layout (`@dimen` values match the ones used in Spec):\r\n\r\n```xml\r\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<com.facebook.yoga.android.YogaLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\r\n    xmlns:yoga=\"http://schemas.android.com/apk/res-auto\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"@dimen/item_height\"\r\n    yoga:yg_alignItems=\"center\"\r\n    yoga:yg_flexDirection=\"row\">\r\n\r\n    <ImageView\r\n        android:id=\"@+id/icon\"\r\n        android:layout_width=\"@dimen/icon_size\"\r\n        android:layout_height=\"@dimen/icon_size\"\r\n        yoga:yg_marginAll=\"@dimen/item_spacing\" />\r\n\r\n    <com.facebook.yoga.android.VirtualYogaLayout\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        yoga:yg_alignItems=\"stretch\"\r\n        yoga:yg_flexDirection=\"column\"\r\n        yoga:yg_flexShrink=\"1\"\r\n        yoga:yg_flexGrow=\"1\"\r\n        yoga:yg_marginEnd=\"@dimen/item_spacing\">\r\n\r\n        <TextView\r\n            android:id=\"@+id/title_view\"\r\n            android:layout_width=\"match_parent\"\r\n            android:layout_height=\"wrap_content\"\r\n            android:ellipsize=\"end\"\r\n            android:includeFontPadding=\"false\"\r\n            android:maxLines=\"1\"\r\n            android:textColor=\"@color/black\"\r\n            android:textSize=\"@dimen/item_primary_text_size\" />\r\n\r\n        <TextView\r\n            android:id=\"@+id/subtitle_view\"\r\n            android:layout_width=\"match_parent\"\r\n            android:layout_height=\"wrap_content\"\r\n            android:ellipsize=\"end\"\r\n            android:includeFontPadding=\"false\"\r\n            android:maxLines=\"1\"\r\n            android:textColor=\"@color/dark_grey\"\r\n            android:textSize=\"@dimen/item_secondary_text_size\" />\r\n    </com.facebook.yoga.android.VirtualYogaLayout>\r\n\r\n    <TextView\r\n        android:id=\"@+id/emoji_view\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:textSize=\"@dimen/item_emoji_text_size\"\r\n        yoga:yg_marginEnd=\"@dimen/item_spacing\"\r\n        android:maxLines=\"1\"\r\n        android:textColor=\"@color/black\"\r\n        yoga:yg_marginStart=\"auto\" />\r\n\r\n\r\n</com.facebook.yoga.android.YogaLayout>\r\n```"},"comment":{"url":"https://api.github.com/repos/facebook/litho/issues/comments/337154481","html_url":"https://github.com/facebook/litho/issues/248#issuecomment-337154481","issue_url":"https://api.github.com/repos/facebook/litho/issues/248","id":337154481,"user":{"login":"emilsjolander","id":1525924,"avatar_url":"https://avatars1.githubusercontent.com/u/1525924?v=4","gravatar_id":"","url":"https://api.github.com/users/emilsjolander","html_url":"https://github.com/emilsjolander","followers_url":"https://api.github.com/users/emilsjolander/followers","following_url":"https://api.github.com/users/emilsjolander/following{/other_user}","gists_url":"https://api.github.com/users/emilsjolander/gists{/gist_id}","starred_url":"https://api.github.com/users/emilsjolander/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/emilsjolander/subscriptions","organizations_url":"https://api.github.com/users/emilsjolander/orgs","repos_url":"https://api.github.com/users/emilsjolander/repos","events_url":"https://api.github.com/users/emilsjolander/events{/privacy}","received_events_url":"https://api.github.com/users/emilsjolander/received_events","type":"User","site_admin":false},"created_at":"2017-10-17T08:17:51Z","updated_at":"2017-10-17T08:17:51Z","author_association":"CONTRIBUTOR","body":"@eveliotc Could you try using Stetho to try to figure out what property may be interfering here? My intuition tells me that perhaps we are using different default values in the two libraries as Litho otherwise just calls through to Yoga.\r\n\r\nHave a look at https://fblitho.com/docs/debugging to see how to debug litho with stetho."}}
{"actor":{"display_login":"emilsjolander"}}