Why React Native Custom Views Need Explicit Width/Height and How to Fix It

Background

When integrating a custom Android View into React Native (RN), developers often encounter cases where the view’s internal UI logic does not take effect, or the view remains invisible even though it has been added to the hierarchy.

Root Cause

The issue originates from RN’s root layout class ReactRootView. During the measurement phase, ReactRootView.measure checks whether the measureSpec (size specifications) has changed. Only when the width, height, or measureSpec changes does RN invoke updateRootLayoutSpecs, which eventually calls UIImplementation.dispatchViewUpdates. This method walks the view tree, invoking measure and layout on each child view.

If the root layout’s dimensions remain unchanged, RN intercepts the child view’s requestLayout calls, preventing the native Android layout system from re‑measuring the custom view.

Why Width/Height Must Be Set in JSX

RN’s Yoga layout engine determines the final size of every component, so the width and height of a custom view are derived from Yoga nodes rather than Android’s native layout pass. When a view’s layoutWidth and layoutHeight are zero, Yoga reports zero to the native side, causing the view to be invisible. Therefore, developers must explicitly provide width and height values in JSX so that Yoga can compute non‑zero dimensions.

RN Text Component Exception

RN’s built‑in Text component works differently. Its manager ( ReactTextViewManager) creates a ReactTextView (an Android TextView) and a corresponding ReactTextShadowNode that holds a YogaNode. The YogaMeasureFunction for this node calls Android’s text measurement APIs to compute the exact size, then returns the result via YogaMeasureOutput.make. Consequently, Text can size itself without explicit width/height.

Solution Overview

Knowing the root cause, the fix is straightforward: if RN does not trigger a layout pass for the custom view, manually schedule a measurement and layout on the native side and inform Yoga of the new size.

Approach 1 – Register a FrameCallback

Reference RN’s built‑in custom view implementations and register a FrameCallback inside the custom view’s measure / layout methods. This callback forces the view to re‑measure and re‑layout, ensuring that the native size is updated before Yoga’s next pass.

Approach 2 – Explicit Width/Height in JSX

Specify width and height properties for the custom view in JSX. This provides Yoga with concrete dimensions, allowing the view to be rendered correctly.

Approach 3 – Sync Native Measurements Back to Yoga

After the native view determines its actual size (e.g., via onMeasure), call the internal RN API UIManager.updateNodeSize (exposed as updateNodeSize) on the UI thread. This updates the corresponding Yoga node’s size and triggers a layout refresh without a full requestLayout cycle.

Implementation Details

1. Understanding RN’s Update Flow

Root layout ReactRootView.measure → updateRootLayoutSpecs → UIImplementation.dispatchViewUpdates.

Each child view’s measure and layout are invoked only when Yoga reports a size change.

2. Custom View Measurement

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
    // Custom logic to compute desired width/height
    setMeasuredDimension(calculatedWidth, calculatedHeight)
}

3. Registering a FrameCallback

Choreographer.getInstance().postFrameCallback {
    // Force re‑measure and layout
    view.requestLayout()
}

4. Updating Yoga Node Size

UIManagerModule uiManager = reactContext.getNativeModule(UIManagerModule.class);
uiManager.updateNodeSize(viewTag, newWidth, newHeight);

5. Ensuring Execution on the Correct Thread

The size update must be posted to nativeModulesQueueThread to avoid race conditions.

Practical Recommendations

If the custom view can determine its size autonomously, prefer the FrameCallback approach to keep the native layout logic intact.

When the view’s size depends on dynamic content, explicitly set width and height in JSX and let Yoga handle the layout.

Avoid excessive requestLayout calls; use updateNodeSize for lightweight size synchronization.

Conclusion

React Native’s Yoga engine governs the final dimensions of all components. Custom Android views must either provide explicit dimensions to Yoga or actively synchronize native measurements back to Yoga. By registering a FrameCallback, setting JSX dimensions, or invoking UIManager.updateNodeSize, developers can ensure that custom views render correctly without layout glitches.

Reference

GitHub repository of the NetEase Cloud Music front‑end team: https://github.com/x-orpheus