Skip to content

Commit 04ef36d

Browse files
axyzaxyz
committed
reproduce bug
1 parent fe0c648 commit 04ef36d

File tree

7 files changed

+141
-120
lines changed

7 files changed

+141
-120
lines changed

‎ReproducerApp/App.tsx‎

Lines changed: 40 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -5,126 +5,58 @@
55
* @format
66
*/
77

8-
import React from 'react';
9-
import type {PropsWithChildren} from 'react';
10-
import {
11-
ScrollView,
12-
StatusBar,
13-
StyleSheet,
14-
Text,
15-
useColorScheme,
16-
View,
17-
} from 'react-native';
18-
19-
import {
20-
Colors,
21-
DebugInstructions,
22-
Header,
23-
LearnMoreLinks,
24-
ReloadInstructions,
25-
} from 'react-native/Libraries/NewAppScreen';
26-
27-
type SectionProps = PropsWithChildren<{
28-
title: string;
29-
}>;
30-
31-
function Section({children, title}: SectionProps): React.JSX.Element {
32-
const isDarkMode = useColorScheme() === 'dark';
33-
return (
34-
<View style={styles.sectionContainer}>
35-
<Text
36-
style={[
37-
styles.sectionTitle,
38-
{
39-
color: isDarkMode ? Colors.white : Colors.black,
40-
},
41-
]}>
42-
{title}
43-
</Text>
44-
<Text
45-
style={[
46-
styles.sectionDescription,
47-
{
48-
color: isDarkMode ? Colors.light : Colors.dark,
49-
},
50-
]}>
51-
{children}
52-
</Text>
53-
</View>
54-
);
55-
}
8+
import React, {useRef} from 'react';
9+
import {Text, Pressable, StyleSheet, Button} from 'react-native';
10+
import {GestureHandlerRootView} from 'react-native-gesture-handler';
11+
import BottomSheet, {BottomSheetView} from '@gorhom/bottom-sheet';
5612

5713
function App(): React.JSX.Element {
58-
const isDarkMode = useColorScheme() === 'dark';
14+
const [count, setCount] = React.useState(0);
15+
const [pressCount, setPressCount] = React.useState(0);
5916

60-
const backgroundStyle = {
61-
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
62-
};
17+
// ref
18+
const bottomSheetRef = useRef<BottomSheet>(null);
6319

64-
/*
65-
* To keep the template simple and small we're adding padding to prevent view
66-
* from rendering under the System UI.
67-
* For bigger apps the reccomendation is to use `react-native-safe-area-context`:
68-
* https://github.com/AppAndFlow/react-native-safe-area-context
69-
*
70-
* You can read more about it here:
71-
* https://github.com/react-native-community/discussions-and-proposals/discussions/827
72-
*/
73-
const safePadding = '5%';
20+
const handleCloseButton = () => {
21+
bottomSheetRef.current?.close();
22+
};
7423

7524
return (
76-
<View style={backgroundStyle}>
77-
<StatusBar
78-
barStyle={isDarkMode ? 'light-content' : 'dark-content'}
79-
backgroundColor={backgroundStyle.backgroundColor}
25+
<GestureHandlerRootView style={styles.container}>
26+
<Pressable
27+
style={{padding: 16}}
28+
onPointerDown={() => setCount(n => n + 1)}
29+
onPressIn={() => setPressCount(n => n + 1)}>
30+
<Text>Press me</Text>
31+
</Pressable>
32+
<Text style={{marginBottom: 16}}>
33+
pointer: {count} -- press: {pressCount}
34+
</Text>
35+
36+
<Button
37+
title="Open Sheet"
38+
onPress={() => bottomSheetRef.current?.expand()}
8039
/>
81-
<ScrollView
82-
style={backgroundStyle}>
83-
<View style={{paddingRight: safePadding}}>
84-
<Header/>
85-
</View>
86-
<View
87-
style={{
88-
backgroundColor: isDarkMode ? Colors.black : Colors.white,
89-
paddingHorizontal: safePadding,
90-
paddingBottom: safePadding,
91-
}}>
92-
<Section title="Step One">
93-
Edit <Text style={styles.highlight}>App.tsx</Text> to change this
94-
screen and then come back to see your edits.
95-
</Section>
96-
<Section title="See Your Changes">
97-
<ReloadInstructions />
98-
</Section>
99-
<Section title="Debug">
100-
<DebugInstructions />
101-
</Section>
102-
<Section title="Learn More">
103-
Read the docs to discover what to do next:
104-
</Section>
105-
<LearnMoreLinks />
106-
</View>
107-
</ScrollView>
108-
</View>
40+
41+
<BottomSheet ref={bottomSheetRef} enablePanDownToClose>
42+
<Button title="close" onPress={handleCloseButton} />
43+
<BottomSheetView style={styles.contentContainer}>
44+
<Text>Awesome 🎉</Text>
45+
</BottomSheetView>
46+
</BottomSheet>
47+
</GestureHandlerRootView>
10948
);
11049
}
11150

