appendChild() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ appendChild() — react Function Reference

Dependency Diagram

graph TD
  9b6a525c_e54d_c7a0_fa42_80e7dd2a646b["appendChild()"]
  3d20f780_732d_dfbf_ddf9_cb13ba9949a1["ReactFiberConfigNative.js"]
  9b6a525c_e54d_c7a0_fa42_80e7dd2a646b -->|defined in| 3d20f780_732d_dfbf_ddf9_cb13ba9949a1
  style 9b6a525c_e54d_c7a0_fa42_80e7dd2a646b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-native-renderer/src/ReactFiberConfigNative.js lines 379–411

export function appendChild(
  parentInstance: Instance,
  child: Instance | TextInstance,
): void {
  const childTag = typeof child === 'number' ? child : child._nativeTag;
  const children = parentInstance._children;
  const index = children.indexOf(child);

  if (index >= 0) {
    children.splice(index, 1);
    children.push(child);

    UIManager.manageChildren(
      parentInstance._nativeTag, // containerTag
      [index], // moveFromIndices
      [children.length - 1], // moveToIndices
      [], // addChildReactTags
      [], // addAtIndices
      [], // removeAtIndices
    );
  } else {
    children.push(child);

    UIManager.manageChildren(
      parentInstance._nativeTag, // containerTag
      [], // moveFromIndices
      [], // moveToIndices
      [childTag], // addChildReactTags
      [children.length - 1], // addAtIndices
      [], // removeAtIndices
    );
  }
}