Issue: Trouble Integrating WatchOS Functionality into React Native App

Environment

React Native version: 0.74.4
Library: react-native-watch-connectivity

Steps Taken

Installed the library using yarn.
Added a new watchOS target to the RN app through Xcode as a companion app to the iOS app.
Created an Info.plist file for the watchOS target, mirroring the example provided in the library.

Updated the iOS app's Info.plist with:

<key>WKCompanionAppBundleIdentifier</key>
<string>$(BUNDLEID).watchkitapp</string>

Updated WatchApp.swift and ContentView.swift to receive text input from the iOS app.
Created watchConnectivity.js in the RN app to handle watch connectivity.
Updated App.tsx to initialize watch connectivity and attempt sending a message to watchOS.
Testing with a real iOS device paired with an Apple Watch.

Current Status

The iOS app recognizes that the watch is paired.
Unable to confirm if the watch app is installed or reachable.

Code Snippets

WatchApp.swift

import SwiftUI
import WatchConnectivity

class WatchConnectivityManager: NSObject, WCSessionDelegate, ObservableObject {
    // ... (full code omitted for brevity)
}

@main
struct ClickCardWatchApp: App {
    @StateObject private var connectivityManager = WatchConnectivityManager.shared

    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(connectivityManager)
        }
    }
}

watchConnectivity.js

import { useEffect, useCallback } from 'react'
import {
  watchEvents,
  sendMessage,
  useReachability,
} from 'react-native-watch-connectivity'

const useWatchConnectivity = () => {
  const isReachable = useReachability()

  useEffect(() => {
    console.log('Watch reachability status:', isReachable)
  }, [isReachable])

  useEffect(() => {
    console.log('Initializing watch connectivity...')

    const messageUnsubscribe = watchEvents.addListener(
      'message',
      (message, reply) => {
        console.log('Received message from watch:', message)
        reply({ text: 'Message received by React Native app' })
      },
    )

    return () => {
      console.log('Cleaning up watch connectivity...')
      messageUnsubscribe()
    }
  }, [])

  const sendMessageToWatch = useCallback(
    async (message) => {
      console.log('Attempting to send message:', message)
      if (isReachable) {
        try {
          await sendMessage(message, (reply) => {
            console.log('Reply from watch:', reply)
          })
          console.log('Message sent to watch successfully')
        } catch (error) {
          console.error('Failed to send message to watch:', error)
        }
      } else {
        console.log('Watch is not reachable. Cannot send message.')
      }
    },
    [isReachable],
  )

  return { isReachable, sendMessageToWatch }
}

export default useWatchConnectivity

Issue

Despite following the setup steps, I'm unable to establish communication between the iOS app and the watchOS app. The iOS app detects that the watch is paired, but I can't confirm if the watch app is installed or reachable.

Questions

Am I missing any crucial steps in the setup process?
Do I need to make changes to the AppDelegate? If so, what changes are required?
Are there any known issues with this library and the current React Native version (0.74.4)?
How can I debug the communication between the iOS app and the watchOS app?

Additional Information

I've read through some issues mentioning AppDelegate changes, but I couldn't find specific instructions in the documentation.
Attached is a screenshot showing the current status in the iOS app:

Any help or guidance would be greatly appreciated. Thank you!

watch-connectivity / react-native-watch-connectivity

iOS don't recognize app #129