How to use react-clone-referenced-element - 10 common examples

let tabItem = {
        ..._.omit(tabItemProps, ['children']),
      };

      if (Children.count(tabItemProps.children) > 0) {
        let child = Children.only(tabItemProps.children);

        // NOTE: a bit hacky, identifying navigation component like StackNav
        // via initialRoute
        if (child.props.initialRoute && this.props.translucent) {
          let defaultRouteConfig = child.props.defaultRouteConfig || {};
          defaultRouteConfig = {
            ...defaultRouteConfig,
            __tabBarInset: this.props.tabBarHeight,
          };
          tabItem.element = cloneReferencedElement(child, {
            ...child.props,
            defaultRouteConfig,
          });
        } else {
          tabItem.element = child;
        }
      }

      const tabItemOnPress = () => {
        this._setActiveTab(tabItemProps.id, index);
      };

      if (typeof tabItemProps.onPress === 'function') {
        tabItem.onPress = tabItem.onPress.bind(this, tabItemOnPress);
      } else {
        tabItem.onPress = tabItemOnPress;

// can get a ref to it
    if (!this._subscribedToFocusEvents) {
      this._subscribeToFocusEvents(navigator);
    }

    // We need to save a reference to the navigator already. Otherwise this
    // would crash if the route calls any method on us in the first render-pass.
    this.__navigator = navigator;

    let scene = this._routeRenderer.renderScene(route, this, transition, scroll);
    if (typeof this.props.augmentScene === 'function') {
      scene = this.props.augmentScene(scene, route);
    }
    let firstRoute = navigator.getCurrentRoutes()[0];
    if (route === firstRoute) {
      scene = cloneReferencedElement(scene, {
        ref: component => { this._firstScene = component; },
      });
    }
    return scene;
  }

if (!renderNavigationBar) {
      return null;
    }

    const navBar = renderNavigationBar({
      navigator: this._navigationBarNavigator,
      navState: this.state,
      sceneMap: this._scenesByRoute, // TODO(lmr): do in a way that doesn't expose this structure
      scroll: this.props.scroll,
    });

    if (navBar === null) {
      return navBar;
    }

    return cloneReferencedElement(navBar, {
      ref: (el) => { this._navBar = el; },
    });
  },

render() {
    let loadingOverlay = cloneReferencedElement(
      this.props.renderLoadingOverlay({}),
      { ref: component => { this._loadingOverlay = component; } }
    );

    let errorOverlay = cloneReferencedElement(
      this.props.renderErrorOverlay({onRetryLoad: this._attemptLoadAsync}),
      { ref: component => { this._errorOverlay = component; } }
    );

    return (
      
    );

renderImageElement,
      ...props
    } = this.props;
    let optimalSource = ResponsiveImage.getClosestHighQualitySource(
      sources,
      preferredPixelRatio,
    );
    if (optimalSource) {
      source = optimalSource;
    }
    if (!source) {
      throw new Error(`Couldn't find an appropriate image source`);
    }
    if (renderImageElement) {
      let image = renderImageElement({ ...props, source });
      return cloneReferencedElement(image, {
        ref: component => { this._image = component; },
      });
    }

    return (
      <img> { this._image = component; }}
        source={source}
      /&gt;
    );
  }
}

render() {
    let image = cloneReferencedElement(onlyChild(this.props.children), {
      ref: component => {
        this._image = component;
      },
      onLoadEnd: this._onLoadEnd,
    });

    let safeImageProps = { ...StyleSheet.flatten(image.props.style) };
    delete safeImageProps.tintColor;
    delete safeImageProps.resizeMode;

    return (

this.props.renderLoadingErrorIndicator({ onRetryLoadMore: this._loadMoreAsync }),
        { key: 'loading-error-indicator' }
      );
    } else if (this.state.isLoading) {
      statusIndicator = React.cloneElement(this.props.renderLoadingIndicator(), {
        key: 'loading-indicator',
      });
    }

    let { renderScrollComponent, ...props } = this.props;
    Object.assign(props, {
      onScroll: this._handleScroll,
      children: [this.props.children, statusIndicator],
    });

    return cloneReferencedElement(renderScrollComponent(props), {
      ref: component => {
        this._scrollComponent = component;
      },
    });
  }

: { paddingTop: this._getNavigationBarHeight(routeConfig) },
        ];
      }
    } else {
      style = [...style, styles.withoutNavigationBar];
    }

    if (routeConfig.sceneStyle) {
      style = [...style, routeConfig.sceneStyle || styles.defaultSceneStyle];
    }

    return (
      
    );
  };

inverted,
      renderScrollComponent,
      ...props
    } = this.props;

    if (inverted) {
      if (this.props.horizontal) {
        props.style = [styles.horizontallyInverted, props.style];
        props.children = this._renderInvertedChildren(props.children, styles.horizontallyInverted);
      } else {
        props.style = [styles.verticallyInverted, props.style];
        props.children = this._renderInvertedChildren(props.children, styles.verticallyInverted);
      }
    }

    return cloneReferencedElement(renderScrollComponent(props), {
      ref: component => { this._scrollComponent = component; },
    });
  },

renderScene(route, navigator, transition, scroll) {
    if (route.renderScene) {
      let scene = route.renderScene({ navigator, transition, scroll });
      if (!scene) {
        return scene;
      }
      return cloneReferencedElement(scene, {
        ref: component => { route.scene = component; },
      });
    }

    invariant(
      route.getSceneClass,
      'The route must implement renderScene or getSceneClass',
    );
    let Component = route.getSceneClass();
    return (
       { route.scene = component; }}
        navigator={navigator}
        transition={transition}
        scroll={scroll}
      />