search

omahili / react-native-reorderable-list

A reorderable list for React Native applications, powered by Reanimated 2 🚀
MIT License
115 stars 5 forks source link

Headless mode #5

Closed nandorojo closed 2 years ago

nandorojo commented 2 years ago

It would be interesting if we could put items anywhere inside of a scrollview rather than in a flatlist:

const scrollRef = useAnimatedRef()

<Animated.ScrollView ref={scrollRef}>
  <Reorder scrollRef={scrollRef} items={items} onSetItems={setItems}>
    {items.map(item => <Reorder.Item key={item} />)}
  </Reorder>
</Animated.ScrollView>

That's some pseudo-code inspired by framer-motion's Reorder component. We could pass the scroll ref to the component and not have to worry about list header and footer components, which are bad for general composability.

All good if this is too challenging, figured I'd mention it in case. Feel free to close if it feels out of scope.

omahili commented 2 years ago

Hi @nandorojo, I'm taking into consideration the possibility to allow nesting it into a ScollView and simultaneousHandlers could help achieving this. However I think that not using a FlatList could be counterproductive for performance reasons, so I'd stick with it. Thank you for the proposal!

omahili commented 2 years ago

Closing in favor of #2