11251
const styles = StyleSheet.create({
113-
sectionContainer: {
114-
marginTop: 32,
115-
paddingHorizontal: 24,
116-
},
117-
sectionTitle: {
118-
fontSize: 24,
119-
fontWeight: '600',
120-
},
121-
sectionDescription: {
122-
marginTop: 8,
123-
fontSize: 18,
124-
fontWeight: '400',
52+
container: {
53+
flex: 1,
12554
},
126-
highlight: {
127-
fontWeight: '700',
55+
contentContainer: {
56+
flex: 1,
57+
height: 400,
58+
padding: 36,
59+
alignItems: 'center',
12860
},
12961
});
13062

‎ReproducerApp/android/app/src/main/java/com/reproducerapp/MainApplication.kt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import com.facebook.react.defaults.DefaultReactNativeHost
1212
import com.facebook.react.soloader.OpenSourceMergedSoMapping
1313
import com.facebook.soloader.SoLoader
1414

15+
import com.facebook.react.config.ReactFeatureFlags;
16+
1517
class MainApplication : Application(), ReactApplication {
1618

1719
override val reactNativeHost: ReactNativeHost =
@@ -34,6 +36,7 @@ class MainApplication : Application(), ReactApplication {
3436
get() = getDefaultReactHost(applicationContext, reactNativeHost)
3537

3638
override fun onCreate() {
39+
ReactFeatureFlags.dispatchPointerEvents = true;
3740
super.onCreate()
3841
SoLoader.init(this, OpenSourceMergedSoMapping)
3942
if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {

‎ReproducerApp/babel.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
module.exports = {
22
presets: ['module:@react-native/babel-preset'],
3+
plugins: ['react-native-reanimated/plugin'],
34
};

‎ReproducerApp/index.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,15 @@
22
* @format
33
*/
44

5+
import ReactNativeFeatureFlags from 'react-native/Libraries/ReactNative/ReactNativeFeatureFlags';
6+
7+
// enable the JS-side of the w3c PointerEvent implementation
8+
ReactNativeFeatureFlags.shouldEmitW3CPointerEvents = () => true;
9+
10+
// enable hover events in Pressibility to be backed by the PointerEvent implementation
11+
ReactNativeFeatureFlags.shouldPressibilityUseW3CPointerEventsForHover = () =>
12+
true;
13+
514
import {AppRegistry} from 'react-native';
615
import App from './App';
716
import {name as appName} from './app.json';

‎ReproducerApp/ios/ReproducerApp/AppDelegate.swift‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import ReactAppDependencyProvider
66
@main
77
class AppDelegate: RCTAppDelegate {
88
override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
9+
RCTSetDispatchW3CPointerEvents(true)
910
self.moduleName = "ReproducerApp"
1011
self.dependencyProvider = RCTAppDependencyProvider()
1112

‎ReproducerApp/package.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,11 @@
1010
"test": "jest"
1111
},
1212
"dependencies": {
13+
"@gorhom/bottom-sheet": "^5.1.2",
1314
"react": "19.0.0",
14-
"react-native": "0.78.0"
15+
"react-native": "0.78.0",
16+
"react-native-gesture-handler": "^2.24.0",
17+
"react-native-reanimated": "^3.17.1"
1518
},
1619
"devDependencies": {
1720
"@babel/core": "^7.25.2",
@@ -36,4 +39,5 @@
3639
"engines": {
3740
"node": ">=18"
3841
}
39-
}
42+
}
43+

0 commit comments

Comments
 (0)