-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Closed
Labels
Area: Component ViewsArea: ViewNew ArchitectureBroad category for issues that apply to the RN "new" architecture of Turbo Modules + FabricBroad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabricbug
Milestone
Description
Problem Description
The below example requires the outer view have some dummy no-op onPointer events in order for the inner view to property get the PointerLeave event.
We should work out why thats required, and fix it.
Steps To Reproduce
import React from 'react';
import {AppRegistry, View} from 'react-native';
const noop = () => {};
const Bootstrap = () => {
const [hover, setHover] = React.useState(false);
const setHoverTrue = React.useCallback(() => setHover(true), [setHover]);
const setHoverFalse = React.useCallback(() => setHover(false), [setHover]);
return (
<View
style={{flexDirection: 'row', gap: 8}}
onPointerEnter={noop}
onPointerLeave={noop}>
<View
onPointerEnter={setHoverTrue}
onPointerLeave={setHoverFalse}
style={{
margin: 5,
width: 100,
height: 100,
backgroundColor: hover ? 'red' : 'green',
}}></View>
</View>
);
};
AppRegistry.registerComponent('Bootstrap', () => Bootstrap);Expected Results
No response
CLI version
npx @react-native-community/cli -v
Environment
npx @react-native-community/cli infoCommunity Modules
No response
Target Platform Version
None
Target Device(s)
No response
Visual Studio Version
None
Build Configuration
None
Snack, code example, screenshot, or link to a repository
No response
Metadata
Metadata
Assignees
Labels
Area: Component ViewsArea: ViewNew ArchitectureBroad category for issues that apply to the RN "new" architecture of Turbo Modules + FabricBroad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabricbug
Type
Projects
Status
Done