fix(scrollview): Fix issue with focusable elements inside a scrollview

Author: WillsonHaw

.changeset/moody-parts-hunt.md

@@ -0,0 +1,5 @@
+---
+"@plextv/react-native-lightning": patch
+---
+
+fix(scrollview): Fix issue with focusable elements inside a scrollview

packages/react-native-lightning/package.json

@@ -54,7 +54,7 @@
     "@types/react-reconciler": "0.32.1"
   },
   "peerDependencies": {
-    "@lightningjs/renderer": "^3.0.0-beta15",
+    "@lightningjs/renderer": "3.0.0-beta15",
     "@plextv/react-lightning": "workspace:^",
     "react": "^19.2.0",
     "react-native": "^0.82.0"

packages/react-native-lightning/src/exports/ScrollView.tsx

@@ -9,9 +9,9 @@ import type {
   ScrollView as RNScrollView,
   ScrollViewProps as RNScrollViewProps,
 } from 'react-native';
+import { View } from 'react-native';
 import { createNativeSyntheticEvent } from '../utils/createNativeSyntheticEvent';
 import { FocusGroup } from './FocusGroup';
-import { Pressable } from './Pressable';
 import { defaultViewStyle } from './View';
 
 type ScrollViewProps = RNScrollViewProps & {
@@ -201,8 +201,8 @@ export class ScrollView extends Component<ScrollViewProps, ScrollViewState> {
     const flexDirection = horizontal ? 'row' : 'column';
 
     return (
-      <Pressable
-        ref={this._viewportRef}
+      <View
+        ref={this._setViewRef}
         style={[
           defaultViewStyle,
           style,
@@ -230,7 +230,7 @@ export class ScrollView extends Component<ScrollViewProps, ScrollViewState> {
         >
           {children}
         </FocusGroup>
-      </Pressable>
+      </View>
     );
   }
 
@@ -254,6 +254,12 @@ export class ScrollView extends Component<ScrollViewProps, ScrollViewState> {
     );
   };
 
+  private _setViewRef = (ref: View | null) => {
+    this._viewportRef.current = ref
+      ? (ref as unknown as LightningViewElement)
+      : null;
+  };
+
   private _doScroll(newOffset: NativeScrollEvent) {
     if (
       newOffset &&

packages/react-native-lightning/src/plugins/reactNativePolyfillsPlugin.ts

@@ -27,7 +27,8 @@ function tryFindFocusManager(
       fiber as ItsFineFiber,
       true,
       (f) =>
-        f.type?.$$typeof?.toString() === 'Symbol(react.provider)' &&
+        (f.type?.$$typeof === Symbol.for('react.provider') ||
+          f.type?.$$typeof === Symbol.for('react.context')) &&
         !!f.memoizedProps.value?.focusManager,
     );