diff --git a/Examples/UIExplorer/js/ListViewPagingExample.js b/Examples/UIExplorer/js/ListViewPagingExample.js index 58d7359e5b7f77..f140f29948e765 100644 --- a/Examples/UIExplorer/js/ListViewPagingExample.js +++ b/Examples/UIExplorer/js/ListViewPagingExample.js @@ -195,6 +195,7 @@ class ListViewPagingExample extends React.Component { initialListSize={10} pageSize={4} scrollRenderAheadDistance={500} + stickySectionHeadersEnabled /> ); } diff --git a/Examples/UIExplorer/js/SectionListExample.js b/Examples/UIExplorer/js/SectionListExample.js index 441aa19cb0dccd..8b795c5bfc2244 100644 --- a/Examples/UIExplorer/js/SectionListExample.js +++ b/Examples/UIExplorer/js/SectionListExample.js @@ -59,7 +59,7 @@ const VIEWABILITY_CONFIG = { }; const renderSectionHeader = ({section}) => ( - + SECTION HEADER: {section.key} @@ -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, }, diff --git a/Libraries/Components/ScrollView/ScrollView.js b/Libraries/Components/ScrollView/ScrollView.js index bdd50b3dc06c1a..919e50c7339b01 100644 --- a/Libraries/Components/ScrollView/ScrollView.js +++ b/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} ; diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewGroupManager.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewGroupManager.java index 6a728db8f98e56..103529a0e96857 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewGroupManager.java +++ b/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 extends BaseViewManager { - public static WeakHashMap mZIndexHash = new WeakHashMap<>(); + private static WeakHashMap 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 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 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 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() { - @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) { diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java index f69abaf0252fda..eb4891fc79b202 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java +++ b/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 mNumberOfViewsWithZIndex = 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) { + mNumberOfViewsWithZIndex++; + } + + setChildrenDrawingOrderEnabled(mNumberOfViewsWithZIndex > 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) { + mNumberOfViewsWithZIndex--; + } + + setChildrenDrawingOrderEnabled(mNumberOfViewsWithZIndex > 0); + mDrawingOrderIndices = null; + } + + @Override + protected int getChildDrawingOrder(int childCount, int index) { + if (mDrawingOrderIndices == null) { + ArrayList viewsToSort = new ArrayList<>(); + for (int i = 0; i < childCount; i++) { + viewsToSort.add(getChildAt(i)); + } + // Sort the views by zIndex + Collections.sort(viewsToSort, new Comparator() { + @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; diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java index d0070359de28eb..3700d201af8970 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java +++ b/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