[No QA] Replace ActiveElementRoleProvider context with useSyncExternalStore

src/App.tsx

@@ -7,7 +7,6 @@ import {PickerStateProvider} from 'react-native-picker-select';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import '../wdyr';
 import {ActionSheetAwareScrollViewProvider} from './components/ActionSheetAwareScrollView';
-import ActiveElementRoleProvider from './components/ActiveElementRoleProvider';
 import ColorSchemeWrapper from './components/ColorSchemeWrapper';
 import ComposeProviders from './components/ComposeProviders';
 import {CurrentUserPersonalDetailsProvider} from './components/CurrentUserPersonalDetailsProvider';
@@ -115,7 +114,6 @@ function App() {
                                         PickerStateProvider,
                                         EnvironmentProvider,
                                         CustomStatusBarAndBackgroundContextProvider,
-                                        ActiveElementRoleProvider,
                                         ActionSheetAwareScrollViewProvider,
                                         PlaybackContextProvider,
                                         FullScreenContextProvider,

src/hooks/useActiveElementRole/index.native.ts

@@ -0,0 +1,5 @@
+import type UseActiveElementRole from './types';
+
+const useActiveElementRole: UseActiveElementRole = () => null;
+
+export default useActiveElementRole;

src/hooks/useActiveElementRole/index.ts

@@ -1,15 +1,19 @@
-import {useContext} from 'react';
-import {ActiveElementRoleContext} from '@components/ActiveElementRoleProvider';
+import {useSyncExternalStore} from 'react';
 import type UseActiveElementRole from './types';
 
-/**
- * Listens for the focusin and focusout events and sets the DOM activeElement to the state.
- * On native, we just return null.
- */
-const useActiveElementRole: UseActiveElementRole = () => {
-    const {role} = useContext(ActiveElementRoleContext);
+function subscribe(callback: () => void) {
+    document.addEventListener('focusin', callback);
+    document.addEventListener('focusout', callback);
+    return () => {
+        document.removeEventListener('focusin', callback);
+        document.removeEventListener('focusout', callback);
+    };
+}
 
-    return role;
-};
+function getSnapshot() {
+    return document.activeElement?.role ?? null;
+}
+
+const useActiveElementRole: UseActiveElementRole = () => useSyncExternalStore(subscribe, getSnapshot);
 
 export default useActiveElementRole;