insertBefore() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ insertBefore() — react Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

packages/react-native-renderer/src/ReactFiberConfigNative.js lines 470–507

export function insertBefore(
  parentInstance: Instance,
  child: Instance | TextInstance,
  beforeChild: Instance | TextInstance,
): void {
  const children = (parentInstance: any)._children;
  const index = children.indexOf(child);

  // Move existing child or add new child?
  if (index >= 0) {
    children.splice(index, 1);
    const beforeChildIndex = children.indexOf(beforeChild);
    children.splice(beforeChildIndex, 0, child);

    UIManager.manageChildren(
      (parentInstance: any)._nativeTag, // containerID
      [index], // moveFromIndices
      [beforeChildIndex], // moveToIndices
      [], // addChildReactTags
      [], // addAtIndices
      [], // removeAtIndices
    );
  } else {
    const beforeChildIndex = children.indexOf(beforeChild);
    children.splice(beforeChildIndex, 0, child);

    const childTag = typeof child === 'number' ? child : child._nativeTag;

    UIManager.manageChildren(
      (parentInstance: any)._nativeTag, // containerID
      [], // moveFromIndices
      [], // moveToIndices
      [childTag], // addChildReactTags
      [beforeChildIndex], // addAtIndices
      [], // removeAtIndices
    );
  }
}