diff --git a/Examples/UIExplorer/UIExplorerIntegrationTests/ReferenceImages/Examples-UIExplorer-UIExplorerApp.ios/testLayoutExample_1@2x.png b/Examples/UIExplorer/UIExplorerIntegrationTests/ReferenceImages/Examples-UIExplorer-UIExplorerApp.ios/testLayoutExample_1@2x.png index 90558447391e28..2c6573453937f4 100644 Binary files a/Examples/UIExplorer/UIExplorerIntegrationTests/ReferenceImages/Examples-UIExplorer-UIExplorerApp.ios/testLayoutExample_1@2x.png and b/Examples/UIExplorer/UIExplorerIntegrationTests/ReferenceImages/Examples-UIExplorer-UIExplorerApp.ios/testLayoutExample_1@2x.png differ diff --git a/Examples/UIExplorer/UIExplorerIntegrationTests/ReferenceImages/Examples-UIExplorer-UIExplorerApp.ios/testViewExample_1@2x.png b/Examples/UIExplorer/UIExplorerIntegrationTests/ReferenceImages/Examples-UIExplorer-UIExplorerApp.ios/testViewExample_1@2x.png index 0da195f5c3fede..45bdb2631f1b63 100644 Binary files a/Examples/UIExplorer/UIExplorerIntegrationTests/ReferenceImages/Examples-UIExplorer-UIExplorerApp.ios/testViewExample_1@2x.png and b/Examples/UIExplorer/UIExplorerIntegrationTests/ReferenceImages/Examples-UIExplorer-UIExplorerApp.ios/testViewExample_1@2x.png differ diff --git a/Examples/UIExplorer/ViewExample.js b/Examples/UIExplorer/ViewExample.js index 7dc42925b4237e..965802941026e3 100644 --- a/Examples/UIExplorer/ViewExample.js +++ b/Examples/UIExplorer/ViewExample.js @@ -93,7 +93,7 @@ var ZIndexExample = React.createClass({ flipped: false }; }, - + render() { const indices = this.state.flipped ? [-1, 0, 1, 2] : [2, 1, 0, -1]; return ( @@ -128,7 +128,7 @@ var ZIndexExample = React.createClass({ ); }, - + _handlePress() { this.setState({flipped: !this.state.flipped}); } diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java index c74651755ae243..4586bf78b401f0 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java @@ -5,6 +5,7 @@ import android.graphics.Color; import android.os.Build; import android.view.View; +import android.view.ViewGroup; import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.ReadableMap; @@ -21,6 +22,7 @@ public abstract class BaseViewManager extends BaseViewManager { + public static WeakHashMap mZIndexHash = new WeakHashMap<>(); + @Override public LayoutShadowNode createShadowNodeInstance() { return new LayoutShadowNode(); @@ -34,6 +42,59 @@ public void updateExtraData(T root, Object extraData) { public void addView(T parent, View child, int index) { parent.addView(child, index); + reorderChildrenByZIndex(parent); + } + + 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 int getChildCount(T parent) { 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 6a4bd5d264914b..ed9dc09e492da0 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 @@ -195,6 +195,7 @@ public void addView(ReactViewGroup parent, View child, int index) { } else { parent.addView(child, index); } + reorderChildrenByZIndex(parent); } @Override