it seems like it just distributes number of items equally and doesn't take their heights in consideration.
I think it should make the distribution with respect to height.

Is this made by masonry-list as well? if yes, do you have a code example?

Describe the bug

https://reactnative.dev/docs/scrollview#contentcontainerstyle allows for padding of the content so it does not get obscured at the bottom and not flushed to the edge. The values appear to be ignored.

Is your feature request related to a problem? Please describe.
Hi devs, we use this library in our project and we want to pass the prop progressViewOffset to the mansory list component but you dont declare it in the props and as you know that prop allow us to move the progress indicator from the scrollview.

Describe the solution you'd like
Just add the prop progressViewOffset

I write this like an issue because i tried to fork and add the prop myself but when add the fork to the package.json of my project it throws me an error, so i hope you read this and consider this. Thank you.

It seems as if RemoveClippedSubviews is not supported as a prop to MasonryList, it seems to be permanently set to True.

This is extremely annoying in certain scenarios, particularly for when a list is rendered off-screen, then moved on-screen, because it will be invisible until the user touches the screen where the invisible list is. This makes it essentially unworkable when doing animations that require things to start off-screen and move on-screen.

Support for this would be greatly appreciated!

Is your feature request related to a problem? Please describe.

I am using your masonry list for a gif search component (thanks btw, saved me lots of time 💛 ) and when pulling down at the top of the scrollable list, i do not want to refresh the results but i cannot figure out how to stop the built in loading spinner from appearing.

Describe the solution you'd like

A way to remove / customise the default loading spinner.

Describe alternatives you've considered

I tried to pass loading={false} and refreshing={false} and a custom LoadingView component but it made no difference. Is there a way to achieve this that I am missing?

Additional context

I am referring to the black spinner that appears here between the search box and the results when I pull down:

Describe the bug
It seems to this library works well with plain react-native project not expo only.

Could we remove expo peer dependency in package.json?

To Reproduce

1. Use this package in plain react native project.
2. Install package

Additional Context
It seems to #60 also handle this topic.

• react native version = 0.63.0
• @react-native-seoul/masonry-list version = 1.0.7
• Hook Component

Describe the solution you'd like
Please add a new props for making space between columns!!

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Describe the bug

The index in FlatList uses index but in MasonrlyList it uses i

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Here is the diff that avoid typing's warnings on props data and renderItem:

diff --git a/node_modules/@react-native-seoul/masonry-list/lib/index.d.ts b/node_modules/@react-native-seoul/masonry-list/lib/index.d.ts
index dc67ceb..980b1c6 100644
--- a/node_modules/@react-native-seoul/masonry-list/lib/index.d.ts
+++ b/node_modules/@react-native-seoul/masonry-list/lib/index.d.ts
@@ -1,5 +1,5 @@
 import type { Omit, RefreshControlProps, ScrollViewProps, StyleProp, ViewStyle } from 'react-native';
