Working

Author: friyiajr

ios/Podfile.lock

@@ -320,6 +320,12 @@ PODS:
   - react-native-ble-plx (2.0.3):
     - MultiplatformBleAdapter (= 0.1.9)
     - React-Core
+  - react-native-safe-area-context (4.4.1):
+    - RCT-Folly
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - ReactCommon/turbomodule/core
   - react-native-skia (0.1.157):
     - React
     - React-callinvoker
@@ -415,6 +421,9 @@ PODS:
     - React-jsi (= 0.70.8)
     - React-logger (= 0.70.8)
     - React-perflogger (= 0.70.8)
+  - RNScreens (3.18.2):
+    - React-Core
+    - React-RCTImage
   - Yoga (1.14.0)
 
 DEPENDENCIES:
@@ -455,6 +464,7 @@ DEPENDENCIES:
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - react-native-ble-plx (from `../node_modules/react-native-ble-plx`)
+  - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - "react-native-skia (from `../node_modules/@shopify/react-native-skia`)"
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
@@ -468,6 +478,7 @@ DEPENDENCIES:
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - RNScreens (from `../node_modules/react-native-screens`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -548,6 +559,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/logger"
   react-native-ble-plx:
     :path: "../node_modules/react-native-ble-plx"
+  react-native-safe-area-context:
+    :path: "../node_modules/react-native-safe-area-context"
   react-native-skia:
     :path: "../node_modules/@shopify/react-native-skia"
   React-perflogger:
@@ -574,6 +587,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/runtimeexecutor"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNScreens:
+    :path: "../node_modules/react-native-screens"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -616,6 +631,7 @@ SPEC CHECKSUMS:
   React-jsinspector: 5e5497c844f2381e8648ec3a7d0ad25b3f27f23e
   React-logger: b277ad8f4473f2506fb30b762b6348534a3de10e
   react-native-ble-plx: f10240444452dfb2d2a13a0e4f58d7783e92d76e
+  react-native-safe-area-context: 99b24a0c5acd0d5dcac2b1a7f18c49ea317be99a
   react-native-skia: 7f9a3bd36c4247005e87005d912dcf6db76a6289
   React-perflogger: e9249a18e055cae96fdf685bf6145cbea62506c8
   React-RCTActionSheet: a6d2a544a4605a111ce80fa9319cc870ca3ea778
@@ -629,6 +645,7 @@ SPEC CHECKSUMS:
   React-RCTVibration: 19d21a3ed620352180800447771f68a101f196e9
   React-runtimeexecutor: f795fd426264709901c09432c6ce072f8400147e
   ReactCommon: c440e7f15075e81eb29802521c58a1f38b1aa903
+  RNScreens: 34cc502acf1b916c582c60003dc3089fa01dc66d
   Yoga: d6133108734e69e8c0becc6ba587294b94829687
 
 PODFILE CHECKSUM: 64065283ea548937528126d1d39d9c91d0fbfcc8

ios/expoblesample.xcodeproj/project.pbxproj

@@ -170,6 +170,8 @@
 				TargetAttributes = {
 					13B07F861A680F5B00A75B9A = {
 						LastSwiftMigration = 1250;
+						DevelopmentTeam = "4L58M98Y42";
+						ProvisioningStyle = Automatic;
 					};
 				};
 			};
@@ -329,6 +331,9 @@
 				SWIFT_VERSION = 5.0;
 				TARGETED_DEVICE_FAMILY = "1,2";
 				VERSIONING_SYSTEM = "apple-generic";
+				DEVELOPMENT_TEAM = "4L58M98Y42";
+				CODE_SIGN_IDENTITY = "Apple Development";
+				CODE_SIGN_STYLE = Automatic;
 			};
 			name = Debug;
 		};
@@ -354,6 +359,9 @@
 				SWIFT_VERSION = 5.0;
 				TARGETED_DEVICE_FAMILY = "1,2";
 				VERSIONING_SYSTEM = "apple-generic";
+				DEVELOPMENT_TEAM = "4L58M98Y42";
+				CODE_SIGN_IDENTITY = "Apple Development";
+				CODE_SIGN_STYLE = Automatic;
 			};
 			name = Release;
 		};

ios/expoblesample.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>

src/screens/Connect/Connect.tsx

