issue example

wvq · Jan 19, 2025 · e9c78d8 · e9c78d8
1 parent 54d15e7
commit e9c78d8
Show file tree

Hide file tree

Showing 5 changed files with 204 additions and 93 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/ReproducerApp/App.tsx b/ReproducerApp/App.tsx
@@ -5,114 +5,74 @@
  * @format
  */
 
-import React from 'react';
-import type {PropsWithChildren} from 'react';
+import React, {useState} from 'react';
 import {
+  Button,
   SafeAreaView,
   ScrollView,
   StatusBar,
   StyleSheet,
   Text,
+  ToastAndroid,
   useColorScheme,
   View,
 } from 'react-native';
 
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  LearnMoreLinks,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-type SectionProps = PropsWithChildren<{
-  title: string;
-}>;
-
-function Section({children, title}: SectionProps): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-  return (
-    <View style={styles.sectionContainer}>
-      <Text
-        style={[
-          styles.sectionTitle,
-          {
-            color: isDarkMode ? Colors.white : Colors.black,
-          },
-        ]}>
-        {title}
-      </Text>
-      <Text
-        style={[
-          styles.sectionDescription,
-          {
-            color: isDarkMode ? Colors.light : Colors.dark,
-          },
-        ]}>
-        {children}
-      </Text>
-    </View>
-  );
-}
+import {createStaticNavigation} from '@react-navigation/native';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
 
-function App(): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
+function HomeScreen() {
+  const [count, setCount] = useState(0);
 
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  const onPress = () => {
+    setCount((state) => state + 1);
+    ToastAndroid.showWithGravityAndOffset(
+      `pressed: ${count}`,
+      ToastAndroid.SHORT,
+      ToastAndroid.TOP,
+      0,
+      200
+    );
   };
 
   return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode ? Colors.black : Colors.white,
-          }}>
-          <Section title="Step One">
-            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
-            screen and then come back to see your edits.
-          </Section>
-          <Section title="See Your Changes">
-            <ReloadInstructions />
-          </Section>
-          <Section title="Debug">
-            <DebugInstructions />
-          </Section>
-          <Section title="Learn More">
-            Read the docs to discover what to do next:
-          </Section>
-          <LearnMoreLinks />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
+    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+      <Text>Home Screen</Text>
+      <Button title="test touchable" onPress={onPress}></Button>
+    </View>
   );
 }
 
-const styles = StyleSheet.create({
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-  },
-  highlight: {
-    fontWeight: '700',
+const RootStack = createNativeStackNavigator({
+  screens: {
+    Home: {
+      screen: HomeScreen,
+      options: {
+        title: 'Home',
+        headerRight: () => (
+          <Button
+            title="test onPress"
+            onPress={() => {
+              console.log(`pressed top`);
+              ToastAndroid.showWithGravityAndOffset(
+                `pressed top`,
+                ToastAndroid.SHORT,
+                ToastAndroid.TOP,
+                0,
+                200
+              );
+            }
+            }></Button>
+        ),
+      },
+    },
   },
 });
 
+const Navigation = createStaticNavigation(RootStack);
+
+function App(): React.JSX.Element {
+  return <Navigation />;
+}
+
 export default App;
diff --git a/ReproducerApp/android/app/src/main/java/com/reproducerapp/MainActivity.kt b/ReproducerApp/android/app/src/main/java/com/reproducerapp/MainActivity.kt
@@ -1,11 +1,16 @@
 package com.reproducerapp
 
+import android.os.Bundle
 import com.facebook.react.ReactActivity
 import com.facebook.react.ReactActivityDelegate
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
 import com.facebook.react.defaults.DefaultReactActivityDelegate
 
 class MainActivity : ReactActivity() {
+
+  override fun onCreate(savedInstanceState: Bundle?) {
+    super.onCreate(null)
+  }
 
   /**
    * Returns the name of the main component registered from JavaScript. This is used to schedule

diff --git a/ReproducerApp/package.json b/ReproducerApp/package.json
@@ -10,8 +10,12 @@
     "test": "jest"
   },
   "dependencies": {
+    "@react-navigation/native": "^7.0.14",
+    "@react-navigation/native-stack": "^7.2.0",
     "react": "18.3.1",
-    "react-native": "0.76.6"
+    "react-native": "0.76.6",
+    "react-native-safe-area-context": "^5.1.0",
+    "react-native-screens": "^4.5.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
@@ -36,4 +40,4 @@
   "engines": {
     "node": ">=18"
   }
-}
+}