A - prop drilling.tsx

// Example - prop drilling through nested rendering

const Name = ({ name }) => <Text>{name}</Text>;

const Block = ({ name }) => <View><Name name={name} /></View>;

const Bar = ({ name }) => <View><Block name={name} /></View>;

const Nav = ({ name }) => <View><Bar name={name} /></View>;

export const Profile = ({ name }) => <View><Nav name={name} /></View>;

B - nested rendering.tsx

// Example - handle prop drilling via context

const NameContext = React.createContext({ name });

const Name = () => (
  <NameContext.Consumer>
    {({ name }) => <Text>{name}</Text>}
  </NameContext.Consumer>
);

const Block = () => <View><Name /></View>;

const Bar = () => <View><Block /></View>;

const Nav = () => <View><Bar /></View>;

export const Profile = ({ name }) => (
  <Name.Provider name={name}>
    <View>
      <Nav />
    </View>
  </Name>
);

C - nested composition.tsx

// Example - pass props via composition

export const Profile = ({ name }) => (
  <View>
    <View testID="Nav">
      <View testID="Bar">
        <View testID="Block">
          <Text testID="Name">{name}</Text>
        </View>
      </View>
    </View>
  </View>
);

D - compose reusable components.tsx

// Example - reusable components with composition

const Name = ({ name }) => <Text>{name}</Text>;

const Block = ({ children }) => <View>{children}</View>;

const Bar = ({ children }) => <View>{children}</View>;

const Nav = ({ children }) => <View>{children}</View>;

export const Profile = ({ name }) => (
  <View>
    <Nav>
      <Bar>
        <Block>
          <Name name={name} />
        </Block>
      </Bar>
    </Nav>
  </View>
);

E - compromise.tsx

// Good(?) Example - compromise

export const NavBar = ({ children }) => (
  <View testID="Nav">
    <View testID="Bar">
      <View testID="Block">
        {children}
      </View>
    </View>
  </View>
);

export const Profile = ({ name }) => (
  <View>
    <NavBar>
      <Text testID="Name">{name}</Text>
    </NavBar>
  </View>
);