searching for new devices

App.js

@@ -41,6 +41,7 @@ import MotorEditActionModalContent, {
 import WaitXSecondsEditActionModalContent from "./src/Screens/Device/modals/EditActions/Wait";
 import StopEditActionModalContent from "./src/Screens/Device/modals/EditActions/Stop";
 import AsyncStorage from "@react-native-async-storage/async-storage";
+import SearchForNewDevicesModalContent from "./src/Screens/SearchForNewDevices";
 
 const Drawer = createDrawerNavigator();
 const Stack = createStackNavigator();
@@ -312,6 +313,17 @@ export function MyApp() {
               })
             }
           />
+
+          <Stack.Screen
+            name="modalSearchForNewDevices"
+            component={SearchForNewDevicesModalContent}
+            options={({ navigation }) =>
+              options({
+                navigation: navigation,
+                pageTitle: t("screens.modalSearchForNewDevices.pageTitle"),
+              })
+            }
+          />
         </Stack.Navigator>
       </NavigationContainer>
 

README.md

@@ -11,3 +11,9 @@ https://stackoverflow.com/questions/68243384/dark-mode-usecolorscheme-always-ret
 https://stackoverflow.com/questions/70493788/i18nextpluralresolver-your-environment-seems-not-to-be-intl-api-compatible-u
 
 https://aboutreact.com/switch-screen-out-of-the-navigation-drawer-in-react-native/
+
+## Helpful for release app to Play Store
+
+https://stackoverflow.com/questions/66804691/include-android-permission-in-expo-react-native
+
+https://expo.canny.io/feature-requests/p/zeroconf-protocol-support

app.json

@@ -14,14 +14,25 @@
     "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true,
-      "userInterfaceStyle": "automatic"
+      "userInterfaceStyle": "automatic",
+      "infoPlist": {
+        "NSBonjourServices": "For connecting devices to the app"
+      }
     },
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
       },
-      "userInterfaceStyle": "automatic"
+      "userInterfaceStyle": "automatic",
+      "permissions": [
+        "ACCESS_NETWORK_STATE",
+        "ACCESS_WIFI_STATE",
+        "CHANGE_WIFI_MULTICAST_STATE",
+        "android.permission.ACCESS_NETWORK_STATE",
+        "android.permission.ACCESS_WIFI_STATE",
+        "android.permission.CHANGE_WIFI_MULTICAST_STATE"
+      ]
     },
     "web": {
       "favicon": "./assets/favicon.png"

locales/de.json

@@ -176,6 +176,9 @@
       },
       "expertModeTitle": "Experten Modus",
       "expertModeDescription": "Durch das Einschalten werden zusätzliche Funktionen in der App freigeschaltet, wie beispielsweise die Möglichkeit, benutzerdefinierte Farbcodes anzugeben."
+    },
+    "modalSearchForNewDevices": {
+      "pageTitle": "Suche nach Geräten"
     }
   }
 }

locales/en.json

@@ -176,6 +176,9 @@
       },
       "expertModeTitle": "Expert mode",
       "expertModeDescription": "Turning it on unlocks additional features in the app, such as the ability to specify custom color codes."
+    },
+    "modalSearchForNewDevices": {
+      "pageTitle": "Search for devices"
     }
   }
 }

package-lock.json

@@ -29,6 +29,7 @@
         "react-native-screens": "~3.20.0",
         "react-native-tab-view": "^3.5.2",
         "react-native-uuid": "^2.0.1",
+        "react-native-zeroconf": "^0.13.8",
         "reanimated-color-picker": "^2.3.1"
       },
       "devDependencies": {
@@ -6882,6 +6883,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
     "node_modules/exec-async": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/exec-async/-/exec-async-2.2.0.tgz",
@@ -12002,6 +12011,17 @@
         "npm": ">=6.0.0"
       }
     },
