facebook/litho

Flex attribute works unexpectedly on Image components

ihenk opened this issue · 1 comments

ihenk commented

Version

0.39.0

Issues and Steps to Reproduce

Hi, there. I'm facing a problem about using 'flex' attribute of Image components. There is a row container that includes two child nodes of Image components. The 'flex' value of the first Image component is 2, the second one is 1. If I use local drawable objects on them, the proportion of their width isn't 2:1 exactly. I've tried FrescoImage components. They don't work fine either. However, if I use color drawable objects on them, the proportion of their width works fine. Could you help me out with this issue? I'm really confused. Thanks in advance.
Here are the code and corresponding pictures.

`public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    SoLoader.init(this, false);

    setContentView(R.layout.activity_main);

    LinearLayout container = findViewById(R.id.containView);

    ComponentContext context = new ComponentContext(this);
    container.addView(LithoView.create(this,
            Row.create(context).widthPercent(100).backgroundColor(Color.YELLOW).paddingDip(YogaEdge.ALL, 10)
                    .child(Image.create(context).scaleType(ImageView.ScaleType.FIT_XY).drawableRes(R.drawable.demo1).heightDip(50).flex(2).build())
                    .child(Image.create(context).marginDip(YogaEdge.LEFT, 10).scaleType(ImageView.ScaleType.FIT_XY).drawableRes(R.drawable.demo1).heightDip(50).flex(1).build())
                    .build()));
}

}`
device-2021-01-23-200313_spec

`public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    SoLoader.init(this, false);

    setContentView(R.layout.activity_main);

    LinearLayout container = findViewById(R.id.containView);

    ComponentContext context = new ComponentContext(this);
    container.addView(LithoView.create(this,
            Row.create(context).widthPercent(100).backgroundColor(Color.LTGRAY).paddingDip(YogaEdge.ALL, 10)
                    .child(Image.create(context).drawable(new ColorDrawable(Color.GREEN)).heightDip(50).flex(2).build())
                    .child(Image.create(context).marginDip(YogaEdge.LEFT, 10).drawable(new ColorDrawable(Color.GREEN)).heightDip(50).flex(1).build())
                    .build()));
}

}`
device-2021-01-23-200313 2_spec

Expected Behavior

According to the api document 'https://fblitho.com/javadoc/', When flex is a positive number, it makes the component flexible and it will be sized proportional to its flex value. So a component with flex set to 2 will take twice the space as a component with flex set to 1.

ihenk commented

I should have set 'widthDip' of the image components into '0'. It works.

ComponentContext context = new ComponentContext(this);
container.addView(LithoView.create(this,
Row.create(context).widthPercent(100).backgroundColor(Color.YELLOW).paddingDip(YogaEdge.ALL, 10)
.child(Image.create(context).scaleType(ImageView.ScaleType.FIT_XY).drawableRes(R.drawable.demo1).heightDip(50).widthDip(0).flex(2).build())
.child(Image.create(context).marginDip(YogaEdge.LEFT, 10).scaleType(ImageView.ScaleType.FIT_XY).drawableRes(R.drawable.demo1).heightDip(50).widthDip(0).flex(1).build())
.build()));
}###