diff --git a/example/src/Shared/Albums.tsx b/example/src/Shared/Albums.tsx index a4e772d8..aaf09f5f 100644 --- a/example/src/Shared/Albums.tsx +++ b/example/src/Shared/Albums.tsx @@ -9,6 +9,7 @@ import { ScrollViewProps, Dimensions, Platform, + ScaledSize, } from 'react-native'; import { useScrollToTop } from '@react-navigation/native'; @@ -40,15 +41,38 @@ const COVERS = [ ]; export default function Albums(props: Partial) { + const [dimensions, setDimensions] = React.useState(Dimensions.get('window')); + + React.useEffect(() => { + const onDimensionsChange = ({ window }: { window: ScaledSize }) => { + setDimensions(window); + }; + + Dimensions.addEventListener('change', onDimensionsChange); + + return () => Dimensions.removeEventListener('change', onDimensionsChange); + }, []); + const ref = React.useRef(null); useScrollToTop(ref); + const itemSize = dimensions.width / Math.floor(dimensions.width / 150); + return ( {COVERS.map((source, i) => ( - // eslint-disable-next-line react/no-array-index-key - + ))} @@ -76,10 +100,6 @@ const styles = StyleSheet.create({ flexDirection: 'row', flexWrap: 'wrap', }, - item: { - height: Dimensions.get('window').width / 2, - width: '50%', - }, }, }), photo: { diff --git a/example/src/index.tsx b/example/src/index.tsx index ecdef630..0a5e691a 100644 --- a/example/src/index.tsx +++ b/example/src/index.tsx @@ -219,7 +219,7 @@ export default function App() { return null; } - const isLargeScreen = dimensions.width > 834; + const isLargeScreen = dimensions.width >= 1024; return (