React Native Fiber: Fix errors in children management

Reviewed By: bvaughn

Differential Revision: D4905062

fbshipit-source-id: 43c24e7bcaf06eb4c7385b7022d0f20cf42d6f2f

Libraries/Renderer/src/renderers/native/ReactNativeFiber.js

@@ -71,10 +71,7 @@ const NativeRenderer = ReactFiberReconciler({
     parentInstance: Instance | Container,
     child: Instance | TextInstance,
   ): void {
-
-    const childTag = typeof child === 'number'
-      ? child
-      : child._nativeTag;
+    const childTag = typeof child === 'number' ? child : child._nativeTag;
 
     if (typeof parentInstance === 'number') {
       // Root container
@@ -85,6 +82,21 @@ const NativeRenderer = ReactFiberReconciler({
     } else {
       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(
@@ -96,6 +108,7 @@ const NativeRenderer = ReactFiberReconciler({
           [], // removeAtIndices
         );
       }
+    }
   },
 
   appendInitialChild(
@@ -267,12 +280,12 @@ const NativeRenderer = ReactFiberReconciler({
 
     const children = (parentInstance: any)._children;
 
-    const beforeChildIndex = children.indexOf(beforeChild);
     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(
@@ -284,11 +297,10 @@ const NativeRenderer = ReactFiberReconciler({
         [], // removeAtIndices
       );
     } else {
+      const beforeChildIndex = children.indexOf(beforeChild);
       children.splice(beforeChildIndex, 0, child);
 
-      const childTag = typeof child === 'number'
-        ? child
-        : child._nativeTag;
+      const childTag = typeof child === 'number' ? child : child._nativeTag;
 
       UIManager.manageChildren(
         (parentInstance: any)._nativeTag, // containerID
@@ -387,7 +399,6 @@ findNodeHandle.injection.injectFindNode((fiber: Fiber) =>
   NativeRenderer.findHostInstance(fiber));
 findNodeHandle.injection.injectFindRootNodeID(instance => instance);
 
-
 // Intercept lifecycle errors and ensure they are shown with the correct stack
 // trace within the native redbox component.
 ReactFiberErrorLogger.injection.injectDialog(