Improve z-index implementation on Android

Examples/UIExplorer/js/ListViewPagingExample.js

@@ -195,6 +195,7 @@ class ListViewPagingExample extends React.Component {
         initialListSize={10}
         pageSize={4}
         scrollRenderAheadDistance={500}
+        stickySectionHeadersEnabled
       />
     );
   }

Examples/UIExplorer/js/SectionListExample.js

@@ -59,7 +59,7 @@ const VIEWABILITY_CONFIG = {
 };
 
 const renderSectionHeader = ({section}) => (
-  <View>
+  <View style={styles.header}>
     <Text style={styles.headerText}>SECTION HEADER: {section.key}</Text>
     <SeparatorComponent />
   </View>
@@ -144,6 +144,7 @@ class SectionListExample extends React.PureComponent {
           refreshing={false}
           renderItem={this._renderItemComponent}
           renderSectionHeader={renderSectionHeader}
+          stickySectionHeadersEnabled
           sections={[
             {renderItem: renderStackedItem, key: 's1', data: [
               {title: 'Item In Header Section', text: 'Section s1', key: '0'},
@@ -186,6 +187,9 @@ class SectionListExample extends React.PureComponent {
 }
 
 const styles = StyleSheet.create({
+  header: {
+    backgroundColor: '#e9eaed',
+  },
   headerText: {
     padding: 4,
   },

Libraries/Components/ScrollView/ScrollView.js

@@ -649,9 +649,6 @@ const ScrollView = React.createClass({
         {...contentSizeChangeProps}
         ref={this._setInnerViewRef}
         style={contentContainerStyle}
-        removeClippedSubviews={
-          hasStickyHeaders && Platform.OS === 'android' ? false : this.props.removeClippedSubviews
-        }
         collapsable={false}>
         {children}
       </ScrollContentContainerViewClass>;

ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewGroupManager.java

@@ -19,13 +19,15 @@
 import android.view.View;
 import android.view.ViewGroup;
 
+import javax.annotation.Nullable;
+
 /**
  * Class providing children management API for view managers of classes extending ViewGroup.
  */
 public abstract class ViewGroupManager <T extends ViewGroup>
     extends BaseViewManager<T, LayoutShadowNode> {
 
-  public static WeakHashMap<View, Integer> mZIndexHash = new WeakHashMap<>();
+  private static WeakHashMap<View, Integer> mZIndexHash = new WeakHashMap<>();
 
   @Override
   public LayoutShadowNode createShadowNodeInstance() {
@@ -43,7 +45,6 @@ public void updateExtraData(T root, Object extraData) {
 
   public void addView(T parent, View child, int index) {
     parent.addView(child, index);
-    reorderChildrenByZIndex(parent);
   }
 
   /**
@@ -61,54 +62,10 @@ public void addViews(T parent, List<View> views) {
 
   public static void setViewZIndex(View view, int zIndex) {
     mZIndexHash.put(view, zIndex);
-    // zIndex prop gets set BEFORE the view is added, so parent may be null.
-    ViewGroup parent = (ViewGroup) view.getParent();
-    if (parent != null) {
-      reorderChildrenByZIndex(parent);
-    }
   }
 
-  public static void reorderChildrenByZIndex(ViewGroup view) {
-    // Optimization: loop through the zIndexHash to test if there are any non-zero zIndexes
-    // If there aren't any, we can just return out
-    Collection<Integer> zIndexes = mZIndexHash.values();
-    boolean containsZIndexedElement = false;
-    for (Integer zIndex : zIndexes) {
-      if (zIndex != 0) {
-        containsZIndexedElement = true;
-        break;
-      }
-    }
-    if (!containsZIndexedElement) {
-      return;
-    }
-
-    // Add all children to a sortable ArrayList
-    ArrayList<View> viewsToSort = new ArrayList<>();
-    for (int i = 0; i < view.getChildCount(); i++) {
-      viewsToSort.add(view.getChildAt(i));
-    }
-    // Sort the views by zIndex
-    Collections.sort(viewsToSort, new Comparator<View>() {
-      @Override
-      public int compare(View view1, View view2) {
-        Integer view1ZIndex = mZIndexHash.get(view1);
-        if (view1ZIndex == null) {
-          view1ZIndex = 0;
-        }
-
-        Integer view2ZIndex = mZIndexHash.get(view2);
-        if (view2ZIndex == null) {
-          view2ZIndex = 0;
-        }
-        return view1ZIndex - view2ZIndex;
-      }
-    });
-    // Call .bringToFront on the sorted list of views
-    for (int i = 0; i < viewsToSort.size(); i++) {
-      viewsToSort.get(i).bringToFront();
-    }
-    view.invalidate();
+  public static @Nullable Integer getViewZIndex(View view) {
+    return mZIndexHash.get(view);
   }
 
   public int getChildCount(T parent) {

ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java

@@ -31,6 +31,11 @@
 import com.facebook.react.uimanager.ReactClippingViewGroup;
 import com.facebook.react.uimanager.ReactClippingViewGroupHelper;
 import com.facebook.react.uimanager.ReactPointerEventsView;
+import com.facebook.react.uimanager.ViewGroupManager;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.Comparator;
 
 /**
  * Backing for a React View. Has support for borders, but since borders aren't common, lazy
@@ -96,6 +101,8 @@ public void onLayoutChange(
   private @Nullable ReactViewBackgroundDrawable mReactBackgroundDrawable;
   private @Nullable OnInterceptTouchEventListener mOnInterceptTouchEventListener;
   private boolean mNeedsOffscreenAlphaCompositing = false;
+  private int mNumberOfChildrenWithZIndex = 0;
+  private @Nullable int[] mDrawingOrderIndices;
 
   public ReactViewGroup(Context context) {
     super(context);
@@ -374,6 +381,76 @@ protected void onAttachedToWindow() {
     }
   }
 
+  @Override
+  public void addView(View child, int index, LayoutParams params) {
+    // This will get called for every overload of addView so there is not need to override every method.
+    if (ReactViewManager.getViewZIndex(child) != null) {
+      mNumberOfChildrenWithZIndex++;
+    }
+
+    setChildrenDrawingOrderEnabled(mNumberOfChildrenWithZIndex > 0);
+    mDrawingOrderIndices = null;
+
+    super.addView(child, index, params);
+  }
+
+  @Override
+  public void removeView(View view) {
+    handleRemoveView(view);
+
+    super.removeView(view);
+  }
+
+  @Override
+  public void removeViewAt(int index) {
+    handleRemoveView(getChildAt(index));
+
+    super.removeViewAt(index);
+  }
+
+  private void handleRemoveView(View view) {
+    if (ReactViewManager.getViewZIndex(view) != null) {
+      mNumberOfChildrenWithZIndex--;
+    }
+
+    setChildrenDrawingOrderEnabled(mNumberOfChildrenWithZIndex > 0);
+    mDrawingOrderIndices = null;
+  }
+
+  @Override
+  protected int getChildDrawingOrder(int childCount, int index) {
+    if (mDrawingOrderIndices == null) {
+      ArrayList<View> viewsToSort = new ArrayList<>();
+      for (int i = 0; i < childCount; i++) {
+        viewsToSort.add(getChildAt(i));
+      }
+      // Sort the views by zIndex
+      Collections.sort(viewsToSort, new Comparator<View>() {
+        @Override
+        public int compare(View view1, View view2) {
+          Integer view1ZIndex = ViewGroupManager.getViewZIndex(view1);
+          if (view1ZIndex == null) {
+            view1ZIndex = 0;
+          }
+
+          Integer view2ZIndex = ViewGroupManager.getViewZIndex(view2);
+          if (view2ZIndex == null) {
+            view2ZIndex = 0;
+          }
+
+          return view1ZIndex - view2ZIndex;
+        }
+      });
+
+      mDrawingOrderIndices = new int[childCount];
+      for (int i = 0; i < childCount; i++) {
+        View child = viewsToSort.get(i);
+        mDrawingOrderIndices[i] = indexOfChild(child);
+      }
+    }
+    return mDrawingOrderIndices[index];
+  }
+
   @Override
   public PointerEvents getPointerEvents() {
     return mPointerEvents;

ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java

@@ -208,7 +208,6 @@ public void addView(ReactViewGroup parent, View child, int index) {
     } else {
       parent.addView(child, index);
     }
-    reorderChildrenByZIndex(parent);
   }
 
   @Override