React-native: Implementing native ViewGroup in Android

Created on 18 Jul 2016 · 8Comments · Source: facebook/react-native

hi, I use the similar method with https://gist.github.com/kritikinfo/1bc92d2a07b3b1516a9d

I create a native container view such as RelativeLayout, and return it when client call createViewInstance(). However, I want to add its child asynchronously, and this child won't be displayed. This is because its measured width/height is 0 and it didn't trigger layout.

But if we measure and layout it, it would be displayed. Could someone tell me why? Thanks a lot.

public class MyViewManager extends SimpleViewManager<RelativeLayout> {
    private static final String TAG = "MyViewManager";

    public static final String REACT_CLASS = "MyRelativeLayout";

    public MyViewManager() {
    }

    @Override
    public String getName() {
        return REACT_CLASS;
    }

    @Override
    protected RelativeLayout createViewInstance(final ThemedReactContext reactContext) {
        final Context baseContext = reactContext.getBaseContext();
        if (baseContext == null || !(baseContext instanceof Activity)) {
            Log.e(TAG, "Base context is not an activity!");
            return null;
        }

        final RelativeLayout container = new RelativeLayout(baseContext);

        Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                TextView textView = new TextView(reactContext);
                textView.setText("hello world");
                RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(960, 150);
                // if we measure and layout it, it would be displayed
                //textView.measure(960, 150);
                //textView.layout(0, 0, 960, 150);
                container.addView(textView, lp);
            }
        }, 3000);

        return container;
    }
}

const MyRelativeLayout = requireNativeComponent('MyRelativeLayout', iface);
render: function() {
        return (
            <View collapsable={false} style={styles.adcontainer}>
                <MyRelativeLayout ref="test" style={styles.adView} >
                </MyRelativeLayout >
            </View>
        );
    },

and below is okay

java @Override protected RelativeLayout createViewInstance(final ThemedReactContext reactContext) { final RelativeLayout container = new RelativeLayout(reactContext); TextView textView = new TextView(reactContext); textView.setText("hello world"); RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(960, 150); container.addView(textView, lp); return container; } ```

Locked

Source

ChanYiChih

👍5

Most helpful comment

I was about to give up on this issue, but I found the workaround at https://github.com/facebook/react-native/issues/11829#issuecomment-290300921 🎉

On my view (the one returned by createViewInstance) I override the requestLayout method and, after adding any component, I call requestLayout.

I hope this helps tracking the root of this issue.

JulioC on 7 Aug 2017

🎉2 👍2 ❤1

All 8 comments

I'm having the same problem.

AndreaOrru on 25 Sep 2016

Hi @AndreaOrru and @ChanYiChih, I'm closing this issue since there hasn't been any activity on it in a couple month. If this issue still persists reopen and I'll track down someone to review.