createInstance() — react Function Reference

Architecture documentation for the createInstance() function in ReactFiberConfigNative.js from the react codebase.

Function javascript BabelCompiler Validation calls 4 called by 1

Entity Profile

BabelCompiler→ Validation→ createInstance() — react Function Reference

Dependency Diagram

graph TD
  da6635e3_7c29_f39e_c03b_83e7f3ddca5e["createInstance()"]
  3d20f780_732d_dfbf_ddf9_cb13ba9949a1["ReactFiberConfigNative.js"]
  da6635e3_7c29_f39e_c03b_83e7f3ddca5e -->|defined in| 3d20f780_732d_dfbf_ddf9_cb13ba9949a1
  2046f12b_cbb2_2680_6c88_25ab822d52f0["shouldSetTextContent()"]
  2046f12b_cbb2_2680_6c88_25ab822d52f0 -->|calls| da6635e3_7c29_f39e_c03b_83e7f3ddca5e
  afee62e3_7b29_eaa4_1b33_6e226531d59c["allocateTag()"]
  da6635e3_7c29_f39e_c03b_83e7f3ddca5e -->|calls| afee62e3_7b29_eaa4_1b33_6e226531d59c
  bec3abea_7097_f40d_dbc4_4882f834646a["create()"]
  da6635e3_7c29_f39e_c03b_83e7f3ddca5e -->|calls| bec3abea_7097_f40d_dbc4_4882f834646a
  e451812a_c68a_0eaa_e8e4_e629eaa39bcc["precacheFiberNode()"]
  da6635e3_7c29_f39e_c03b_83e7f3ddca5e -->|calls| e451812a_c68a_0eaa_e8e4_e629eaa39bcc
  a3af4076_63d3_1b05_7bec_4cd508947abf["updateFiberProps()"]
  da6635e3_7c29_f39e_c03b_83e7f3ddca5e -->|calls| a3af4076_63d3_1b05_7bec_4cd508947abf
  style da6635e3_7c29_f39e_c03b_83e7f3ddca5e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-native-renderer/src/ReactFiberConfigNative.js lines 130–169

export function createInstance(
  type: string,
  props: Props,
  rootContainerInstance: Container,
  hostContext: HostContext,
  internalInstanceHandle: Object,
): Instance {
  const tag = allocateTag();
  const viewConfig = getViewConfigForType(type);

  if (__DEV__) {
    for (const key in viewConfig.validAttributes) {
      if (props.hasOwnProperty(key)) {
        deepFreezeAndThrowOnMutationInDev(props[key]);
      }
    }
  }

  const updatePayload = create(props, viewConfig.validAttributes);

  UIManager.createView(
    tag, // reactTag
    viewConfig.uiViewClassName, // viewName
    rootContainerInstance.containerTag, // rootTag
    updatePayload, // props
  );

  const component = new ReactNativeFiberHostComponent(
    tag,
    viewConfig,
    internalInstanceHandle,
  );

  precacheFiberNode(internalInstanceHandle, tag);
  updateFiberProps(tag, props);

  // Not sure how to avoid this cast. Flow is okay if the component is defined
  // in the same file but if it's external it can't see the types.
  return ((component: any): Instance);
}