feat: example updated (#22)

gajjartejas · Oct 30, 2023 · 57544bb · 57544bb
1 parent 420a3c8
commit 57544bb
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 56 deletions.
diff --git a/example/App.tsx b/example/App.tsx
@@ -1,80 +1,61 @@
-import React, {useRef, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {
   SafeAreaView,
   ScrollView,
   StatusBar,
   StyleSheet,
   Text,
   TextInput,
-  useColorScheme,
   View,
   TouchableOpacity,
 } from 'react-native';
 
-import {Colors} from 'react-native/Libraries/NewAppScreen';
 import LanPortScanner, {
-  LSConfig,
+  LSScanConfig,
   LSSingleScanResult,
 } from 'react-native-lan-port-scanner';
 
 const Section: React.FC<{
   title: string;
   children: any;
 }> = ({children, title}) => {
-  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>
+      <Text style={[styles.sectionTitle]}>{title}</Text>
+      <Text style={[styles.sectionDescription]}>{children}</Text>
     </View>
   );
 };
 
+const validateIPAddresses = (ipaddress: string): boolean => {
+  return /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(
+    ipaddress,
+  );
+};
+
+const backgroundStyle = {
+  backgroundColor: 'white',
+  flex: 1,
+};
+
 const App = () => {
-  const isDarkMode = useColorScheme() === 'dark';
   const resultsRef = useRef<LSSingleScanResult[]>([]);
 
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-    flex: 1,
-  };
-
   const [ipAddress, setIPAddress] = useState('');
   const [subnetMask, setSubnetMask] = useState('');
   const [ports, setPorts] = useState('80, 443, 21, 22, 110, 995, 143, 993');
   const [progress, setProgress] = useState('');
   const [resultItems, setResultItems] = useState<LSSingleScanResult[]>([]);
 
-  const validateIPAddresses = (ipaddress: string): boolean => {
-    return /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(
-      ipaddress,
-    );
-  };
-
-  const getInfo = async () => {
-    //Returns `LSNetworkInfo`
-    const networkInfo = await LanPortScanner.getNetworkInfo();
+  useEffect(() => {
+    (async () => {
+      const networkInfo = await LanPortScanner.getNetworkInfo();
 
-    //Set values
-    setIPAddress(networkInfo.ipAddress);
-    setSubnetMask(networkInfo.subnetMask);
-  };
+      //Set values
+      setIPAddress(networkInfo.ipAddress);
+      setSubnetMask(networkInfo.subnetMask);
+    })();
+  }, []);
 
   const resetScan = () => {
     resultsRef.current = [];
@@ -117,8 +98,10 @@ const App = () => {
       subnetMask: subnetMask,
     };
 
-    let config: LSConfig = {
+    //Either provide networkInfo or ipRange
+    let config: LSScanConfig = {
       networkInfo: networkInfo,
+      //ipRange: ['192.168.1.1'],
       ports: portArray, //Specify port here
       timeout: 1000, //Timeout for each thread in ms
       threads: 150, //Number of threads
@@ -138,14 +121,14 @@ const App = () => {
       },
       results => {
         console.log(results); // This will call after scan end.
-        setProgress('');
+        setProgress('Finished!');
       },
     );
   };
 
   return (
     <SafeAreaView style={backgroundStyle}>
-      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
+      <StatusBar barStyle={'dark-content'} />
       <ScrollView
         contentInsetAdjustmentBehavior="automatic"
         style={backgroundStyle}>
@@ -170,16 +153,13 @@ const App = () => {
             value={ports}
             style={styles.textinput}
           />
-          <TouchableOpacity style={styles.button} onPress={getInfo}>
-            <Text style={styles.buttonText}>{'Get Info'}</Text>
-          </TouchableOpacity>
 
           <TouchableOpacity style={styles.button} onPress={startScan}>
             <Text style={styles.buttonText}>{'Start Scan'}</Text>
           </TouchableOpacity>
 
           {!!progress && (
-            <Text style={styles.progress}>{`Prgoress: ${progress}`}</Text>
+            <Text style={styles.progress}>{`Progress: ${progress}`}</Text>
           )}
 
           {resultItems.map(item => {

diff --git a/example/package-lock.json b/example/package-lock.json
diff --git a/example/package.json b/example/package.json
@@ -12,7 +12,7 @@
   "dependencies": {
     "react": "18.2.0",
     "react-native": "0.72.6",
-    "react-native-lan-port-scanner": "^1.2.0",
+    "react-native-lan-port-scanner": "github:gajjartejas/react-native-lan-port-scanner",
     "react-native-tcp": "github:gajjartejas/react-native-tcp"
   },
   "devDependencies": {