Updates for FlashList v2

WillsonHaw · WillsonHaw · commit 8d4ef2792830 · 2026-01-16T15:33:16.000-08:00
diff --git a/.changeset/eleven-donkeys-report.md b/.changeset/eleven-donkeys-report.md
@@ -0,0 +1,5 @@
+---
+"@plextv/react-lightning-plugin-flexbox": patch
+---
+
+fix: Minor optimization
diff --git a/.changeset/old-lies-lick.md b/.changeset/old-lies-lick.md
@@ -0,0 +1,5 @@
+---
+"@plextv/react-native-lightning": patch
+---
+
+fix(polyfill): Add missing dom functions needed by flashlist v2
diff --git a/.changeset/tasty-bears-hang.md b/.changeset/tasty-bears-hang.md
@@ -0,0 +1,7 @@
+---
+"@plextv/react-native-lightning-components": patch
+"@plextv/react-native-lightning-example": patch
+"@plextv/react-lightning-storybook": patch
+---
+
+feat(FlashList): Update FlashList to v2.2.0
diff --git a/apps/react-native-lightning-example/package.json b/apps/react-native-lightning-example/package.json
@@ -42,7 +42,7 @@
     "@plextv/vite-plugin-react-native-lightning": "workspace:*",
     "@plextv/vite-plugin-react-reanimated-lightning": "workspace:*",
     "@repo/configs": "workspace:*",
-    "@shopify/flash-list": "1.8.3",
+    "@shopify/flash-list": "2.2.0",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
     "@vitejs/plugin-legacy": "7.2.1",
diff --git a/apps/react-native-lightning-example/src/pages/FlashListTest.tsx b/apps/react-native-lightning-example/src/pages/FlashListTest.tsx
@@ -38,7 +38,6 @@ export const FlashListTest: FC = () => {
               {item}
             </ScrollItem>
           )}
-          estimatedItemSize={75}
           drawDistance={75}
           snapToAlignment="center"
         />
@@ -66,7 +65,6 @@ export const FlashListTest: FC = () => {
               {item}
             </ScrollItem>
           )}
-          estimatedItemSize={75}
           drawDistance={75}
           snapToAlignment="center"
         />
diff --git a/apps/storybook/src/react-native-lightning-components/lists/FlashList.stories.tsx b/apps/storybook/src/react-native-lightning-components/lists/FlashList.stories.tsx
@@ -47,7 +47,6 @@ export const FlashListExample = () => {
               {item}
             </ScrollItem>
           )}
-          estimatedItemSize={50}
           drawDistance={50}
         />
       </View>
@@ -76,7 +75,6 @@ export const FlashListExample = () => {
               {item}
             </ScrollItem>
           )}
-          estimatedItemSize={50}
           drawDistance={50}
         />
       </View>
