react native navigation added compled

.vscode/.react/debuggerWorker.js

@@ -0,0 +1,202 @@
+
+// Initialize some variables before react-native code would access them
+var onmessage=null, self=global;
+// Cache Node's original require as __debug__.require
+global.__debug__={require: require};
+// Prevent leaking process.versions from debugger process to
+// worker because pure React Native doesn't do that and some packages as js-md5 rely on this behavior
+Object.defineProperty(process, "versions", {
+    value: undefined
+});
+// TODO: Replace by url.fileURLToPath method when Node 10 LTS become deprecated
+function fileUrlToPath(url) {
+  if (process.platform === 'win32') {
+      return url.toString().replace('file:///', '');
+  } else {
+    return url.toString().replace('file://', '');
+  }
+}
+function getNativeModules() {
+    var NativeModules;
+    try {
+        // This approach is for old RN versions
+        NativeModules = global.require('NativeModules');
+    } catch (err) {
+        // ignore error and try another way for more recent RN versions
+        try {
+            var nativeModuleId;
+            var modules = global.__r.getModules();
+            var ids = Object.keys(modules);
+            for (var i = 0; i < ids.length; i++) {
+              if (modules[ids[i]].verboseName) {
+                 var packagePath = new String(modules[ids[i]].verboseName);
+                 if (packagePath.indexOf('Libraries/BatchedBridge/NativeModules.js') > 0 || packagePath.indexOf('Libraries\\BatchedBridge\\NativeModules.js') > 0) {
+                   nativeModuleId = parseInt(ids[i], 10);
+                   break;
+                 }
+              }
+            }
+          if (nativeModuleId) {
+            NativeModules = global.__r(nativeModuleId);
+          }
+        }
+        catch (err) {
+            // suppress errors
+        }
+    }
+    return NativeModules;
+}
+// Originally, this was made for iOS only
+var vscodeHandlers = {
+    'vscode_reloadApp': function () {
+        var NativeModules = getNativeModules();
+        if (NativeModules && NativeModules.DevSettings) {
+            NativeModules.DevSettings.reload();
+        }
+    },
+    'vscode_showDevMenu': function () {
+        var NativeModules = getNativeModules();
+        if (NativeModules && NativeModules.DevMenu) {
+            NativeModules.DevMenu.show();
+        }
+    }
+};
+process.on("message", function (message) {
+    if (message.data && vscodeHandlers[message.data.method]) {
+        vscodeHandlers[message.data.method]();
+    } else if(onmessage) {
+        onmessage(message);
+    }
+});
+var postMessage = function(message){
+    process.send(message);
+};
+if (!self.postMessage) {
+    self.postMessage = postMessage;
+}
+var importScripts = (function(){
+    var fs=require('fs'), vm=require('vm');
+    return function(scriptUrl){
+        scriptUrl = fileUrlToPath(scriptUrl);
+        var scriptCode = fs.readFileSync(scriptUrl, 'utf8');
+        // Add a 'debugger;' statement to stop code execution
+        // to wait for the sourcemaps to be processed by the debug adapter
+        vm.runInThisContext('debugger;' + scriptCode, {filename: scriptUrl});
+    };
+})();
+
+// Worker is ran as nodejs process, so console.trace() writes to stderr and it leads to error in native app
+// To avoid this console.trace() is overridden to print stacktrace via console.log()
+// Please, see Node JS implementation: https://github.com/nodejs/node/blob/master/lib/internal/console/constructor.js
+console.trace = (function() {
+    return function() {
+        try {
+            var err = {
+                name: 'Trace',
+                message: require('util').format.apply(null, arguments)
+                };
+            // Node uses 10, but usually it's not enough for RN app trace
+            Error.stackTraceLimit = 30;
+            Error.captureStackTrace(err, console.trace);
+            console.log(err.stack);
+        } catch (e) {
+            console.error(e);
+        }
+    };
+})();
+
+// As worker is ran in node, it breaks broadcast-channels package approach of identifying if it’s ran in node:
+// https://github.com/pubkey/broadcast-channel/blob/master/src/util.js#L64
+// To avoid it if process.toString() is called if will return empty string instead of [object process].
+var nativeObjectToString = Object.prototype.toString;
+Object.prototype.toString = function() {
+    if (this === process) {
+        return '';
+    } else {
+        return nativeObjectToString.call(this);
+    }
+};
+
+
+"use strict";
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+/* global __fbBatchedBridge, self, importScripts, postMessage, onmessage: true */
+/* eslint no-unused-vars: 0 */
+
+onmessage = function () {
+  var visibilityState;
+  var showVisibilityWarning = function () {
+    var hasWarned = false;
+    return function () {
+      // Wait until `YellowBox` gets initialized before displaying the warning.
+      if (hasWarned || console.warn.toString().includes('[native code]')) {
+        return;
+      }
+      hasWarned = true;
+      console.warn('Remote debugger is in a background tab which may cause apps to ' + 'perform slowly. Fix this by foregrounding the tab (or opening it in ' + 'a separate window).');
+    };
+  }();
+  var messageHandlers = {
+    executeApplicationScript: function (message, sendReply) {
+      for (var key in message.inject) {
+        self[key] = JSON.parse(message.inject[key]);
+      }
+      var error;
+      try {
+        importScripts(message.url);
+      } catch (err) {
+        error = err.message;
+      }
+      sendReply(null /* result */, error);
+    },
+    setDebuggerVisibility: function (message) {
+      visibilityState = message.visibilityState;
+    }
+  };
+  return function (message) {
+    if (visibilityState === 'hidden') {
+      showVisibilityWarning();
+    }
+    var object = message.data;
+    var sendReply = function (result, error) {
+      postMessage({
+        replyID: object.id,
+        result: result,
+        error: error
+      });
+    };
+    var handler = messageHandlers[object.method];
+    if (handler) {
+      // Special cased handlers
+      handler(object, sendReply);
+    } else {
+      // Other methods get called on the bridge
+      var returnValue = [[], [], [], 0];
+      var error;
+      try {
+        if (typeof __fbBatchedBridge === 'object') {
+          returnValue = __fbBatchedBridge[object.method].apply(null, object.arguments);
+        } else {
+          error = 'Failed to call function, __fbBatchedBridge is undefined';
+        }
+      } catch (err) {
+        error = err.message;
+      } finally {
+        sendReply(JSON.stringify(returnValue), error);
+      }
+    }
+  };
+}();
+
+//# sourceMappingURL=debuggerWorker.js.map
+// Notify debugger that we're done with loading
+// and started listening for IPC messages
+postMessage({workerLoaded:true});

