Skip to content

Fix differ creating or deleting a view that a nested (un)flattening moves #58648

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
pawicao wants to merge 2 commits into from
+76 −3
Closed

Fix differ creating or deleting a view that a nested (un)flattening moves #58648

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1f98644
Fix differ creating or deleting a view that a nested (un)flattening m…
pawicao Sep 23, 2026
d4b9539
Add a Fantom test for a negative zIndex child in a nested flatten/unf…
pawicao Sep 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions packages/react-native/ReactCommon/react/renderer/mounting/Differentiator.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -708,9 +708,9 @@ static void calculateShadowViewMutationsFlattener(
auto unvisitedOtherNodesIt =
unvisitedOtherNodes.find(newChild.shadowView.tag);
if (unvisitedOtherNodesIt != unvisitedOtherNodes.end()) {
auto unvisitedItPair = *unvisitedOtherNodesIt->second;
auto* unvisitedItPair = unvisitedOtherNodesIt->second;
unvisitedRecursiveChildPairs.insert(
{unvisitedItPair.shadowView.tag, &unvisitedItPair});
{unvisitedItPair->shadowView.tag, unvisitedItPair});
} else {
unvisitedRecursiveChildPairs.insert(
{newChild.shadowView.tag, &newChild});
Expand Down Expand Up @@ -820,6 +820,9 @@ static void calculateShadowViewMutationsFlattener(
// Final step: go through creation/deletion candidates and delete/create
// subtrees if they were never visited during the execution of the above
// loop and recursions.
const auto& subVisitedMap = reparentMode == ReparentMode::Flatten
? *subVisitedOldMap
: *subVisitedNewMap;
for (auto& deletionCreationCandidatePair : deletionCreationCandidatePairs) {
auto& treeChildPair = *deletionCreationCandidatePair.second;

Expand All @@ -828,7 +831,10 @@ static void calculateShadowViewMutationsFlattener(
// already created/deleted and we don't need to do that here.
// It is always the responsibility of the matcher to update subtrees when
// nodes are matched.
if (treeChildPair.inOtherTree()) {
// The recursion can match the node through a different pair instance
// (e.g. when zIndex orders it before its parent), so check its tag too.
if (treeChildPair.inOtherTree() ||
subVisitedMap.contains(treeChildPair.shadowView.tag)) {
continue;
}

Expand Down
67 changes: 67 additions & 0 deletions packages/react-native/src/private/renderer/mounting/__tests__/Mounting-itest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -446,6 +446,73 @@ describe('ViewFlattening', () => {
/>,
);
});

test('#58647: child with negative zIndex is kept when its parent flattens and its grandparent unflattens', () => {
const root = Fantom.createRoot();

function render(opacityOnGrandparent: boolean) {
Fantom.runTask(() => {
root.render(
<View nativeID="Q" style={{opacity: 0.5}}>
<View style={opacityOnGrandparent ? {opacity: 0.5} : null}>
<View style={opacityOnGrandparent ? null : {opacity: 0.5}}>
<View nativeID="A" />
<View nativeID="K" style={{zIndex: -1}} />
<View nativeID="B" />
</View>
</View>
</View>,
);
});
}

const expectedOutput = (
<rn-view nativeID="Q">
<rn-view>
<rn-view key="0" nativeID="K" />
<rn-view key="1" nativeID="A" />
<rn-view key="2" nativeID="B" />
</rn-view>
</rn-view>
);

render(false);
root.takeMountingManagerLogs();

render(true);
expect(root.takeMountingManagerLogs()).toEqual([
'Remove {type: "View", parentNativeID: "Q", index: 0, nativeID: (N/A)}',
'Remove {type: "View", parentNativeID: (N/A), index: 2, nativeID: "B"}',
'Remove {type: "View", parentNativeID: (N/A), index: 1, nativeID: "A"}',
'Remove {type: "View", parentNativeID: (N/A), index: 0, nativeID: "K"}',
'Delete {type: "View", nativeID: (N/A)}',
'Create {type: "View", nativeID: (N/A)}',
'Insert {type: "View", parentNativeID: "Q", index: 0, nativeID: (N/A)}',
'Insert {type: "View", parentNativeID: (N/A), index: 0, nativeID: "K"}',
'Insert {type: "View", parentNativeID: (N/A), index: 1, nativeID: "A"}',
'Insert {type: "View", parentNativeID: (N/A), index: 2, nativeID: "B"}',
]);
expect(root.getRenderedOutput({props: ['nativeID']}).toJSX()).toEqual(
expectedOutput,
);

render(false);
expect(root.takeMountingManagerLogs()).toEqual([
'Remove {type: "View", parentNativeID: (N/A), index: 2, nativeID: "B"}',
'Remove {type: "View", parentNativeID: (N/A), index: 1, nativeID: "A"}',
'Remove {type: "View", parentNativeID: (N/A), index: 0, nativeID: "K"}',
'Remove {type: "View", parentNativeID: "Q", index: 0, nativeID: (N/A)}',
'Delete {type: "View", nativeID: (N/A)}',
'Create {type: "View", nativeID: (N/A)}',
'Insert {type: "View", parentNativeID: (N/A), index: 0, nativeID: "K"}',
'Insert {type: "View", parentNativeID: (N/A), index: 1, nativeID: "A"}',
'Insert {type: "View", parentNativeID: (N/A), index: 2, nativeID: "B"}',
'Insert {type: "View", parentNativeID: "Q", index: 0, nativeID: (N/A)}',
]);
expect(root.getRenderedOutput({props: ['nativeID']}).toJSX()).toEqual(
expectedOutput,
);
});
});

describe('reconciliation of setNativeProps and React commit', () => {
Expand Down
Loading