feat: adding settings capabilities

Co-authored-by: Hayden Ball <[email protected]>

Author: Koalk

example/app.config.ts

@@ -7,6 +7,7 @@ const config: ExpoConfig = {
   version: "1.0.0",
   orientation: "portrait",
   assetBundlePatterns: ["**/*"],
+  scheme: "rnmcumgr",
   splash: {
     image: ".assets/images/pd.png",
     backgroundColor: "#FFFFFF",
@@ -27,7 +28,15 @@ const config: ExpoConfig = {
   },
   plugins: [
     ["expo-document-picker"],
-    ["./gradlePlugin.ts"]
+    ["./gradlePlugin.ts"],
+    [
+      'expo-build-properties',
+      {
+        android: {
+          minSdkVersion: 26,
+        },
+      },
+    ],
   ]
 };
 

example/app/_layout.tsx

@@ -0,0 +1,17 @@
+import { Tabs } from 'expo-router';
+import 'react-native-reanimated';
+
+export default function Home() {
+  return (
+    <Tabs>
+      <Tabs.Screen
+        name="update"
+        options={{ title: 'Update' }}
+      />
+      <Tabs.Screen
+        name="settings"
+        options={{ title: 'Settings' }}
+      />
+    </Tabs>
+  );
+}

example/app/settings.tsx

@@ -0,0 +1,141 @@
+import {
+  readSetting,
+  writeSetting,
+} from '@playerdata/react-native-mcu-manager';
+import { Buffer } from 'buffer';
+
+import React, { useState } from 'react';
+import {
+  Button,
+  FlatList,
+  Modal,
+  SafeAreaView,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+
+import useBluetoothDevices from '../src/useBluetoothDevices';
+
+const styles = StyleSheet.create({
+  root: {
+    padding: 16,
+  },
+
+  block: {
+    marginBottom: 16,
+  },
+
+  list: {
+    padding: 16,
+  },
+});
+
+export default function settings() {
+  const [devicesListVisible, setDevicesListVisible] = useState(false);
+  const [selectedDeviceId, setSelectedDeviceId] = useState<string>('');
+  const [selectedDeviceName, setSelectedDeviceName] = useState<string | null>(
+    null
+  );
+
+  const [settingName, setSettingName] = useState<string>('');
+  const [settingValue, setSettingValue] = useState<string>('');
+
+  const { devices, error: scanError } = useBluetoothDevices();
+
+  return (
+    <SafeAreaView>
+      <ScrollView contentContainerStyle={styles.root}>
+        <Text style={styles.block}>Step 1 - Select Device to Update</Text>
+
+        <View style={styles.block}>
+          {selectedDeviceId && (
+            <>
+              <Text>Selected:</Text>
+              <Text>{selectedDeviceName}</Text>
+            </>
+          )}
+          <Button
+            onPress={() => setDevicesListVisible(true)}
+            title="Select Device"
+          />
+        </View>
+
+        <Modal visible={devicesListVisible}>
+          <FlatList
+            contentContainerStyle={styles.list}
+            data={devices}
+            keyExtractor={({ id }) => id}
+            renderItem={({ item }) => (
+              <View>
+                <Text>{item.name || item.id}</Text>
+
+                <Button
+                  title="Select"
+                  onPress={() => {
+                    setSelectedDeviceId(item.id);
+                    setSelectedDeviceName(item.name);
+                    setDevicesListVisible(false);
+                  }}
+                />
+              </View>
+            )}
+            ListHeaderComponent={() => <Text>{scanError}</Text>}
+          />
+        </Modal>
+
+        <Text style={styles.block}>
+          Step 2 - Read or Write settings to the device
+        </Text>
+
+        <View style={styles.block}>
+          <Text>Setting Name</Text>
+
+          <TextInput
+            value={settingName || ''}
+            onChangeText={setSettingName}
+            placeholder="Enter setting name"
+          />
+        </View>
+
+        <View style={styles.block}>
+          <Text>Setting Value</Text>
+
+          <TextInput
+            value={settingValue || ''}
+            onChangeText={setSettingValue}
+            placeholder="Enter setting name"
+          />
+        </View>
+
+        <View style={styles.block}>
+          <Button
+            onPress={async () => {
+              const valueB64 = await readSetting(selectedDeviceId, settingName);
+              const decodedValue = Buffer.from(valueB64, 'base64').toString(
+                'binary'
+              );
+              setSettingValue(decodedValue);
+            }}
+            title="Read Setting"
+          />
+        </View>
+
+        <View style={styles.block}>
+          <Text>{settingValue}</Text>
+          <Button
+            onPress={async () => {
+              const encodedValue = Buffer.from(settingValue, 'binary').toString(
+                'base64'
+              );
+              await writeSetting(selectedDeviceId, settingName, encodedValue);
+            }}
+            title="Write Setting"
+          />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}

example/src/App.tsx renamed to example/app/update.tsx

@@ -15,9 +15,9 @@ import {
   View,
 } from 'react-native';
 
-import useBluetoothDevices from './useBluetoothDevices';
-import useFilePicker from './useFilePicker';
-import useFirmwareUpdate from './useFirmwareUpdate';
+import useBluetoothDevices from './../src/useBluetoothDevices';
+import useFilePicker from './../src/useFilePicker';
+import useFirmwareUpdate from './../src/useFirmwareUpdate';
 
 const styles = StyleSheet.create({
   root: {
@@ -33,7 +33,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export default function App() {
+export default function update() {
   const [devicesListVisible, setDevicesListVisible] = useState(false);
   const [selectedDeviceId, setSelectedDeviceId] = useState<string | null>(null);
   const [selectedDeviceName, setSelectedDeviceName] = useState<string | null>(

example/index.ts

@@ -1,6 +1,6 @@
 import { registerRootComponent } from 'expo';
 
-import App from './src/App';
+import App from './src/Update';
 
 // registerRootComponent calls AppRegistry.registerComponent('main', () => App);
 // It also ensures that whether you load the app in Expo Go or in a native build,

example/package.json

@@ -1,6 +1,7 @@
 {
   "name": "react-native-mcu-manager-example",
   "description": "Example app for react-native-mcu-manager",
+  "main": "expo-router/entry",
   "version": "0.0.1",
   "private": true,
   "scripts": {
@@ -12,13 +13,21 @@
   },
   "dependencies": {
     "@playerdata/react-native-mcu-manager": "workspace:*",
-    "expo": "52.0.25",
+    "expo": "^52.0.25",
+    "expo-build-properties": "0.12.5",
+    "expo-constants": "~17.0.4",
     "expo-document-picker": "13.0.2",
+    "expo-linking": "~7.0.4",
+    "expo-router": "~4.0.16",
     "expo-splash-screen": "0.29.20",
+    "expo-status-bar": "~2.0.1",
     "lodash": "4.17.21",
     "react": "18.3.1",
     "react-native": "0.76.3",
     "react-native-ble-plx": "3.4.0",
+    "react-native-reanimated": "^3.16.7",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "~4.4.0",
     "react-native-toast-message": "2.2.1"
   },
   "devDependencies": {