I've built a very simple native Android UI component and I want to update the size of its child view when a button from my react native project is clicked. To be more precise, when this button is clicked then I send a command to my SimpleViewManager
which in turn calls the resizeLayout()
of my custom view.
I can verify that the resizeLayout()
is properly called but the layout is not resized until I rotate the phone. Obviously, changing the device's orientation triggers the draw()
of my custom view but so does the invalidate()
which I explicitly call.
Other layout changes like changing the background color instead of resizing it work fine.
My custom component looks like this:
public class CustomComponent extends RelativeLayout {
public CustomComponent(Context context) {
super(context);
init();
}
public CustomComponent(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public CustomComponent(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
inflate(getContext(), R.layout.simple_layout, this);
}
public void resizeLayout(){
LinearLayout childLayout = (LinearLayout) findViewById(R.id.child_layout);
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) childLayout.getLayoutParams();
layoutParams.height = 50;
layoutParams.width= 50;
childLayout.setLayoutParams(layoutParams);
invalidate();
}
}
and the simple_layout.xml looks like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/root_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/child_layout"
android:layout_width="100dp"
android:layout_height="50dp"
android:background="#ffee11"/>
</RelativeLayout>
Any help would be greatly appreciated.
After a couple of days of searching, I finally found the answer in this old reported issue in React Native's repo.
This solution is the same as the ones used in ReactPicker.java and ReactToolbar.java. I had to put the following code in my CustomComponent and after that there is no need to even call requestLayout()
or invalidate()
. The changes are propagated as soon as I update my layout's LayoutParams.
@Override
public void requestLayout() {
super.requestLayout();
// The spinner relies on a measure + layout pass happening after it calls requestLayout().
// Without this, the widget never actually changes the selection and doesn't call the
// appropriate listeners. Since we override onLayout in our ViewGroups, a layout pass never
// happens after a call to requestLayout, so we simulate one here.
post(measureAndLayout);
}
private final Runnable measureAndLayout = new Runnable() {
@Override
public void run() {
measure(MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.EXACTLY),
MeasureSpec.makeMeasureSpec(getHeight(), MeasureSpec.EXACTLY));
layout(getLeft(), getTop(), getRight(), getBottom());
}
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With