FlatGrid Paging Scrolling issue

[Arnab1424]

While working on iOS 15.2 Flatgrid horizontal paging, after three grids, the fourth grid is visible and its visibility increases with every paging. However, the first grid’s visibility of a particular page, decreases with every paging

https://user-images.githubusercontent.com/79149847/154934239-b62cc5d7-9767-40a2-a107-6827f5f81e59.mp4

`import React, {useEffect, useState} from 'react'; import {FlatGrid} from 'react-native-super-grid'; import {View, Text, StyleSheet,} from 'react-native';

const App = () => { const [dataSet, setDataSet] = useState([]); useEffect(() => { let arr = []; for (let item = 0; item < 50; item++) { arr.push(item); } debugger; setDataSet(arr); }, []); return (

( {item} )} />

); };

const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', }, gridView: { marginTop: 200, flex: 1, }, itemContainer: { justifyContent: 'center', borderRadius: 5, padding: 45, height: 110, width: 123, backgroundColor: '#ff0000', }, itemName: { fontSize: 16, color: '#fff', fontWeight: '600', }, itemCode: { fontWeight: '600', fontSize: 12, color: '#fff', }, });

export default App;`

[saleel]

Interesting. I think its because of the way add spacing on the items - instead adding half the spacing on either side we are adding full spacing after the item. This may not be noticeable in the vertical mode.

Can you take a fork try changing this to

...(horizontal ? { marginRight: spacing / 2, marginLeft: spacing / 2,  } : {}),

And also maybe the same thing here

[saleel]

So I had a test with pagingEnabled key and I believe we can only achieve what you said above for a specific window width - the scroll size is determined by the device width and it may or may not fit the items+spacing exactly. I am closing this issue as this is not a generic behaviour that can be implemented.