+    "node_modules/react-native-zeroconf": {
+      "version": "0.13.8",
+      "resolved": "https://registry.npmjs.org/react-native-zeroconf/-/react-native-zeroconf-0.13.8.tgz",
+      "integrity": "sha512-frGS1xNbNCA7BfETSubNYODu7s7mlU55vgArEzZW9EuSQ8SYqlNQC5zpKHDZEAXy4fFqe+CgnMCxKAjQqYM6XA==",
+      "dependencies": {
+        "events": "^3.0.0"
+      },
+      "peerDependencies": {
+        "react-native": ">=0.60"
+      }
+    },
     "node_modules/react-native/node_modules/promise": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/promise/-/promise-8.3.0.tgz",

package.json

@@ -15,6 +15,7 @@
     "@react-navigation/native": "^6.1.7",
     "@react-navigation/stack": "^6.3.17",
     "expo": "~48.0.18",
+    "expo-haptics": "~12.2.1",
     "expo-status-bar": "~1.4.4",
     "i18next": "^23.2.11",
     "i18next-browser-languagedetector": "^7.1.0",
@@ -29,8 +30,8 @@
     "react-native-screens": "~3.20.0",
     "react-native-tab-view": "^3.5.2",
     "react-native-uuid": "^2.0.1",
-    "reanimated-color-picker": "^2.3.1",
+    "react-native-zeroconf": "^0.13.8",
-    "expo-haptics": "~12.2.1"
+    "reanimated-color-picker": "^2.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

src/Components/SideBar/index.js

@@ -5,6 +5,7 @@ import { AppContext, AppSelectedUserDevice, AppStyles } from "../../utils";
 import { Divider } from "../Divider";
 import { useTranslation } from "react-i18next";
 import MyIcon from "../Icon";
+import { MyIconButton } from "../Button";
 
 export default function Sidebar(props) {
   const appContext = useContext(AppContext);
@@ -71,6 +72,7 @@ export default function Sidebar(props) {
                     name="power"
                     color={appContext.appTheme.drawer.item.iconColor}
                     size={24}
+                    style={{ padding: 4 }}
                   />
                 </TouchableOpacity>
               </View>
@@ -123,14 +125,31 @@ export default function Sidebar(props) {
           ]}
         />
       )}
+
+      <View
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginLeft: 10,
+          marginRight: 10,
+          marginBottom: 5,
+          marginTop: 10,
+        }}
+      >
         <Text
-        style={[
+          style={[AppStyles.typography20, { color: appContext.appTheme.text }]}
-          AppStyles.typography20,
-          { marginLeft: 10, marginTop: 10, color: appContext.appTheme.text },
-        ]}
         >
           {t("sideBar.devicesTitle")}
         </Text>
+
+        <MyIconButton
+          iconName="plus"
+          iconSize={24}
+          onPress={() => props.navigation.navigate("modalSearchForNewDevices")}
+        />
+      </View>
+
       <DrawerContentScrollView contentContainerStyle={{ paddingTop: 0 }}>
         {appContext.devices.map((device, i) => (
           <MyDrawerItem

src/Screens/SearchForNewDevices/index.js

@@ -0,0 +1,46 @@
+import { useContext, useEffect } from "react";
+import { AppContext } from "../../utils";
+import { View } from "react-native";
+import MyButton from "../../Components/Button";
+import Zeroconf from "react-native-zeroconf";
+
+const zeroconf = new Zeroconf();
+
+export default function SearchForNewDevicesModalContent() {
+  const appContext = useContext(AppContext);
+
+  useEffect(() => {
+    console.log("useEffect");
+
+    /*
+    zeroconf.on("start", () => {
+      console.log("start");
+    });
+
+    zeroconf.on("stop", () => {
+      console.log("stop");
+    });
+
+    zeroconf.on("resolved", (service) => {
+      console.log("resolved service", service);
+    });
+
+    zeroconf.on("error", (err) => {
+      console.log("err", err);
+    }); */
+  }, []);
+
+  return (
+    <View style={{ marginTop: 40, alignItems: "center" }}>
+      <MyButton
+        style={{ width: 200 }}
+        title={"Gerätesuche starten"}
+        onPress={() => {
+          console.log("start device search");
+
+          zeroconf.scan("http", "tcp", "local.");
+        }}
+      />
+    </View>
+  );
+}