-import { ScrollView } from 'react-native';
+import { ListRenderItem, ScrollView } from "react-native";
 import type { MutableRefObject, ReactElement } from 'react';
 import React from 'react';
 interface Props<T> extends Omit<ScrollViewProps, 'refreshControl'> {
@@ -11,11 +11,8 @@ interface Props<T> extends Omit<ScrollViewProps, 'refreshControl'> {
     onEndReached?: () => void;
     onEndReachedThreshold?: number;
     style?: StyleProp<ViewStyle>;
-    data: T[];
-    renderItem: ({ item, i }: {
-        item: T;
-        i: number;
-    }) => ReactElement;
+    data: ReadonlyArray<T>;
+    renderItem: ListRenderItem<ItemT> | null | undefined;
     LoadingView?: React.ComponentType<any> | React.ReactElement | null;
     ListHeaderComponent?: React.ReactNode | null;
     ListEmptyComponent?: React.ComponentType<any> | React.ReactElement | null;

I need to use onScoll to control my header, it's available to the native FlatList but it's not here. Can you fix this, please? thanks.

ps I get this error:

onScroll: (event: any) => void; }' is not assignable to type 'IntrinsicAttributes & Props<unknown>'.
  Property 'onScroll' does not exist on type 'IntrinsicAttributes & Props<unknown>'.

I am trying to make a very basic masonry list, but unable to generate any output. But when I run the expo project on my laptop browser, I m able to see the output. Please check the screenshots. I guess I am missing some dependency or something.

Code:

import MasonryList from "@react-native-seoul/masonry-list";
...
      <Text>-Start-</Text>
      <MasonryList
        data={["dummy1", "dummy2", "dummy3", "dummy4"]}
        renderItem={() => <Text>hi</Text>}
      />
      <Text>-End-</Text>
...

Screenshots

on Web (laptop, via expo)

on Android ( Expo Go )

• OS: MacOS
• Browser: Brave
• Device: Android
• Version: 12

version
"@react-native-seoul/masonry-list": "^1.4.2"

Is it only me or the ListHeaderComponent is not supported ? I could post my code but I dont think its necessary, if I replace <MasonryList .../> with <FlatList ... /> the component called in ListHeaderComponent is showing but nothing show with <MasonryList .../> and I dont get any error, its just not here.

Thank you

After updating to react-native 71.8 i am getting this bug
in @react-native-seoul/masonry-list/lib/index.d.ts
in line ->
import type { Omit, RefreshControlProps, ScrollViewProps, StyleProp, ViewStyle } from 'react-native';

There is no "Omit" in react-native, if i remove the Omit import, dependent issues disappear, too

Thanks for your time

Describe the bug
Hi,
I want to make infinite scroll with onEndReachedThreshold and onEndReached.
But when I use onEndReachedThreshold and onEndReached, it triggers onEndReachedThreshold's inaccurate scroll position.
I add my code and video here.

  return (
    <SafeAreaView style={styles.container}>
      <MasonryList
        keyExtractor={(item, index): string => `${item.id}${index}`}
        numColumns={2}
        data={imageList}
        renderItem={({item}) => (
          <ImageItem item={item} onPressBookmarkBtn={onPressBookmarkBtn} />
        )}
        onEndReachedThreshold={0}
        onEndReached={() => console.log('onEndReached !')}
        onMomentumScrollBegin={() => setIsLoading(true)}
      />
    </SafeAreaView>
  );

Screenshots
https://user-images.githubusercontent.com/71131248/179920395-b28b3aa2-7b6c-4b78-abbe-ab8aeb69a892.mp4

Desktop (please complete the following information):

• OS: Mac OS Big Sir
• Browser: Chrome
• Version: 91

Smartphone (please complete the following information):

• Device: iphone 13
• OS: IOS 15.5

I'm encountering an issue with a library I'm using to display posts in two columns. While the buttons display perfectly on the right side, above the posts , there's a problem on the left side where some buttons appear misaligned, positioned below the right side.

Describe the bug
onEndReached method gets fired multiple times when scrolling to the end of scroll view when trying to fetch next set of data for pagination.

Code:

 return (
    <View style={styles.container}>
      <MasonryList
        contentContainerStyle={styles.bListContainer}
        data={feedActivites}
        keyExtractor={(item) => item.id}
        numColumns={2}
        showsVerticalScrollIndicator={false}
        renderItem={({ item }) => <ActivityCard key={item.id} activity={item} />}
        refreshing={feedFetching}
        onRefresh={() => getInitialFeedActivites()}
        onEndReached={() => {
            console.log('onEndReached Fired!');
            // getNextActivites();
        }}
        onEndReachedThreshold={0.1}
      />
    </View>
  );
}

To Reproduce
Steps to reproduce the behavior:

1. Add data to data array
2. add onEndReached Method
3. Scroll down to end of List
4. onEndReached Method gets called in rapid succession multiple times

Expected behavior
Should only fire one time when reaching end of list

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Mac OS Big Sir
• Browser: Chrome
• Version: 91

Smartphone (please complete the following information):

• Device: iPhone 12
• OS: iOS 14.5

Additional context
Add any other context about the problem here.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.
I would like to use this with reanimated 2 library, but how?
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
I don't know if onScroll can be both used the way you used and the way reanimated 2 scroll handler uses it, would you mind telling us if it is possible?
Additional context
Add any other context or screenshots about the feature request here.
https://docs.swmansion.com/react-native-reanimated/docs/api/useAnimatedScrollHandler/

I assume that ListHeaderComponentStyle is not included, could you please add it?

Describe the bug
I am trying to render a basic MasonryList. But not able to generate any output. However it works with vanilla FlatList.

To Reproduce
Here is the code:

import { StyleSheet, View, FlatList } from "react-native";
import React from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import MasonryList from "@react-native-seoul/masonry-list";
import DashboardCard from "@/components/DashboardCard";
import { widgets } from "@/constants/widgets";

