Skip to content

Commit da4b15c

Browse files
hassankhanhassankhan
committed
fix: replace pointerEvents props with styles
By replacing usages of `pointerEvents` to use styles instead of props, we won't get an annoying warning in the logs. The underlying issue in React Native Web which prevented children of a `pointer-events: box-none` element from receiving pointer events is resolved by necolas/react-native-web#2789 Fixes react-navigation#12441
1 parent 69b2c14 commit da4b15c

File tree

13 files changed

+85
-46
lines changed

13 files changed

+85
-46
lines changed

‎packages/bottom-tabs/src/views/BottomTabBar.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -312,6 +312,8 @@ export function BottomTabBar({
312312

313313
const tabBarBackgroundElement = tabBarBackground?.();
314314

315+
console.log({ isTabBarHidden });
316+
315317
return (
316318
<Animated.View
317319
style={[
@@ -380,12 +382,15 @@ export function BottomTabBar({
380382
paddingHorizontal: Math.max(insets.left, insets.right),
381383
},
382384
],
385+
{
386+
pointerEvents: isTabBarHidden ? 'none' : 'auto',
387+
},
383388
tabBarStyle,
384389
]}
385-
pointerEvents={isTabBarHidden ? 'none' : 'auto'}
390+
// pointerEvents={isTabBarHidden ? 'none' : 'auto'}
386391
onLayout={sidebar ? undefined : handleLayout}
387392
>
388-
<View pointerEvents="none" style={StyleSheet.absoluteFill}>
393+
<View style={[StyleSheet.absoluteFill, { pointerEvents: 'none' }]}>
389394
{tabBarBackgroundElement}
390395
</View>
391396
<View

‎packages/elements/src/Header/Header.tsx‎

Lines changed: 32 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -285,32 +285,45 @@ export function Header(props: Props) {
285285

286286
return (
287287
<Animated.View
288-
pointerEvents="box-none"
289-
style={[{ height, minHeight, maxHeight, opacity, transform }]}
288+
style={[
289+
{
290+
pointerEvents: 'box-none',
291+
height,
292+
minHeight,
293+
maxHeight,
294+
opacity,
295+
transform,
296+
},
297+
]}
290298
>
291299
<Animated.View
292-
pointerEvents="box-none"
293-
style={[StyleSheet.absoluteFill, backgroundContainerStyle]}
300+
style={[
301+
StyleSheet.absoluteFill,
302+
{ pointerEvents: 'box-none' },
303+
backgroundContainerStyle,
304+
]}
294305
>
295306
{headerBackground ? (
296307
headerBackground({ style: backgroundStyle })
297308
) : (
298309
<HeaderBackground
299-
pointerEvents={
300-
// Allow touch through the header when background color is transparent
301-
headerTransparent &&
302-
(backgroundStyle.backgroundColor === 'transparent' ||
303-
Color(backgroundStyle.backgroundColor).alpha() === 0)
304-
? 'none'
305-
: 'auto'
306-
}
307-
style={backgroundStyle}
310+
style={[
311+
{
312+
// Allow touch through the header when background color is transparent
313+
pointerEvents:
314+
headerTransparent &&
315+
(backgroundStyle.backgroundColor === 'transparent' ||
316+
Color(backgroundStyle.backgroundColor).alpha() === 0)
317+
? 'none'
318+
: 'auto',
319+
},
320+
backgroundStyle,
321+
]}
308322
/>
309323
)}
310324
</Animated.View>
311-
<View pointerEvents="none" style={{ height: headerStatusBarHeight }} />
325+
<View style={{ pointerEvents: 'none', height: headerStatusBarHeight }} />
312326
<View
313-
pointerEvents="box-none"
314327
style={[
315328
styles.content,
316329
Platform.OS === 'ios' && frame.width >= IPAD_MINI_MEDIUM_WIDTH
@@ -319,7 +332,6 @@ export function Header(props: Props) {
319332
]}
320333
>
321334
<Animated.View
322-
pointerEvents="box-none"
323335
style={[
324336
styles.start,
325337
!searchBarVisible && headerTitleAlign === 'center' && styles.expand,
@@ -332,7 +344,6 @@ export function Header(props: Props) {
332344
{Platform.OS === 'ios' || !searchBarVisible ? (
333345
<>
334346
<Animated.View
335-
pointerEvents="box-none"
336347
style={[
337348
styles.title,
338349
{
@@ -369,7 +380,6 @@ export function Header(props: Props) {
369380
})}
370381
</Animated.View>
371382
<Animated.View
372-
pointerEvents="box-none"
373383
style={[
374384
styles.end,
375385
styles.expand,
@@ -421,6 +431,7 @@ export function Header(props: Props) {
421431

422432
const styles = StyleSheet.create({
423433
content: {
434+
pointerEvents: 'box-none',
424435
flex: 1,
425436
flexDirection: 'row',
426437
alignItems: 'stretch',
@@ -430,16 +441,19 @@ const styles = StyleSheet.create({
430441
},
431442
title: {
432443
justifyContent: 'center',
444+
pointerEvents: 'box-none',
433445
},
434446
start: {
435447
flexDirection: 'row',
436448
alignItems: 'center',
437449
justifyContent: 'flex-start',
450+
pointerEvents: 'box-none',
438451
},
439452
end: {
440453
flexDirection: 'row',
441454
alignItems: 'center',
442455
justifyContent: 'flex-end',
456+
pointerEvents: 'box-none',
443457
},
444458
expand: {
445459
flexGrow: 1,

‎packages/elements/src/Header/HeaderSearchBar.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -156,10 +156,16 @@ function HeaderSearchBarInternal(
156156

157157
return (
158158
<Animated.View
159-
pointerEvents={visible ? 'auto' : 'none'}
160159
aria-live="polite"
161160
aria-hidden={!visible}
162-
style={[styles.container, { opacity: visibleAnim }, style]}
161+
style={[
162+
styles.container,
163+
{
164+
pointerEvents: visible ? 'auto' : 'none',
165+
opacity: visibleAnim,
166+
},
167+
style,
168+
]}
163169
>
164170
<View style={styles.searchbarContainer}>
165171
<HeaderIcon

‎packages/elements/src/ResourceSavingView.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,13 @@ export function ResourceSavingView({
2727
// @ts-expect-error: hidden exists on web, but not in React Native
2828
hidden={!visible}
2929
style={[
30-
{ display: visible ? 'flex' : 'none' },
30+
{
31+
display: visible ? 'flex' : 'none',
32+
pointerEvents: visible ? 'auto' : 'none',
33+
},
3134
styles.container,
3235
style,
3336
]}
34-
pointerEvents={visible ? 'auto' : 'none'}
3537
{...rest}
3638
>
3739
{children}
@@ -52,7 +54,6 @@ export function ResourceSavingView({
5254
// This is an workaround for a bug where the clipped view never re-appears
5355
Platform.OS === 'ios' || Platform.OS === 'macos' ? !visible : true
5456
}
55-
pointerEvents={visible ? 'auto' : 'none'}
5657
style={visible ? styles.attached : styles.detached}
5758
>
5859
{children}
@@ -68,9 +69,11 @@ const styles = StyleSheet.create({
6869
},
6970
attached: {
7071
flex: 1,
72+
pointerEvents: 'auto',
7173
},
7274
detached: {
7375
flex: 1,
7476
top: FAR_FAR_AWAY,
77+
pointerEvents: 'none',
7578
},
7679
});

‎packages/elements/src/Screen.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@ export function Screen(props: Props) {
7171
<NavigationContext.Provider value={navigation}>
7272
<NavigationRouteContext.Provider value={route}>
7373
<View
74-
pointerEvents="box-none"
7574
onLayout={(e) => {
7675
const { height } = e.nativeEvent.layout;
7776

@@ -111,6 +110,7 @@ const styles = StyleSheet.create({
111110
},
112111
header: {
113112
zIndex: 1,
113+
pointerEvents: 'box-none',
114114
},
115115
absolute: {
116116
position: 'absolute',

‎packages/react-native-drawer-layout/src/views/Overlay.native.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,18 @@ export function Overlay({
1616
...rest
1717
}: OverlayProps) {
1818
const animatedStyle = useAnimatedStyle(() => {
19+
const active = progress.value > PROGRESS_EPSILON;
20+
1921
return {
2022
opacity: progress.value,
23+
pointerEvents: active ? 'auto' : 'none',
2124
};
2225
}, [progress]);
2326

2427
const animatedProps = useAnimatedProps(() => {
2528
const active = progress.value > PROGRESS_EPSILON;
2629

2730
return {
28-
'pointerEvents': active ? 'auto' : 'none',
2931
'aria-hidden': !active,
3032
} as const;
3133
}, [progress]);

‎packages/react-native-tab-view/src/TabBar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -622,7 +622,6 @@ export function TabBar<T extends Route>({
622622
return (
623623
<Animated.View onLayout={handleLayout} style={[styles.tabBar, style]}>
624624
<Animated.View
625-
pointerEvents="none"
626625
style={[
627626
styles.indicatorContainer,
628627
scrollEnabled ? { transform: [{ translateX }] as any } : null,
@@ -724,5 +723,6 @@ const styles = StyleSheet.create({
724723
start: 0,
725724
end: 0,
726725
bottom: 0,
726+
pointerEvents: 'none',
727727
},
728728
});

‎packages/react-native-tab-view/src/TabBarItem.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ const TabBarItemInternal = <T extends Route>({
228228
href={href}
229229
style={[styles.pressable, tabContainerStyle]}
230230
>
231-
<View pointerEvents="none" style={[styles.item, tabStyle]}>
231+
<View style={[styles.item, tabStyle]}>
232232
{icon}
233233
<View>
234234
<Animated.View style={{ opacity: inactiveOpacity }}>
@@ -286,6 +286,7 @@ const styles = StyleSheet.create({
286286
justifyContent: 'center',
287287
padding: 10,
288288
minHeight: 48,
289+
pointerEvents: 'none',
289290
},
290291
badge: {
291292
position: 'absolute',

‎packages/stack/src/views/Header/HeaderContainer.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export function HeaderContainer({
5757
const { buildHref } = useLinkBuilder();
5858

5959
return (
60-
<Animated.View pointerEvents="box-none" style={style}>
60+
<Animated.View style={[styles.container, style]}>
6161
{scenes.slice(-3).map((scene, i, self) => {
6262
if ((mode === 'screen' && i !== self.length - 1) || !scene) {
6363
return null;
@@ -164,15 +164,17 @@ export function HeaderContainer({
164164
}
165165
: undefined
166166
}
167-
pointerEvents={isFocused ? 'box-none' : 'none'}
168167
aria-hidden={!isFocused}
169-
style={
168+
style={[
170169
// Avoid positioning the focused header absolutely
171170
// Otherwise accessibility tools don't seem to be able to find it
172171
(mode === 'float' && !isFocused) || headerTransparent
173172
? styles.header
174-
: null
175-
}
173+
: null,
174+
{
175+
pointerEvents: isFocused ? 'box-none' : 'none',
176+
},
177+
]}
176178
>
177179
{header !== undefined ? header(props) : <Header {...props} />}
178180
</View>
@@ -185,6 +187,9 @@ export function HeaderContainer({
185187
}
186188

187189
const styles = StyleSheet.create({
190+
container: {
191+
pointerEvents: 'box-none',
192+
},
188193
header: {
189194
position: 'absolute',
190195
top: 0,

‎packages/stack/src/views/Stack/Card.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -100,10 +100,7 @@ export class Card extends React.Component<Props> {
100100
style,
101101
}: {
102102
style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
103-
}) =>
104-
style ? (
105-
<Animated.View pointerEvents="none" style={[styles.overlay, style]} />
106-
) : null,
103+
}) => (style ? <Animated.View style={[styles.overlay, style]} /> : null),
107104
};
108105

109106
componentDidMount() {
@@ -552,20 +549,21 @@ export class Card extends React.Component<Props> {
552549
collapsable={false}
553550
/>
554551
<View
555-
pointerEvents="box-none"
552+
style={{ pointerEvents: 'box-none' }}
556553
// Make sure this view is not removed on the new architecture, as it causes focus loss during navigation on Android.
557554
// This can happen when the view flattening results in different trees - due to `overflow` style changing in a parent.
558555
collapsable={false}
559556
{...rest}
560557
>
561558
{overlayEnabled ? (
562-
<View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
559+
<View
560+
style={[StyleSheet.absoluteFill, { pointerEvents: 'box-none' }]}
561+
>
563562
{overlay({ style: overlayStyle })}
564563
</View>
565564
) : null}
566565
<Animated.View
567566
style={[styles.container, containerStyle, customContainerStyle]}
568-
pointerEvents="box-none"
569567
>
570568
<PanGestureHandler
571569
enabled={layout.width !== 0 && gestureEnabled}
@@ -591,7 +589,6 @@ export class Card extends React.Component<Props> {
591589
{ backgroundColor },
592590
shadowStyle,
593591
]}
594-
pointerEvents="none"
595592
/>
596593
) : null}
597594
<CardSheet
@@ -614,13 +611,16 @@ export class Card extends React.Component<Props> {
614611
const styles = StyleSheet.create({
615612
container: {
616613
flex: 1,
614+
pointerEvents: 'box-none',
617615
},
618616
overlay: {
619617
flex: 1,
620618
backgroundColor: '#000',
619+
pointerEvents: 'none',
621620
},
622621
shadow: {
623622
position: 'absolute',
623+
pointerEvents: 'none',
624624
},
625625
shadowHorizontal: {
626626
top: 0,

0 commit comments

Comments
 (0)