@@ -6,7 +6,6 @@ import { useAppDispatch, useAppSelector } from "../../state/store";
 import { connectToDevice } from "../../state/BluetoothLowEnergy/listener";
 import { DeviceReference } from "../../state/BluetoothLowEnergy/BluetoothLeManager";
 import { useNavigation } from "@react-navigation/native";
-import { FontWeight } from "@shopify/react-native-skia";
 
 export const Connect = () => {
   const nav = useNavigation();

src/screens/Read/Read.tsx

@@ -1,16 +1,46 @@
 import React from "react";
-import { View, Text, StyleSheet } from "react-native";
+import { View, Text, StyleSheet, Pressable } from "react-native";
+import { useAppDispatch, useAppSelector } from "../../state/store";
+import { readColorData } from "../../state/BluetoothLowEnergy/listener";
 
-export const Read = () => (
-  <View style={styles.container}>
-    <Text>Read</Text>
-  </View>
-);
+export const Read = () => {
+  const dispatch = useAppDispatch();
+  const backgroundColor = useAppSelector((state) => state.ble.retrievedColor);
+  console.log("backgroundColor", backgroundColor);
+
+  const readRemoteColor = () => {
+    dispatch(readColorData());
+  };
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: backgroundColor ?? "#FFFFFF" },
+      ]}
+    >
+      <Pressable style={styles.button} onPress={readRemoteColor}>
+        <Text style={styles.ctaBtnTxt}>Read Color From Server</Text>
+      </Pressable>
+    </View>
+  );
+};
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
   },
+  button: {
+    backgroundColor: "purple",
+    paddingVertical: 15,
+    paddingHorizontal: 20,
+    borderRadius: 15,
+  },
+  ctaBtnTxt: {
+    fontSize: 20,
+    color: "white",
+    fontWeight: "bold",
+  },
 });

src/screens/Write/Write.tsx

@@ -1,16 +1,39 @@
 import React from "react";
-import { View, Text, StyleSheet } from "react-native";
+import { View, Text, StyleSheet, Pressable } from "react-native";
+import { useAppDispatch } from "../../state/store";
+import { sendColorData } from "../../state/BluetoothLowEnergy/listener";
 
-export const Write = () => (
-  <View style={styles.container}>
-    <Text>Write</Text>
-  </View>
-);
+export const Write = () => {
+  const dispatch = useAppDispatch();
+  const sendData = () => {
+    const randomColor = Math.floor(Math.random() * 16777215).toString(16);
+    dispatch(sendColorData(randomColor));
+  };
+
+  return (
+    <View style={styles.container}>
+      <Pressable style={styles.button} onPress={sendData}>
+        <Text style={styles.ctaBtnTxt}>Send Random Color To Server</Text>
+      </Pressable>
+    </View>
+  );
+};
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
   },
+  button: {
+    backgroundColor: "purple",
+    paddingVertical: 15,
+    paddingHorizontal: 20,
+    borderRadius: 15,
+  },
+  ctaBtnTxt: {
+    fontSize: 20,
+    color: "white",
+    fontWeight: "bold",
+  },
 });

src/state/BluetoothLowEnergy/BluetoothLeManager.ts

@@ -8,7 +8,9 @@ import {
 } from "react-native-ble-plx";
 
 const COLOR_SERVICE = "96e4d99a-066f-444c-b67c-112345e3b1a2";
