RootSiblingParent

Relevant source files

• README.md
• src/RootSiblingsManager.tsx

This document covers the RootSiblingParent component, which serves as the mounting container and context provider for all sibling elements in the react-native-root-siblings system. For information about the imperative API for managing siblings, see RootSiblingsManager. For information about the declarative portal component, see RootSiblingPortal.

Overview

RootSiblingParent is a React component that must wrap your application's root component to enable sibling rendering functionality. It creates an internal manager that becomes part of the manager stack hierarchy and provides the mounting point where sibling elements are rendered in the React Native view hierarchy.

The component is essential because React Native's view hierarchy determines the z-index and layering of components. By placing RootSiblingParent near the root level, sibling elements can render at a high hierarchy level to overlay other application content.

Sources: README.md43-58 src/RootSiblingsManager.tsx61-105

Component Hierarchy and Integration

RootSiblingParent Integration Pattern

This diagram shows the recommended integration pattern where RootSiblingParent is placed between providers and the main app component, creating a high-level mounting point for sibling elements.

Sources: README.md45-55 src/RootSiblingsManager.tsx61-84

Manager Stack System

Manager Stack and Active Manager Resolution

Each RootSiblingParent creates a manager that is added to the managerStack. The getActiveManager() function returns the most recently added manager that is not in the inactiveManagers set.

Sources: src/RootSiblingsManager.tsx27-39 src/RootSiblingsManager.tsx86-95

Props and API

Props Interface

Prop	Type	Required	Default	Description
children	ReactNode	Yes	-	The application content to render inside the parent
inactive	boolean	No	false	Whether this parent's manager should be inactive

Behavior

• Manager Creation: Creates an internal RootSiblingManager using wrapRootComponent()
• Stack Management: Adds the manager to managerStack on mount, removes on unmount
• Active State: Controls whether the manager participates in active manager resolution
• Cleanup: Automatically removes manager from stack when component unmounts

Sources: src/RootSiblingsManager.tsx61-105

Usage Patterns

Basic Setup

Multiple Parents with Inactive State

Sources: README.md45-58 src/RootSiblingsManager.tsx97-101

Implementation Details

Component Lifecycle

RootSiblingParent Lifecycle Management

This sequence shows how RootSiblingParent manages its internal manager throughout the component lifecycle, including stack management and inactive state handling.

Sources: src/RootSiblingsManager.tsx66-104

Internal Manager Creation

The component uses useState to create its internal manager only once during the initial render:

• Calls wrapRootComponent(ChildrenWrapper, renderSibling) to create a Root component and manager
• Adds the manager to managerStack
• Conditionally adds to inactiveManagers if inactive prop is true
• Returns the Root component wrapper and manager reference

The useEffect cleanup function handles manager removal from the stack when the component unmounts, but protects the defaultManager at index 0 from removal.

Sources: src/RootSiblingsManager.tsx66-95

Active State Management

The component responds to changes in the inactive prop by updating the inactiveManagers set:

• When inactive becomes true: adds manager to inactiveManagers
• When inactive becomes false: removes manager from inactiveManagers
• This affects which manager getActiveManager() returns for new sibling operations

Sources: src/RootSiblingsManager.tsx97-101