Skip to content

Commit 96990ba

Browse files
authored
fix(Android): pressables under sheets dimming view intercept gesture events (#2740)
## Description Regression introduced in 4.9.0, when adding backward compatibility in #2730. I've inverted the logical condition checking whether dimming view blocks gestures and returned `PointerEvents.AUTO` when it wasn't supposed do block. This PR fixes the condition. Fixes #2738 ## Test code and steps to reproduce Enhanced `TestFormSheet` so that it allows to verify that it works correctly now. ## Checklist - [x] Included code example that can be used to test this change - [ ] Ensured that CI passes
1 parent 4bfd209 commit 96990ba

File tree

5 files changed

+28
-18
lines changed

5 files changed

+28
-18
lines changed

android/src/versioned/pointerevents/77/com/swmansion/rnscreens/bottomsheet/DimmingViewPointerEvents.kt

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@ package com.swmansion.rnscreens.bottomsheet
22

33
import com.facebook.react.uimanager.PointerEvents
44
import com.facebook.react.uimanager.ReactPointerEventsView
5-
import com.swmansion.rnscreens.bottomsheet.DimmingView
65

7-
8-
internal class DimmingViewPointerEventsImpl(val dimmingView: DimmingView) : ReactPointerEventsView {
9-
override fun getPointerEvents(): PointerEvents = if (dimmingView.blockGestures == false) PointerEvents.AUTO else PointerEvents.NONE
6+
internal class DimmingViewPointerEventsImpl(
7+
val dimmingView: DimmingView,
8+
) : ReactPointerEventsView {
9+
override fun getPointerEvents(): PointerEvents = if (dimmingView.blockGestures) PointerEvents.AUTO else PointerEvents.NONE
1010
}
1111

12-
internal class DimmingViewPointerEventsProxy(var pointerEventsImpl: DimmingViewPointerEventsImpl?) :
13-
ReactPointerEventsView {
12+
internal class DimmingViewPointerEventsProxy(
13+
var pointerEventsImpl: DimmingViewPointerEventsImpl?,
14+
) : ReactPointerEventsView {
1415
override fun getPointerEvents(): PointerEvents = pointerEventsImpl?.pointerEvents ?: PointerEvents.NONE
1516
}

android/src/versioned/pointerevents/latest/com/swmansion/rnscreens/bottomsheet/DimmingViewPointerEvents.kt

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,16 @@ package com.swmansion.rnscreens.bottomsheet
33
import com.facebook.react.uimanager.PointerEvents
44
import com.facebook.react.uimanager.ReactPointerEventsView
55

6-
7-
internal class DimmingViewPointerEventsImpl(val dimmingView: DimmingView) : ReactPointerEventsView {
6+
internal class DimmingViewPointerEventsImpl(
7+
val dimmingView: DimmingView,
8+
) : ReactPointerEventsView {
89
override val pointerEvents: PointerEvents
9-
get() = if (dimmingView.blockGestures == false) PointerEvents.AUTO else PointerEvents.NONE
10+
get() = if (dimmingView.blockGestures) PointerEvents.AUTO else PointerEvents.NONE
1011
}
1112

12-
internal class DimmingViewPointerEventsProxy(var pointerEventsImpl: DimmingViewPointerEventsImpl?) :
13-
ReactPointerEventsView {
13+
internal class DimmingViewPointerEventsProxy(
14+
var pointerEventsImpl: DimmingViewPointerEventsImpl?,
15+
) : ReactPointerEventsView {
1416
override val pointerEvents: PointerEvents
1517
get() = pointerEventsImpl?.pointerEvents ?: PointerEvents.NONE
1618
}

apps/src/shared/Spacer.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@ import React, { ReactNode } from 'react';
22
import { View } from 'react-native';
33

44
interface Props {
5-
children: ReactNode;
5+
children?: ReactNode;
6+
space?: number
67
}
78

8-
export const Spacer = ({ children }: Props): React.JSX.Element => (
9-
<View style={{ margin: 10 }}>{children}</View>
9+
export const Spacer = ({ children, space }: Props): React.JSX.Element => (
10+
<View style={{ margin: space ?? 10 }}>{children}</View>
1011
);

apps/src/tests/Test1096.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const styles = StyleSheet.create({
8282
flex: 1,
8383
justifyContent: 'center',
8484
alignItems: 'center',
85-
backgroundColor: `rgba(0,0,0,0.5)`,
85+
backgroundColor: 'rgba(0,0,0,0.5)',
8686
},
8787
box: {
8888
width: 40,

apps/src/tests/TestFormSheet.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { NavigationContainer, RouteProp } from '@react-navigation/native';
22
import { NativeStackNavigationProp, createNativeStackNavigator } from '@react-navigation/native-stack';
3-
import React, { useLayoutEffect } from 'react';
3+
import React from 'react';
44
import { Button, Text, TextInput, View } from 'react-native';
5+
import PressableWithFeedback from '../shared/PressableWithFeedback';
6+
import { Spacer } from '../shared';
57

68
type RouteParamList = {
79
Home: undefined;
@@ -19,6 +21,10 @@ function Home({ navigation }: RouteProps<'Home'>) {
1921
return (
2022
<View style={{ flex: 1, backgroundColor: 'lightsalmon' }}>
2123
<Button title="Open FormSheet" onPress={() => navigation.navigate('FormSheet')} />
24+
<Spacer space={12} />
25+
<PressableWithFeedback>
26+
<View style={{ width: '100%', height: 50 }} />
27+
</PressableWithFeedback>
2228
</View>
2329
);
2430
}
@@ -52,9 +58,9 @@ export default function App() {
5258
<Stack.Screen name="Home" component={Home} />
5359
<Stack.Screen name="FormSheet" component={FormSheet} options={{
5460
presentation: 'formSheet',
55-
sheetAllowedDetents: [0.4, 0.75, 0.9],
61+
sheetAllowedDetents: [0.4, 0.6, 0.9],
5662
//sheetAllowedDetents: 'fitToContents',
57-
sheetLargestUndimmedDetentIndex: 1,
63+
sheetLargestUndimmedDetentIndex: 0,
5864
sheetCornerRadius: 8,
5965
headerShown: false,
6066
contentStyle: {

0 commit comments

Comments
 (0)