const Dashboard = () => {
  return (
    <SafeAreaView className="flex">
      {/* <FlatList
        data={widgets}
        keyExtractor={(item) => item.id}
        renderItem={(item) => <DashboardCard />}
      /> */}
      <MasonryList
        data={widgets}
        keyExtractor={(item) => item.id}
        numColumns={2}
        showsVerticalScrollIndicator={false}
        renderItem={({ item }) => <DashboardCard />}
        onEndReachedThreshold={0.1}
      />
    </SafeAreaView>
  );
};

export default Dashboard;

Smartphone:

• Device: Android
• Version [13]

package version
@react-native-seoul/masonry-list": "^1.4.2

For those new to the field, I highly recommend checking out the MasonryFlashList by Shopify. This library offers a more efficient alternative to using ScrollView, which, while a quick solution, lacks performance. Although I haven't personally used MasonryFlashList, my experiences with Shopify's flashlist have been positive. I hope this suggestion proves helpful to you!

I feel like pull-to-refresh should be easy to disable but I'm missing how.
Possible?

Thanks.

Is your feature request related to a problem? Please describe.
Without this, Android will require two taps if the MasonryList contains Pressables.

Describe the solution you'd like
Self-explanatory.

Describe alternatives you've considered
Self-explanatory.

Additional context
facebook/react-native#4087

yarn install v1.22.17
info No lockfile found.
[1/4] Resolving packages...
error Couldn't find package "dooboolab-welcome" on the "npm" registry.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

npm install is fine

Current problem

I often find myself at the bottom of a long masonry list while using the @react-native-seoul/masonry-list library. Currently, there is no quick way to navigate back to the top of the list without manually scrolling upwards. This can be quite frustrating for users who want to quickly navigate back to the top for any reason.

Solution

I would like to see a "Scroll to Top" feature implemented. Specifically, when a user is at the bottom of a scrollable masonry list and taps on the tab bar icon, the view should automatically scroll back to the top. This will make navigation much smoother and user-friendly.

Considered alternatives

1. Implementing a dedicated "Scroll to Top" button: This could work but might clutter the UI.
2. Using gesture-based navigation: Though intuitive, this might interfere with other gestures or functionalities.

Additional context

This feature is common in many apps and significantly improves user experience. It would be a valuable addition to the @react-native-seoul/masonry-list library.

Hope to support functional components and get type hints

Is your feature request related to a problem? Please describe.
from this issue we know that you already update onScroll props.
but i have a question:

1. how to use it, because i dont find it in the docs
2. for using onScroll animation i have to use ref props. this library not support ref props
3. i use AnimatedEvent in onScroll props so we have this error

_onScroll is not a function. (In '_onScroll(e)', '_onScroll' is an instance of AnimatedEvent)

Describe the solution you'd like

1. please add React.forwardRef() so we can using ref props
2. maybe you should use AnimatedEvent.ScrollView

Unlike the Flatlist component will automatically apply key prop from KeyExtractor, if just passing will show missing key warning.

Suggest to revise the Usage part as follow:
renderItem={({item, i}) => <CardItem key={'card'+i} />}

P.S. Thanks for the package!

Is your feature request related to a problem? Please describe.
cannot adjust the inner padding between columns, looks like it is fixed for now? Now I have to add padding to each rendered item to add this inner padding between columns, it is very inconvenient to layout

Describe the solution you'd like
add a prop to pass in customize value as the inner padding between columns

Additional context

I load more then 100+ images on masonry list and when i scroll and select image from list, response take few seconds in android device while it's working perfectly in ios devices.

Describe the bug

The progressViewOffset property for the RefreshControl component is not functioning as expected. When setting an offset value, the refresh indicator does not move from its default position at the top of the view.

Reproduce

Steps to reproduce the behavior:

1. Go to a page with a scroll view that uses RefreshControl.
2. Set the progressViewOffset property to a numeric value, for example, 50.
3. Perform a pull-to-refresh action on the scroll view.
4. Observe that the refresh indicator remains at its default position and does not move down by 50 units as expected.

<RefreshControl progressViewOffset={50} />

Expected behavior

The refresh indicator should move 50 units down from its default position, aligning itself according to the progressViewOffset value set.

Smartphone:

• Device: [iPhone 14, pro Max]
• OS: [iOS 17.0]