.vscode/launch.json

@@ -3,5 +3,15 @@
     // Hover to view descriptions of existing attributes.
     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
-    "configurations": []
+    "configurations": [
+        {"name":"Run Android Hermes","request":"launch","type":"reactnativedirect","cwd":"${workspaceFolder}","enableDebug":false,"platform":"android"},{
+            "command": "npm start",
+            "name": "Run npm start",
+            "request": "launch",
+            "type": "node-terminal"
+        }
+
+
+
+    ]
 }

App.js

@@ -1,24 +1,19 @@
-import React, { Component } from 'react';
-import { StyleSheet, SafeAreaView,Alert } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
+import React, { Component } from 'react';
+import DetailScreen from './screans/DetailScreen';
+import HomeScreen from './screans/HomeScreen';
+// const Stack = createStackNavigator();
+const Stack =createStackNavigator();
 export default class App extends Component {
   render() {
     return (
-      <SafeAreaView style={[styles.container, styles.horizontal]}>
-
-      </SafeAreaView>
+      <NavigationContainer>
+      <Stack.Navigator initialRouteName='Home'>
+        <Stack.Screen name='Home' component={HomeScreen} />
+        <Stack.Screen name='Details' component={DetailScreen} />
+      </Stack.Navigator>
+      </NavigationContainer>
     );
   }
 }
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  horizontal: {
-    flexDirection: 'column',
-    justifyContent: 'space-around',
-    padding: 10,
-  },
-});

android/build.gradle

@@ -6,6 +6,7 @@ buildscript {
         targetSdkVersion = 34
         ndkVersion = "26.1.10909125"
         kotlinVersion = "1.9.22"
+        enableHermes: true
     }
     repositories {
         google()

navigations/AppNavigation.js

@@ -0,0 +1,22 @@
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import React from 'react';
+import DetailScreen from '../screans/DetailScreen';
+import HomeScreen from '../screans/HomeScreen';
+import ProfileScreen from '../screans/ProfileScreen';
+const Stack = createStackNavigator();
+
+const AppNavigation = () => {
+    return (
+       <NavigationContainer>
+        <Stack.Navigator initialRouteName="Home">
+            <Stack.Screen name="Home" component={HomeScreen} />
+            <Stack.Screen name="Detail" component={DetailScreen} />
+            <Stack.Screen name="Profile" component={ProfileScreen} />
+       </Stack.Navigator>
+    </NavigationContainer>
+    );
+}
+
+export default AppNavigation;
+

package.json

@@ -14,6 +14,7 @@
     "@react-navigation/stack": "^6.3.29",
     "react": "18.2.0",
     "react-native": "0.74.2",
+    "react-native-gesture-handler": "^2.17.1",
     "react-native-material-design": "^0.3.7",
     "react-native-safe-area-context": "^4.10.4",
     "react-native-screens": "^3.31.1"

screans/DetailScreen.js

@@ -1,13 +1,12 @@
-import React, { Component } from 'react';
+import React from 'react';
+import { Text, View } from 'react-native';
 
-class DetailScreen extends Component {
-    render() {
-        return (
-            <div>
-                Details Screen
-            </div>
-        );
-    }
+const DetailScreen = () => {
+    return (
+      <View>
+        <Text > hwllow</Text>
+      </View>
+    );
 }
 
 export default DetailScreen;