Creating systematic structure for UI

App.tsx

@@ -1,121 +0,0 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- */
-
-import React, { useRef, useState } from 'react';
-import {PERMISSIONS, request} from 'react-native-permissions';
-import { Button, NativeModules, PermissionsAndroid, StatusBar, SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native';
-interface ILog {
-  command: string;
-  result: any;
-}
-/** const requestPhoneStatePermission = async () => {
-*   try {
-*     const granted = await PermissionsAndroid.request(
-*       PermissionsAndroid.READ_PHONE_STATE,
-*       {
-*         title: 'Phone State Permission',
-*         message:
-*           'LPA App needs acces to your phone state ' +
-*           'Grant permission for accessing eid',
-*         buttonNeutral: 'Ask Me Later',
-*         buttonNegative: 'Cancel',
-*         buttonPositive: 'OK',
-*       },
-*     );
-*     if (granted === PermissionsAndroid.RESULTS.GRANTED) {
-*       console.log('Phone State Access Granted');
-*     } else {
-*       console.log('Permission denied');
-*     }
-*   } catch (err) {
-*     console.log(err);
-*   }
-* };
-*/
-
-export default function App() {
-  const [logs, setLogs] = useState<Array<ILog>>([]);
-
-  const scrollViewRef = useRef<any>();
-
-  const getEIDs = async () => {
-    try {
-      //await requestPhoneStatePermission();
-      //console.log("NativeModules.EuiccManager: ", NativeModules.EuiccManager);
-      const eid = await NativeModules.EuiccManager.getEID();
-      console.log("EID: ", eid);
-    } catch(e) {
-      console.log("error occurred: ", e);
-    }
-  };
-
-  return (
-    <SafeAreaView>
-      <View style={styles.mainView}>
-        <View style={styles.header}>
-          <Text style={styles.headerText}>RN eSIM Manager</Text>
-        </View>
-        <ScrollView
-          style={styles.logsContainer}
-          contentContainerStyle={{ paddingHorizontal: 4 }}
-          ref={scrollViewRef}
-          onContentSizeChange={() => scrollViewRef?.current?.scrollToEnd({ animated: true })}
-        >
-          {logs.map((log, index) => (
-            <>
-              <Text style={styles.logText} key={index}>
-                {log.command} :
-              </Text>
-              <Text style={styles.logTextResult} key={`result-${index}`}>
-                {`${log.result}`}
-              </Text>
-            </>
-          ))}
-        </ScrollView>
-        <View style={styles.button}>
-          <Button title={'Get EIDs'} onPress={getEIDs}></Button>
-        </View>
-      </View>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  header: {
-    paddingVertical: 20,
-    alignItems: 'center',
-  },
-  headerText: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  button: {
-    paddingVertical: 10,
-  },
-  activateEsimContainer: {
-    paddingVertical: 10,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  mainView: {
-    paddingHorizontal: 18,
-  },
-  logsContainer: {
-    height: 300,
-    backgroundColor: 'black',
-    borderRadius: 5,
-  },
-  logText: {
-    color: 'lightgrey',
-  },
-  logTextResult: {
-    color: 'lightgrey',
-    marginLeft: 20,
-    marginBottom: 5,
-  },
-});

__tests__/App.test.tsx

@@ -4,7 +4,7 @@
 
 import 'react-native';
 import React from 'react';
-import App from '../App';
+import App from '../android/src/App';
 
 // Note: import explicitly to use the types shipped with jest.
 import {it} from '@jest/globals';

android/src/App.tsx

@@ -0,0 +1,84 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ */
+
+import React, { useRef, useState } from 'react';
+import { 
+  Button, 
+  NativeModules, 
+  SafeAreaView, 
+  ScrollView, 
+  StyleSheet, 
+  Text, 
+  View,
+  TouchableOpacity
+} from 'react-native';
+import Modal from "react-native-modal";
+
+interface ILog {
+  command: string;
+  result: any;
+}
+
+export default function App() {
+  const [mapping, setMapping] = useState(null);
+  const [isModalVisible, setIsModalVisible] = React.useState(false);
+
+  const toggleModalVisibility = () => {
+    setIsModalVisible(visible => !visible);
+  }
+
+  // Function to handle button click and display the mapping values
+  const handleButtonClick = async () => {
+    const newMapping = await NativeModules.SimData.getSimCardsNative();
+    setMapping(newMapping);
+  };
+
+  const getEIDs = async () => {
+    try {
+      const eid = await NativeModules.EuiccManager.getEID();
+      console.log("EID: ", eid);
+    } catch(e) {
+      console.log("error occurred: ", e);
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Tab One</Text>
+      <View style={styles.separator} />
+      <Button title="button" onPress={toggleModalVisibility} />
+      <Modal isVisible={isModalVisible}>
+        <View style={{ flex: 1 }}>
+          <Text>Hello!</Text>
+          <Button title="Hide modal" onPress={toggleModalVisibility} />
+        </View>
+      </Modal>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "bold",
+  },
+  text: {
+    fontSize: 16,
+    fontWeight: "400",
+    textAlign: "center",
+  },
+  separator: {
+    marginVertical: 30,
+    height: 1,
+    width: "80%",
+  },
+});

android/src/components/Button.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+export type ButtonProps = {
+  title: string;
+  onPress: () => void;
+};
+export const Button = ({ title, onPress }: ButtonProps) => {
+  return (
+    <TouchableOpacity style={styles.button} onPress={onPress}>
+      <Text style={styles.text}>{title}</Text>
+    </TouchableOpacity>
+  );
+};
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: "blue",
+    marginTop: 15,
+    paddingVertical: 15,
+    borderRadius: 25,
+    width: "80%",
+    alignItems: "center",
+  },
+  text: {
+    color: "white",
+    fontWeight: "700",
+    fontSize: 18,
+  },
+});

index.js

@@ -3,7 +3,7 @@
  */
 
 import { AppRegistry } from 'react-native';
-import App from './App';
+import App from './android/src/App';
 import {name as appName} from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);

package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.0.1",
       "dependencies": {
         "react": "18.2.0",
-        "react-native": "0.73.6"
+        "react-native": "0.73.6",
+        "react-native-modal": "^13.0.1"
       },
       "devDependencies": {
         "@babel/core": "^7.20.0",
@@ -11915,6 +11916,27 @@
         "react": "18.2.0"
       }
     },
+    "node_modules/react-native-animatable": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/react-native-animatable/-/react-native-animatable-1.3.3.tgz",
+      "integrity": "sha512-2ckIxZQAsvWn25Ho+DK3d1mXIgj7tITkrS4pYDvx96WyOttSvzzFeQnM2od0+FUMzILbdHDsDEqZvnz1DYNQ1w==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      }
+    },
+    "node_modules/react-native-modal": {
+      "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/react-native-modal/-/react-native-modal-13.0.1.tgz",
+      "integrity": "sha512-UB+mjmUtf+miaG/sDhOikRfBOv0gJdBU2ZE1HtFWp6UixW9jCk/bhGdHUgmZljbPpp0RaO/6YiMmQSSK3kkMaw==",
+      "dependencies": {
+        "prop-types": "^15.6.2",
+        "react-native-animatable": "1.3.3"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": ">=0.65.0"
+      }
+    },
     "node_modules/react-native/node_modules/@jest/types": {
       "version": "26.6.2",
       "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "18.2.0",
-    "react-native": "0.73.6"
+    "react-native": "0.73.6",
+    "react-native-modal": "^13.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",