diff --git a/packages/plugin-flexbox/src/LightningManager.ts b/packages/plugin-flexbox/src/LightningManager.ts
@@ -142,9 +142,11 @@ export class LightningManager {
       if (el.parent?.style.display !== 'flex') {
         skipX =
           el.style.x !== undefined &&
+          el.rawProps.style?.x !== undefined &&
           el.style.transform?.translateX === undefined;
         skipY =
           el.style.y !== undefined &&
+          el.rawProps.style?.y !== undefined &&
           el.style.transform?.translateY === undefined;
       }
 
diff --git a/packages/plugin-flexbox/src/YogaManager.spec.ts b/packages/plugin-flexbox/src/YogaManager.spec.ts
@@ -366,7 +366,12 @@ describe('YogaManager', () => {
       expect(applyReactPropsToYoga).toHaveBeenCalledWith(
         mockYoga,
         mockYogaOptions,
-        mockNode,
+        {
+          children: [],
+          id: elementId,
+          node: mockNode,
+          props: {},
+        },
         style,
       );
     });
diff --git a/packages/plugin-flexbox/src/YogaManager.ts b/packages/plugin-flexbox/src/YogaManager.ts
@@ -1,6 +1,7 @@
 import type { LightningElementStyle, Rect } from '@plextv/react-lightning';
 import { EventEmitter } from 'tseep';
-import { type Config, loadYoga, type Node, type Yoga } from 'yoga-layout/load';
+import { type Config, loadYoga, type Yoga } from 'yoga-layout/load';
+import type { ManagerNode } from './types/ManagerNode';
 import type { YogaOptions } from './types/YogaOptions';
 import applyReactPropsToYoga, {
   applyFlexPropToYoga,
@@ -9,13 +10,6 @@ import { SimpleDataView } from './util/SimpleDataView';
 
 export type BatchedUpdate = Record<number, Partial<Rect>>;
 
-type ManagerNode = {
-  id: number;
-  parent?: ManagerNode;
-  node: Node;
-  children: ManagerNode[];
-};
-
 export type YogaManagerEvents = {
   // Updates are sent in an array. This is because when working with web
   // workers, it's more efficient to transfer an array instead of serializing
@@ -234,7 +228,7 @@ export class YogaManager {
       return;
     }
 
-    applyReactPropsToYoga(this._yoga, this._yogaOptions, yogaNode.node, style);
+    applyReactPropsToYoga(this._yoga, this._yogaOptions, yogaNode, style);
 
     if (style.transform) {
       const { x, y, transform } = style;
@@ -337,6 +331,7 @@ export class YogaManager {
       id: elementId,
       node,
       children: [],
+      props: {},
     };
 
     this._elementMap.set(elementId, yogaNode);
diff --git a/packages/plugin-flexbox/src/types/ManagerNode.ts b/packages/plugin-flexbox/src/types/ManagerNode.ts
@@ -0,0 +1,9 @@
+import type { Node } from 'yoga-layout';
+
+export type ManagerNode = {
+  id: number;
+  parent?: ManagerNode;
+  node: Node;
+  children: ManagerNode[];
+  props: Record<string, unknown>;
+};
diff --git a/packages/plugin-flexbox/src/util/applyReactPropsToYoga.ts b/packages/plugin-flexbox/src/util/applyReactPropsToYoga.ts
@@ -11,6 +11,7 @@ import type {
 import type { Yoga } from 'yoga-layout/load';
 import type { YogaOptions } from '../types';
 import type { AutoDimensionValue, Transform } from '../types/FlexStyles';
+import type { ManagerNode } from '../types/ManagerNode';
 import type { FlexProps } from './isFlexStyleProp';
 import { isFlexStyleProp } from './isFlexStyleProp';
 import { parseFlexValue } from './parseFlexValue';
@@ -159,15 +160,17 @@ function applyFlex(
 export default function applyReactPropsToYoga(
   yoga: Yoga,
   config: YogaOptions,
-  node: Node,
+  managerNode: ManagerNode,
   style: Partial<LightningViewElementStyle>,
 ): void {
   for (const [prop, value] of Object.entries(style)) {
-    if (isFlexStyleProp(prop)) {
+    if (isFlexStyleProp(prop) && managerNode.props[prop] !== value) {
+      managerNode.props[prop] = value;
+
       applyFlexPropToYoga(
         yoga,
         config,
-        node,
+        managerNode.node,
         prop,
         value as LightningViewElementStyle[typeof prop],
       );
diff --git a/packages/plugin-flexbox/src/util/toSerializableValue.ts b/packages/plugin-flexbox/src/util/toSerializableValue.ts
@@ -27,7 +27,11 @@ export function toSerializableValue<T>(key: string, value: any): T | null {
     // Only transforms can be objects
     if (key === 'transform') {
       return value as T;
-    } else if ('current' in value && isPrimitiveValue(typeof value.current)) {
+    } else if (
+      value != null &&
+      'current' in value &&
+      isPrimitiveValue(typeof value.current)
+    ) {
       // ...unless it's a reanimated animation. Unfortunately, there's no real
       // good way to serialize animations. There's also no real good way to
       // keep this logic in the reanimated plugin, so we'll just have to do it
diff --git a/packages/react-lightning/src/element/LightningViewElement.ts b/packages/react-lightning/src/element/LightningViewElement.ts
@@ -453,6 +453,8 @@ export class LightningViewElement<
     // TODO: Include padding + border in size
     w: number;
     h: number;
+    width: number;
+    height: number;
   } {
     const { x, y } = this.getRelativePosition(ancestor);
 
@@ -466,6 +468,8 @@ export class LightningViewElement<
       // TODO: Include padding + border in size
       w: this.node.w,
       h: this.node.h,
+      width: this.node.w,
+      height: this.node.h,
     };
   }
 
diff --git a/packages/react-lightning/src/render/createHostConfig.ts b/packages/react-lightning/src/render/createHostConfig.ts
@@ -157,7 +157,7 @@ export function createHostConfig(
     },
 
     resetAfterCommit() {
-      // Noop
+      return {};
     },
 
     resetTextContent(instance) {
diff --git a/packages/react-native-lightning-components/package.json b/packages/react-native-lightning-components/package.json
@@ -70,7 +70,7 @@
     "@plextv/react-lightning-plugin-css-transform": "workspace:^",
     "@plextv/react-lightning-plugin-flexbox": "workspace:^",
     "@plextv/react-native-lightning": "workspace:^",
-    "@shopify/flash-list": "^1.8.3",
+    "@shopify/flash-list": "^2.2.0",
     "react": "^19.2.0",
     "react-native": "^0.82.0"
   },
diff --git a/packages/react-native-lightning-components/src/exports/lists/CellContainer.tsx b/packages/react-native-lightning-components/src/exports/lists/CellContainer.tsx
@@ -27,11 +27,6 @@ const CellContainer: ForwardRefExoticComponent<CellContainerProps> = forwardRef<
     },
     [onLayout],
   );
-  if (!estimatedSize && import.meta.env.DEV) {
-    console.error(
-      'FlashList: estimatedItemSize is required when using CellRendererComponent. Defaulting to 2.',
-    );
-  }
 
   // We need to not set overflow: 'hidden' on the cell view, otherwise the
   // FlashList will not render the items correctly.
@@ -47,8 +42,8 @@ const CellContainer: ForwardRefExoticComponent<CellContainerProps> = forwardRef<
           initialDimensions: {
             x: lngStyle?.x ?? 0,
             y: lngStyle?.y ?? 0,
-            w: lngStyle?.w ?? estimatedSize ?? 2,
-            h: lngStyle?.h ?? estimatedSize ?? 2,
+            w: lngStyle?.w ?? estimatedSize ?? 400,
+            h: lngStyle?.h ?? estimatedSize ?? 400,
           },
         },
       ]}
diff --git a/packages/react-native-lightning-components/src/exports/lists/FlashList.tsx b/packages/react-native-lightning-components/src/exports/lists/FlashList.tsx
@@ -1,33 +1,32 @@
 import type { LightningElement } from '@plextv/react-lightning';
 import { ScrollView } from '@plextv/react-native-lightning';
 import {
-  type FlashListProps,
+  type FlashListRef,
   FlashList as ShopifyFlashList,
+  type FlashListProps as ShopifyFlashListProps,
 } from '@shopify/flash-list';
-import {
-  forwardRef,
-  type LegacyRef,
-  type ReactElement,
-  type Ref,
-  useMemo,
-} from 'react';
+import { forwardRef, type ReactElement, type Ref, useMemo } from 'react';
 import CellContainer from './CellContainer';
 
-type FlashList<T> = ShopifyFlashList<T>;
+type FlashList<T> = FlashListRef<T>;
+type FlashListProps<T> = ShopifyFlashListProps<T> & {
+  estimatedItemSize?: number;
+  estimatedListSize?: { width: number; height: number };
+};
 
 function FlashListImpl<T>(
   { CellRendererComponent, renderScrollComponent, ...props }: FlashListProps<T>,
-  ref: Ref<T>,
+  ref: Ref<FlashListRef<T>>,
 ) {
   const CellComponent = useMemo(
     () =>
-      forwardRef((componentProps, ref) => {
+      forwardRef((componentProps, cellRef) => {
         const Component = CellRendererComponent ?? CellContainer;
 
         return (
           <Component
             {...componentProps}
-            ref={ref as LegacyRef<LightningElement>}
+            ref={cellRef as Ref<LightningElement>}
             estimatedSize={props.estimatedItemSize}
           />
         );
@@ -38,9 +37,13 @@ function FlashListImpl<T>(
 
   return (
     <ShopifyFlashList
+      ref={ref}
       CellRendererComponent={CellComponent}
-      renderScrollComponent={renderScrollComponent ?? ScrollView}
-      ref={ref as LegacyRef<ShopifyFlashList<T>>}
+      renderScrollComponent={
+        // If a renderScrollComponent was not provided, make sure we use our
+        // own ScrollView since the RN one doesn't work in Lightning
+        renderScrollComponent ?? ((props) => <ScrollView {...props} />)
+      }
       {...props}
     />
   );
diff --git a/packages/react-native-lightning/src/exports/ScrollView.tsx b/packages/react-native-lightning/src/exports/ScrollView.tsx
@@ -12,12 +12,14 @@ import type {
 } from 'react-native';
 import type { LightningViewElementStyle } from '../../../react-lightning/src/types';
 import { createHandler } from '../hooks/useFocusHandler';
+import type { NativeLightningViewElement } from '../types/NativeLightningViewElement';
 import { createNativeSyntheticEvent } from '../utils/createNativeSyntheticEvent';
-import { defaultViewStyle, View } from './View';
+import { defaultViewStyle, View, type ViewProps } from './View';
 
-type ScrollViewProps = RNScrollViewProps & {
-  animated?: boolean;
-};
+export type ScrollViewProps = Omit<RNScrollViewProps, 'style'> &
+  Pick<ViewProps, 'style'> & {
+    animated?: boolean;
+  };
 
 type ScrollViewState = {
   offset: { x: number; y: number };
@@ -110,7 +112,7 @@ export class ScrollView extends PureComponent<
   ScrollViewState
 > {
   private _containerRef = createRef<LightningViewElement>();
-  private _viewportRef = createRef<LightningViewElement>();
+  private _viewportRef = createRef<NativeLightningViewElement>();
 
   public static displayName = 'LightningScrollView';
 
@@ -265,6 +267,11 @@ export class ScrollView extends PureComponent<
 
       this.setState({ offset: { x: clampedX, y: clampedY } });
 
+      if (this._viewportRef.current) {
+        this._viewportRef.current.scrollLeft = -clampedX;
+        this._viewportRef.current.scrollTop = -clampedY;
+      }
+
       this.props.onScroll?.(
         createNativeSyntheticEvent({
           ...newOffset,
diff --git a/packages/react-native-lightning/src/exports/View.tsx b/packages/react-native-lightning/src/exports/View.tsx
@@ -1,6 +1,5 @@
 import type {
   FocusableProps,
-  LightningElement,
   LightningElementEventProps,
   LightningViewElement,
   LightningViewElementProps,
@@ -10,6 +9,7 @@ import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { forwardRef } from 'react';
 import type { View as RNView, ViewProps as RNViewProps } from 'react-native';
 import { useLayoutHandler } from '../hooks/useLayoutHandler';
+import type { NativeLightningViewElement } from '../types/NativeLightningViewElement';
 
 type CombinedProps = RNViewProps &
   LightningViewElementProps &
@@ -32,7 +32,7 @@ export const defaultViewStyle = {
   zIndex: 0,
 };
 
-export type View = RNView & LightningElement;
+export type View = RNView & NativeLightningViewElement;
 
 export const View: ForwardRefExoticComponent<ViewProps> = forwardRef<
   LightningViewElement,
diff --git a/packages/react-native-lightning/src/index.ts b/packages/react-native-lightning/src/index.ts
@@ -17,7 +17,7 @@ export { FocusGroup, type FocusGroupProps } from './exports/FocusGroup';
 export { Image, type ImageProps } from './exports/Image';
 export * as Platform from './exports/Platform';
 export { Pressable, type PressableProps } from './exports/Pressable';
-export { ScrollView } from './exports/ScrollView';
+export { ScrollView, type ScrollViewProps } from './exports/ScrollView';
 export * as StyleSheet from './exports/StyleSheet';
 export { Text, type TextProps } from './exports/Text';
 export {
diff --git a/packages/react-native-lightning/src/plugins/domPolyfillsPlugin.ts b/packages/react-native-lightning/src/plugins/domPolyfillsPlugin.ts
diff --git a/packages/react-native-lightning/src/types/NativeLightningViewElement.ts b/packages/react-native-lightning/src/types/NativeLightningViewElement.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@plextv/react-lightning-plugin-flexbox": patch
 +---
++
 +fix: Minor optimization