Additional context

This issue limits the ability to create a polished and well-aligned user interface, especially when using custom headers or UI elements that need to align with the refresh indicator.

Describe the bug
"expo" is listed as a dependency in the core project but only used in the Example project. Is there a reason for this? It is causing warnings to be thrown in non-expo projects due to a missing peer dependency. Maybe it needs to move to devDependencies?

To Reproduce
In a non-expo project, add "@react-native-seoul/masonry-list": "1.4.2", to package.json and run yarn install, see warning:

YN0002: │ @test/mobile@workspace:packages/mobile doesn't provide expo (pb91be), requested by @react-native-seoul/masonry-list

Expected behavior
No warnings should print to console unless expo is being used in the core project itself. Maybe we need

Screenshots
N/A

Desktop (please complete the following information):

N/A

Smartphone (please complete the following information):

N/A

Additional context
using Yarn 3 and it shows warnings to help manage peer deps

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Describe the bug
When using the MasonryList component in a TypaScript project, the renderItem prop param item is not being typed as the elements given to the data prop array, but it is type 'unknown' so when rendering the item, ts raises this problem.

If I use FlatList or ScrollView instead, I don't get this warning.

To Reproduce
Steps to reproduce the behavior:

1. Create TypeScript project.
2. Define this constants:

interface PostPreviewProps {
  id: string;
  imgUrl: string;
}

const posts: PostPreviewProps[] = [
  {
    id: '1',
    imgUrl: 'https://img.freepik.com/free-photo/delicious-donuts_144627-6267.jpg?t=st=1708687137~exp=1708690737~hmac=f9cf5f46c098a440e9581533fe07c587d300dfc22b44d0cc7cdb1b6810503314&w=1480',
  },
  {
    id: '2',
    imgUrl: 'https://img.freepik.com/free-photo/vertical-shot-fox-walking-rocks-forest_181624-31966.jpg?t=st=1708686685~exp=1708690285~hmac=b7d67c6f8bf2576069aaa00308da904b12ae956275498340427b94165f880a60&w=996',
  },
];

3. Define the following component to render the item:

function PostPreview(props: PostPreviewProps): JSX.Element {
  return (
    <View>
      <Image
        source={{ uri: props.imgUrl }}
      />
    </View>
  );
}

5. Render the following:

<MasonryList
  data={posts}
  renderItem={({ item }) => (
    <PostPreview {...item} />
  )}
/>

6. See ts problem

Expected behavior
The item param from the renderItem callback should have type PostPreviewProps, since the data value (posts) is an array of such item type. Both FlatList and ScrollView do this automatically, but this MasonryList component says item is type unknown, which causes the ts problem reported when passed item as props to the PostPreview component.

Screenshots

I intended to use the MasonryList for infinite scroll, so memory usage is very important to my use case. In order to verify if the MasonryList can support infinite images, I tried to load 200+ images with the MasonryExample, however, the app failed to load images after around 130 images. I am wondering if MasonryList can support infinite items as native RecyclerView or TableView?

Here is the screenshot:
https://photos.app.goo.gl/s9DTL4MciU1Q27vA8

• Device: Samsung S20 Ultra
• OS: Android 12

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

I have TouchableOpacity as the parent of item that render on renderItem. And when i do longpress and swipe to down it is doing Pull To Refresh. Is there any proper way to disable Pull To Refresh?

The docs said this package extended ScrollView props, but when i set bounces to false it's still able to Pull To Refresh.

In my app the cards shows some informations. When the card is clicked, the information data should change as what parent component give to the child. In the child I use componentDidUpdate to achieve that (it works using FlatList), but it doesn't work using this. How can I use componentDidUpdate with this library? Thank you.

I'm trying to implement a variation of a masonry list and I haven't been able to achieve it. Is it possible to render an item spanning horizontally to two columns or is there a constraint that items should only have a single column of width? (i.e. If i have 4 columns, maybe i would like an item to span 2 of those 4 columns.)

when there is not enough content to cover the whole screen then onEndReached is not getting fired unlike flatlist where onEndReached gets called if content is not covering whole screen. onEndReached gets fired only after user scrolls. i tried passing onEndReachedThreshold also.

To Reproduce
keep content small that does not cover whole screen on first page of pagination

Expected behavior
onEndReached should get fired even if content is not covering whole screen

Smartphone (please complete the following information):
both android and iOS