Deep Dive into React Native setNativeProps: Understanding the Implementation and Source Code

React Native developers sometimes need to update component properties without triggering a full re‑render. In such cases, setNativeProps provides a direct way to modify native view attributes, offering a performance‑critical alternative to setState or shouldComponentUpdate.

The article first outlines the scenarios where setNativeProps is appropriate, emphasizing that it should be used sparingly—primarily for frequent UI updates where the React render cycle becomes a bottleneck. It warns against overusing the method because it bypasses React's state management, making code harder to reason about.

A concrete demo shows how to adjust the height of a View component inside an onScroll handler. The example demonstrates obtaining a reference with ref, calculating the new height, and calling

this._SearchViewContainerRef.setNativeProps({style:{height: newHeight}})

to apply the change instantly.

The core of the article dives into the source code. It explains that setNativeProps is defined in NativeMethodsMixin, which is mixed into the View component via React.createClass and createReactClass. The mixin wraps the native call UIManager.updateView, ultimately invoking RCTUIManager.updateView on the native side.

Further analysis shows how the View component is built with requireNativeComponent('RCTView', View, {nativeOnly:{...}}). The requireNativeComponent function retrieves the view configuration from UIManager, validates the existence of the native module, merges native props from base modules, and finally creates a React class that inherits from ReactNativeBaseComponent (which already includes NativeMethodsMixin).

By tracing the chain—from NativeMethodsMixin to ReactNativeBaseComponent, then to the generated RCTView class—the article clarifies how a high‑level JavaScript call ends up as a low‑level native view update, explaining the performance advantage of setNativeProps in React Native applications.

this._SearchViewContainerRef.setNativeProps({
  style: {
    height: Math.max(350 - heightDiff - height2Decrease, 0)
  }
});

function setNativeProps(nativeProps) {
  const viewConfig = this._nativeTag ? UIManager.getViewConfig(this._nativeTag) : {};
  const updatePayload = ReactNativeAttributePayload.create(nativeProps, viewConfig.validAttributes);
  UIManager.updateView(this._nativeTag, viewConfig.uiViewClassName, updatePayload);
}