Commit Graph

35 Commits

Author SHA1 Message Date
Alex Hunt 35f6ed1146 Update SectionList to accept React elements for separators (#53599)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/53599

Runtime and types fix for the `ItemSeparatorComponent` prop on `virtualized-list` components (`FlatList`, `SectionList`, `VirtualizedList`).

- Docs source, where this prop (adjacent to other `*Component` props) is documented as accepting elements: https://reactnative.dev/docs/virtualizedlist#itemseparatorcomponent.
- Existing runtime behaviour matching this definition: https://github.com/facebook/react-native/blob/8d33e1c205b12fe27f4319e6566bb0c088197810/packages/virtualized-lists/Lists/VirtualizedListCellRenderer.js#L197-L203

**Changes**

- Update Flow, manual TS type defs.
- Align runtime behaviour in `VirtualizedSectionList` to add matching `React.isValidElement()` behaviour.

Resolves https://github.com/facebook/react-native/issues/53531.

Changelog:
[General][Fixed] - The `ItemSeparatorComponent` prop on list components now accepts a React element as well as a component function.

Reviewed By: cortinico

Differential Revision: D81675423

fbshipit-source-id: 3eed93b1bea89554988d6e20fa61b72e17be55df
2025-09-12 07:54:04 -07:00
Sam Zhou cf664c65e2 Standardize subtyping error code into incompatible-type in react native and metro (#53312)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/53312

Changelog: [Internal]

Reviewed By: jbrown215

Differential Revision: D80400976

fbshipit-source-id: 196af69c0b9621b2a2675b232406639773e04933
2025-08-18 09:04:31 -07:00
Sam Zhou 35bee1a857 Add annotations to fix future natural inference errors in xplat/js
Summary: Changelog: [Internal]

Reviewed By: marcoww6

Differential Revision: D80207164

fbshipit-source-id: e9a786c83f89a97db8b383812767978c47d9536c
2025-08-13 18:15:27 -07:00
Sam Zhou af1bcb6d44 Mass replace $FlowIgnore with $FlowFixMe in react-native (#53076)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/53076

Changelog: [Internal]

Reviewed By: marcoww6

Differential Revision: D79672242

fbshipit-source-id: 560f057d8658ed602cf7241e584bade70d8f3a99
2025-08-05 15:44:41 -07:00
Jakub Piasecki 322142aab3 Further reduce naming collisions in the API snapshot (#52281)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/52281

Changelog: [Internal]

Reviewed By: huntie

Differential Revision: D77355160

fbshipit-source-id: b1a59b3817b88bf6de953816fc272633b14b3a54
2025-06-26 03:37:05 -07:00
Jakub Piasecki 4f94028ca6 Reduce symbol collisions in the API snapshot (#52213)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/52213

Changelog: [Internal]

Reviewed By: huntie

Differential Revision: D77207979

fbshipit-source-id: 10d8b9c8f24ddb52423197f5aa300402b1e45ebe
2025-06-25 00:16:24 -07:00
Susmita Horrow f214a52a9a Revert D76814453: Reduce symbol collisions in the API snapshot
Differential Revision:
D76814453

Original commit changeset: fffbf585d63e

Original Phabricator Diff: D76814453

fbshipit-source-id: 418ae90fb49c8c05f077bca7e434c039ad49c7ba
2025-06-23 01:43:20 -07:00
Jakub Piasecki f338db9c17 Reduce symbol collisions in the API snapshot (#52085)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/52085

Changelog: [Internal]

Reviewed By: huntie

Differential Revision: D76814453

fbshipit-source-id: fffbf585d63e282443830c08397ae5e4d745785a
2025-06-23 00:34:05 -07:00
Dawid Małecki 44b0f5560b Fix VirtualizeSectionList generic arguments (#51496)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51496

Fixes problem with generics passed to `VirtualizedSectionList` in generated types. The `flow-api-translator` creates a re-declaration for `export default` variables which shadows generics.

Changelog:
[Internal]

Reviewed By: huntie

Differential Revision: D75141051

fbshipit-source-id: 260ef066038320eee3ffa93692f77f1eff5c9205
2025-05-22 03:41:25 -07:00
Tim Yung 3e70714cff RN: Prefer Destructured Import for useEffect (#51405)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51405

Prefers using this as a destructured import instead of as a member expression of `React`.

Changelog:
[Internal]

Reviewed By: SamChou19815

Differential Revision: D74894042

fbshipit-source-id: 93fbadb32e4a1225836db9d729d7bf502ebddd84
2025-05-16 16:33:18 -07:00
Tim Yung 00108a1ac3 RN: Prefer Destructured Import for useState (#51403)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51403

Prefers using this as a destructured import instead of as a member expression of `React`.

Changelog:
[Internal]

Reviewed By: SamChou19815

Differential Revision: D74891875

fbshipit-source-id: 981e85b5da84950c9e66e8d6b6496019e536711d
2025-05-16 16:33:18 -07:00
Dawid Małecki cfd4932bb0 Fix generated types base on __typetests__ (#51383)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51383

This diff is a set of alignments/improvements in generated TS types. It includes:
- extending `AppStateStatus` with `extension` and `unknown`,
- exporting `AnimatedProps` under `Animated` namespace,
- resolving issue with discriminated unions in `ProgressBarAndroidTypes`,
- fixing `StyleSheet.create` type to accept only specified style properties,
- extending `TextProps` with `AccessibilityProps`,
extending Fn Args generic with `$ReadOnlyArray` in `ErrorUtils`,
- small `__typetests__` adjustments,
- removing type test `styleDimensionValueValidAnimated` as `DimensionValue` no longer accepts `AnimatedNode`,
- removing `styleDimensionValueInvalid` as `DimensionValue` accepts any string now - template literal types in Flow are not supported,
- changing `overlayColor` type to `ColorValue` to align with manual types,
- fixing `AnimatedPropsAllowList` type which wasn't correct in TS because index signature type was different from style type,
- using `DeviceEventEmitter` instead of `DeviceEventEmitterStatic` in type tests which is equivalent in both new and old types - `DeviceEventEmitterStatic` was only a type of `DeviceEventEmitter`,
- removing type test for checking forwarded key type - doesn't work with new types and that shouldn't be supported,
- removing `Animated.legacyRef` type test - not included in new types,
- adding `DOMRect` from "dom" lib to `globals.d.ts` to not include "dom" lib in the tsconfig - tries to compare globals with `lib.dom.d.ts` and produces many errors,
- exporting `SectionListData`,

Changelog:
[Internal]

Reviewed By: huntie

Differential Revision: D74807552

fbshipit-source-id: c5254ea0f701f3602b9d716faeb50ca1ab21b013
2025-05-16 09:50:51 -07:00
Jakub Piasecki ad5f5a332a Make VirtualizedList use ScrollViewProps directly (#50416)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50416

Changelog: [Internal]

Reviewed By: huntie

Differential Revision: D72223126

fbshipit-source-id: 8598a02c31e16302a3f2ce8678602a33fc090c8a
2025-04-01 03:46:00 -07:00
Andrew Wang 63160341d9 Revert D70615310: Collection of small type updates
Differential Revision:
D70615310

Original commit changeset: 11dc833aeeeb

Original Phabricator Diff: D70615310

fbshipit-source-id: 6508f8e27e1a17f6086fdecb5177472233dc3480
2025-03-31 06:14:37 -07:00
Jakub Piasecki f8a4f80b6e Collection of small type updates (#50312)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50312

Changelog: [Internal]

Reviewed By: huntie

Differential Revision: D70615310

fbshipit-source-id: 11dc833aeeeb67e03808b18b50ff79ae6aa956ec
2025-03-31 04:13:04 -07:00
Sam Zhou cbd2ee55ef Eliminate $PropertyType and $ElementType in react-native (#50262)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50262

Prepare for their removal in Flow

Changelog: [Internal]

Reviewed By: gkz

Differential Revision: D71823860

fbshipit-source-id: e1e18424ae731cd323999316a7f3a5d42f4b5b91
2025-03-25 14:00:17 -07:00
Jakub Piasecki b2d88d33b7 Align SectionList types with OSS (#50074)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50074

Changelog: [Internal]

Reviewed By: huntie

Differential Revision: D71318882

fbshipit-source-id: ac26820bd4a9200c4156b703dce036535f677025
2025-03-25 11:03:54 -07:00
Jakub Piasecki 7b5b7b20de Update VirtualizedSectionList props name (#49592)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49592

Changelog: [Internal]

Reviewed By: huntie

Differential Revision: D69984225

fbshipit-source-id: 753917f31a803c3bc8ea2e4635ec1d58cecb9224
2025-02-23 23:59:51 -08:00
Jakub Piasecki b8e2bcd60d Update types in virtualized-lists so that they produce valid TS output (#49263)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49263

Changelog: [Internal]

Reviewed By: huntie

Differential Revision: D69308533

fbshipit-source-id: 36dd38a5bfce3b19eabcf04ef5f14e006d581bcd
2025-02-11 09:25:22 -08:00
Jakub Piasecki 1cf4c84ba0 Update files in packages/virtualized-lists to use export syntax (#49262)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49262

Changelog: [General][Breaking] Deep imports into `react-native/virtualized-lists` with require syntax may need to be appended with `.default`

Reviewed By: huntie

Differential Revision: D69308532

fbshipit-source-id: 6de15d46e0931616bc9849edbccb7cf745e15dd5
2025-02-11 09:25:22 -08:00
Dawid Małecki f36bfe5dfa Remove redundant {||} syntax (#48686)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/48686

Changelog:
[Internal] - Removed redundant `{||}` syntax

Reviewed By: javache

Differential Revision: D68205038

fbshipit-source-id: f7d3271142b6443a5859c3b668b7aebd3ce3ef3f
2025-01-15 07:07:01 -08:00
Sam Zhou 3a01a0c9c5 Fix signature of VirtualizedSectionList (#47318)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47318

Changelog: [Internal]

Reviewed By: gkz

Differential Revision: D65239931

fbshipit-source-id: c09eaad8d63f6c415e5d07a4d00dd0acc636c6b9
2024-10-30 18:15:03 -07:00
Sam Zhou 9b5fef32f1 Update some React.AbstractComponent type to use component type (#46855)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46855

Prepare for the ref-as-prop typing change in flow.

Changelog: [Internal]

Reviewed By: rshest

Differential Revision: D63947642

fbshipit-source-id: bec8a2498961b5bc602d86ecb2b5a4b5c4785e09
2024-10-08 09:20:42 -07:00
Sam Zhou 5b96e90f77 Replace React.Element<any> and unnecessarily specific React.Element with React.MixedElement (#45923)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45923

Changelog: [Internal]

Reviewed By: gkz

Differential Revision: D60872182

fbshipit-source-id: b81fb43968c52cbfdb4a9fa57f1175aabc2a3939
2024-08-06 21:33:08 -07:00
Sam Zhou 4f47b385fa Cleanup all uses of internal flow type React$ElementRef in react-native (#45904)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45904

Flow will error on these dollar types soon. For all the ones changed here, they can all be further simplified.

Changelog: [Internal]

Reviewed By: gkz

Differential Revision: D60786768

fbshipit-source-id: e26bf0be1c4a933fc0bd8b59827e10cbd7242a83
2024-08-05 14:51:30 -07:00
Nick Gerleman 12b64b7824 Loosen SectionList renderItem required return type (#45305)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45305

Allow SectionList render functions to return any React node, instead of just React.Element. This matches VirtualizedList/FlatList, and general Flow component conventions.

Changelog:
[General][Fixed] - Loosen SectionList `renderItem` required return type

Reviewed By: joevilches

Differential Revision: D59404511

fbshipit-source-id: 3055d8f01845ff5ef8ae75b87f60d8cd26dc07b4
2024-07-08 17:40:59 -07:00
Fabrizio Cucci 95de14dc53 Drop unused code + minor lint fixes (#44645)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44645

Changelog: [Internal]

As per title.

Reviewed By: NickGerleman

Differential Revision: D57664819

fbshipit-source-id: 2388bd01c00d814a12de7f2e285b78f207e6012c
2024-05-22 12:11:33 -07:00
Biki-das 6204ea36d3 - fixes component unmounting behaviour in itemSeperatorComponent (#43223)
Summary:
Reopen in reference to https://github.com/facebook/react-native/issues/42435 , as it had a lot of commits and fixes making it messed up.
Weirdly when using a [Section List](https://reactnative.dev/docs/sectionlist) specifically when using the [SectionSeperatorComponent](https://reactnative.dev/docs/sectionlist#sectionseparatorcomponent), and adding additional Data on the renderItem List, there is a unmount occurring as the new Data is added, this only happens while using the `SectionSeparatorComponent` and limited to the same

**Here is the Current Behaviour**

https://github.com/facebook/react-native/assets/72331432/0622e789-ddbc-4038-8ccc-a421050eecbf

**Here is the Expected Behaviour After Fixes**

https://github.com/facebook/react-native/assets/72331432/2f0cc3a9-da97-43f5-8a4b-3faca74ae834

The issues is happening because the Parent View gets removed, as we add Data, the separator moves causing the unmount, the solution that i proposed here is to conditionally render to make sure that our separator renders correctly which required to add an empty view as the `itemSeparatorComponent`.

## Changelog:
[General] [Added] - Fixes SectionList Unmounting issue with separatorComponent on data addition and removal.

Pull Request resolved: https://github.com/facebook/react-native/pull/43223

Test Plan:
i used the `rn-tester` App to test out the changes below is the code to test the same.
Update the snapshots to align with the changes.

```
import React, {useEffect, useState} from 'react';
import {
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  StatusBar,
  SectionList,
  Image,
} from 'react-native';

interface Item {
  id: string;
  title: string;
  imgSrc: string;
}

interface Section {
  title: string;
  data: Item[];
}

const keyExtractor = (item: Item, index: number) => `${item.title}-${index}`;

const renderItem = ({item, index}: {item: Item; index: number}) => {
  return <ItemComponent item={item} index={index} />;
};

const additionalFruits = [
  {
    id: '7',
    title: 'Sandwich',
    imgSrc:
      'https://img.freepik.com/premium-vector/sanwich-vector-isolated-fast-food_484148-2.jpg',
  },
  {
    id: '8',
    title: 'Burger',
    imgSrc:
      'https://static.vecteezy.com/system/resources/thumbnails/033/494/666/original/animated-illustration-of-burger-cartoon-for-foods-menu-animation-free-video.jpg',
  },
  {
    id: '9',
    title: 'Juice',
    imgSrc:
      'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQHg9yLXE7Jlq4OM9ey64TW4D9qUFaeGU76rg&usqp=CAU',
  },
  {
    id: '10',
    title: 'Milkshake',
    imgSrc:
      'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROpBez3eZKvEVdxBce9XyG6j6caDFMjV_xUQ&usqp=CAU',
  },
];
const DATA: Section[] = [
  {
    title: 'Items',
    data: [
      {
        id: '1',
        title: 'Cake',
        imgSrc:
          'https://static.vecteezy.com/system/resources/previews/012/132/227/original/cute-cake-cartoon-icon-illustration-food-recreation-icon-concept-isolated-premium-flat-cartoon-style-vector.jpg',
      },
      {
        id: '2',
        title: 'Pizza',
        imgSrc:
          'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2kYjlsayzKZx4hFo6fbH7S8pde2JRo2a0hfaeoz3O7bjqdJjhI0tFiSROM8G4UbdbwXU&usqp=CAU',
      },
      {
        id: '3',
        title: 'Coke',
        imgSrc:
          'https://png.pngtree.com/png-clipart/20220116/original/pngtree-cartoon-hand-painted-coke-bottle-png-image_7106844.png',
      },
      {
        id: '4',
        title: 'Noodles',
        imgSrc:
          'https://thumbs.dreamstime.com/z/cute-cartoon-vector-bowl-noodle-isolated-white-background-115120959.jpg',
      },
      {
        id: '5',
        title: 'Pasta',
        imgSrc:
          'https://t4.ftcdn.net/jpg/02/65/00/69/360_F_265006936_2dlz2VtcqZZUbco1VnDpU2diyd8OagFS.jpg',
      },
      {
        id: '6',
        title: 'Fries',
        imgSrc:
          'data:image/jpeg;base64,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',
      },
    ],
  },
];

const ItemComponent = ({item, index}: {item: Item; index: number}) => {
  useEffect(() => {
    console.log('Mount of', index, item.title);
    return () => {
      console.log('Unmount of', index, item.title);
    };
  }, []);

  return (
    <View style={styles.card}>
      <Text style={styles.cardText}>{item.title}</Text>
      <Image source={{uri: item.imgSrc}} style={styles.imageStyles} />
    </View>
  );
};

const App = () => {
  const [data, setData] = useState(DATA);
  const fetchNextPage = () => {
    const newInnerData = [...data[0].data, ...additionalFruits];
    setData([{...data[0], data: newInnerData}]);
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.scrollView}>
        <SectionList
          keyExtractor={keyExtractor}
          onEndReachedThreshold={0.5}
          onEndReached={fetchNextPage}
          sections={data}
          renderItem={renderItem}
          ItemSeparatorComponent={() => <View style={{height: 16}} />}
          renderSectionHeader={({section}) => (
            <Text style={styles.sectionHeaderText}>{section.title}</Text>
          )}
        />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F5F5',
    paddingTop: StatusBar.currentHeight,
  },
  scrollView: {
    paddingHorizontal: 16,
  },
  card: {
    backgroundColor: '#FFFFFF',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
    height: 200,
    padding: 16,
    borderRadius: 8,
    marginBottom: 16,
    borderWidth: 1,
  },
  cardText: {
    fontSize: 30,
  },
  headerText: {
    fontSize: 24,
    textAlign: 'center',
    marginBottom: 12,
  },
  footerText: {
    fontSize: 24,
    textAlign: 'center',
    marginTop: 12,
  },
  sectionHeaderText: {
    backgroundColor: '#FFFFFF',
    fontSize: 24,
    fontWeight: 'bold',
  },
  imageStyles: {
    height: '100%',
    width: 100,
  },
});

export default App;
```

Reviewed By: yungsters

Differential Revision: D54301991

Pulled By: javache

fbshipit-source-id: d2cfafb1b4eb868761d849111b5abb7e9d584a46
2024-02-29 02:38:46 -08:00
Moti Zilberman d6e0bc714a Enable lint/sort-imports everywhere (#41334)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/41334

TSIA.

Changelog: [Internal]

Reviewed By: robhogan

Differential Revision: D51025812

fbshipit-source-id: e10d437be775a6b80946483aa96460f34927f870
2023-11-06 12:59:38 -08:00
Nick Gerleman 8f7f0bf2a3 Extract logic to CellMetricsAggregator (#37777)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/37777

This extracts the state and logic VirtualizedList uses to query information related to cell metrics. We will need to modify this (and other places) when fixing up RTL support for horizontal FlatList.

Changelog: [Internal]

Reviewed By: javache

Differential Revision: D46427052

fbshipit-source-id: 0a23f6c726447de0f20c583b4d507003efd6a754
2023-06-08 15:53:10 -07:00
Nick Gerleman 96225cec2b Rename FrameMetrics to CellMetrics (#37778)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/37778

These functions describe how to get the metrics of a specific cell. "Frame" here seems non-descriptive and redundant to the "Metrics" part. Renaming this before a larger refactor.

Changelog: [Internal]

Reviewed By: philIip

Differential Revision: D46427058

fbshipit-source-id: e9ad9cf15e1adfd07604eb11526de0ed8cf99000
2023-06-08 15:53:10 -07:00
George Zahariev e2116d277d Codemod $Shape to Partial in xplat, suppressing errors [4] (#36960)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/36960

We're deprecating the unsafe `$Shape` and moving to the safe `Partial`: https://fb.workplace.com/groups/flowlang/posts/1251655088773485

I have previously codemodded all locations that do not cause errors. Now start on the remaining ones: codemod and suppress.

Changelog: [Internal]

Reviewed By: SamChou19815

Differential Revision: D45076273

fbshipit-source-id: 27ebf33370143e19751dbdcfcc1876cf3c586e14
2023-04-18 13:49:07 -07:00
Nick Gerleman 0daf83ac51 Reconnect VirtualizedList Source History 2/2 (Apply D41745930 + history, D42805202, D43063551)
Summary:
This change re-applies D41745930 (https://github.com/facebook/react-native/commit/2e3dbe9c2fbff52448e2d5a7c1e4c96b1016cf25) (and D42805202 (https://github.com/facebook/react-native/commit/1479b2ac26fded3840c596f53e6eb86a4b0c2c71) which was also partially reverted), re-registers additions as moves, then applies D43063551 which has been added to the changes since migration.

Changelog: [Internal]

Reviewed By: hoxyq

Differential Revision: D43068114

fbshipit-source-id: 72997700bf9962d82a988599481e255b69e68a9b
2023-02-06 20:00:19 -08:00
Nick Gerleman ebaa00e327 Reconnect VirtualizedList Source History 1/2 (Revert D41745930)
Summary:
This change reverts D41745930 (https://github.com/facebook/react-native/commit/2e3dbe9c2fbff52448e2d5a7c1e4c96b1016cf25) as part of a stack to splice back source history which was lost (Git registered the file moves as additions).

It is expected this diff will individually fail. The entire stack should be applied at once.

Changelog: [Internal]

Reviewed By: hoxyq

Differential Revision: D43068113

fbshipit-source-id: c8398629fe5dcc1ca4bf02f550adc00c78a8487a
2023-02-06 20:00:19 -08:00
Gabriel Donadel Dall'Agnol 2e3dbe9c2f feat: Move virtualized lists to @react-native/virtualized-lists (#35406)
Summary:
This PR moves `VirtualizedList`, `VirtualizedSectionList`, and its files to a separate package called `react-native/virtualized-lists` located under `packages/virtualized-lists` as proposed on https://github.com/facebook/react-native/issues/35263

## Changelog

[General] [Changed] - Move virtualized lists to react-native/virtualized-lists package

Pull Request resolved: https://github.com/facebook/react-native/pull/35406

Test Plan:
1. Open the RNTester app and navigate to `FlatList` or `SectionList` page
2. Test virtualized lists through the many sections

https://user-images.githubusercontent.com/11707729/202878843-2b1322f5-cfee-484e-aaf3-d8d4dc0b96cc.mov

Reviewed By: cipolleschi

Differential Revision: D41745930

Pulled By: hoxyq

fbshipit-source-id: d3d33896801fd69448c6893b86fd5c2363144fd0
2023-02-06 13:39:13 -08:00