-const COLOR_CHARACTARISTIC = "7c0209c0-93f0-437a-828a-a58379b230c4";
+const COLOR_CHARACTARISTIC_NOTIFY = "7c0209c0-93f0-437a-828a-a58379b230c4";
+const COLOR_CHARACTARISTIC_WRITE = "1b3dcc2d-cc56-4b47-b6c2-13745858c7df";
+const COLOR_CHARACTARISTIC_READ = "3d84e60b-90d0-40d4-993a-1b83424cb868";
 
 export interface DeviceReference {
   name?: string | null;
@@ -31,7 +33,7 @@ class BluetoothLeManager {
     this.bleManager.startDeviceScan(null, null, (error, scannedDevice) => {
       onDeviceFound({
         id: scannedDevice?.id,
-        name: scannedDevice?.name ?? scannedDevice?.localName,
+        name: scannedDevice?.localName ?? scannedDevice?.name,
       });
       return;
     });
@@ -43,6 +45,7 @@ class BluetoothLeManager {
 
   connectToPeripheral = async (identifier: string) => {
     this.device = await this.bleManager.connectToDevice(identifier);
+    await this.device?.discoverAllServicesAndCharacteristics();
   };
 
   onColorUpdate = (
@@ -66,17 +69,43 @@ class BluetoothLeManager {
   startStreamingData = async (
     emitter: (bleValue: { payload: string | BleError }) => void
   ) => {
-    await this.device?.discoverAllServicesAndCharacteristics();
     if (!this.isListening) {
       this.isListening = true;
       this.device?.monitorCharacteristicForService(
         COLOR_SERVICE,
-        COLOR_CHARACTARISTIC,
+        COLOR_CHARACTARISTIC_NOTIFY,
         (error, characteristic) =>
           this.onColorUpdate(error, characteristic, emitter)
       );
     }
   };
+
+  sendColor = async (color: string) => {
+    const data = base64.encode(color);
+    try {
+      await this.bleManager.writeCharacteristicWithResponseForDevice(
+        this.device?.id ?? "",
+        COLOR_SERVICE,
+        COLOR_CHARACTARISTIC_WRITE,
+        data
+      );
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  readColor = async () => {
+    try {
+      const color = await this.bleManager.readCharacteristicForDevice(
+        this.device?.id ?? "",
+        COLOR_SERVICE,
+        COLOR_CHARACTARISTIC_READ
+      );
+      return base64.decode(color.value ?? "");
+    } catch (e) {
+      console.log(e);
+    }
+  };
 }
 
 const bluetoothLeManager = new BluetoothLeManager();

src/state/BluetoothLowEnergy/listener.ts

@@ -3,6 +3,7 @@ import {
   setColor,
   setConnectedDevice,
   setDevices,
+  setRetrievedColor,
   startListeningForColors,
   startScanning,
 } from "./slice";
@@ -20,6 +21,22 @@ export const connectToDevice = createAsyncThunk(
   }
 );
 
+export const sendColorData = createAsyncThunk(
+  "bleThunk/sendColorData",
+  async (color: string, thunkApi) => {
+    await bluetoothLeManager.sendColor(color);
+    thunkApi.dispatch(setColor(color));
+  }
+);
+
+export const readColorData = createAsyncThunk(
+  "bleThunk/readColorData",
+  async (_, thunkApi) => {
+    const color = await bluetoothLeManager.readColor();
+    thunkApi.dispatch(setRetrievedColor(color));
+  }
+);
+
 bleMiddleware.startListening({
   actionCreator: startScanning,
   effect: (_, listenerApi) => {

src/state/BluetoothLowEnergy/slice.ts

@@ -6,12 +6,14 @@ interface BluetoothState {
   allDevices: DeviceReference[];
   currentColor: string;
   connectedDevice: DeviceReference | null;
+  retrievedColor?: string | null;
 }
 
 const initialState: BluetoothState = {
   allDevices: [],
   currentColor: "#FFFFFF",
   connectedDevice: null,
+  retrievedColor: undefined,
 };
 
 export type DevicesAction = PayloadAction<DeviceReference>;
@@ -43,9 +45,16 @@ const bleSlice = createSlice({
     setConnectedDevice: (state, action: PayloadAction<DeviceReference>) => {
       state.connectedDevice = action.payload;
     },
+    setRetrievedColor: (
+      state,
+      action: PayloadAction<string | undefined | null>
+    ) => {
+      state.retrievedColor = action.payload;
+    },
   },
 });
 
-export const { setDevices, setColor, setConnectedDevice } = bleSlice.actions;
+export const { setDevices, setColor, setConnectedDevice, setRetrievedColor } =
+  bleSlice.actions;
 
 export default bleSlice.reducer;

src/useBLE.ts

@@ -92,10 +92,14 @@ function useBLE(): BluetoothLowEnergyApi {
 
   const scanForPeripherals = () =>
     bleManager.startDeviceScan(null, null, (error, device) => {
+      console.log("device", device?.name);
       if (error) {
         console.log(error);
       }
-      if (device && device.name?.includes("BLESIM")) {
+      if (
+        (device && device.name?.includes("BLESIM")) ||
+        device?.localName?.includes("BLESIM")
+      ) {
         setAllDevices((prevState: Device[]) => {
           if (!isDuplicteDevice(prevState, device)) {
             return [...prevState, device];