mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
97f9e101bf2e4b9d3d1ed2f7f80ff4dfd663df42
9
Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
|
|
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 |
||
|
|
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 |
||
|
|
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 |
||
|
|
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 |
||
|
|
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 |
||
|
|
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 |
||
|
|
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 |
||
|
|
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 |
||
|
|
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 |