Skip to content

Commit

Permalink
Merge pull request #20 from ArekChr/arekchr/fix-viewable-items-invert…
Browse files Browse the repository at this point in the history
…ed-list

Fix: onViewableItemsChanged event handler for inverted FlatList
  • Loading branch information
MonilBhavsar authored Jul 25, 2023
2 parents 16921d7 + 0d443e7 commit 1fe5266
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 0 deletions.
82 changes: 82 additions & 0 deletions packages/react-native-web-examples/pages/viewable-items/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import React from 'react';
import {
FlatList,
StyleSheet,
Text,
Pressable,
View,
Button
} from 'react-native';
import Example from '../../shared/example';

const ITEMS = [...Array(200)].map((_, i) => `Item ${i}`);

const viewabilityConfig = {
itemVisiblePercentThreshold: 95
};

function createItemRow({ item, index }) {
return (
<Pressable key={index} style={[styles.item]}>
<Text style={styles.text}>{item}</Text>
</Pressable>
);
}

function Divider() {
return <View style={styles.divider} />;
}

function onViewableItemsChanged({ viewableItems, changed }) {
console.log('Visible items are', viewableItems);
console.log('Changed in this iteration', changed);
}

export default function ScrollViewPage() {
const [isInverted, setIsInverted] = React.useState(true);

return (
<Example title="ViewableItems Test">
<View style={styles.container}>
<Button
onPress={() => setIsInverted((val) => !val)}
title={isInverted ? 'Inverted Enabled' : 'Inverted Disabled'}
/>
<FlatList
ItemSeparatorComponent={Divider}
data={ITEMS}
inverted={isInverted}
onViewableItemsChanged={onViewableItemsChanged}
renderItem={createItemRow}
style={styles.scrollView}
viewabilityConfig={viewabilityConfig}
/>
</View>
</Example>
);
}

const styles = StyleSheet.create({
container: {
alignSelf: 'stretch'
},
scrollView: {
backgroundColor: '#eeeeee',
maxHeight: 250
},
item: {
margin: 5,
padding: 5,
backgroundColor: '#cccccc',
borderRadius: 3,
minWidth: 96
},
text: {
fontSize: 16,
fontWeight: 'bold',
margin: 5
},
divider: {
width: '1rem'
}
});
Original file line number Diff line number Diff line change
Expand Up @@ -1424,14 +1424,23 @@ class VirtualizedList extends React.PureComponent<Props, State> {
}
};

_selectClientLength(parentNode) {
return !horizontalOrDefault(this.props.horizontal) ? parentNode.clientHeight : parentNode.clientWidth;
}

_onCellLayout(e, cellKey, index) {
const layout = e.nativeEvent.layout;
const target = e.nativeEvent.target;
const next = {
offset: this._selectOffset(layout),
length: this._selectLength(layout),
index,
inLayout: true,
};

if (this.props.inverted) {
next.offset = this._selectClientLength(target.parentNode) - next.offset - next.length;
}
const curr = this._frames[cellKey];
if (
!curr ||
Expand Down

0 comments on commit 1fe5266

Please sign in to comment.