Hey r/ReactNative! I recently picked up RN (am primarily a Swift developer), and am currently trying to build a drag-to-rearrange FlatList. However, I realised that z-Index really does do anything to help elevate the dragged elements over the other elements in the list.

• react-native-draggable-flatlist

  6 1,826 0.0 TypeScript

  A drag-and-drop-enabled FlatList for React Native

Hey, author of https://github.com/computerjazz/react-native-draggable-flatlist here. First off, nice work getting this far, drag-to-reorder is way more complex than it seems at first glance. You likely need to create a custom CellRendererComponent on the flatlist and apply the zIndex to an outer view wrapper there. zIndex only applies to sibling views and iirc the default cell renderer applies its own view wrapper.

• react-native-reorderable-list

  1 112 2.9 TypeScript

  A reorderable list for React Native applications, powered by Reanimated 2 🚀

I can recommend you this lib, I’ve used it before. It’s based on REA 2 codebase and also RNGH v2. You shouldn’t use PanGestureHandler anyway. https://github.com/omahili/react-native-reorderable-list

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• react-native-keyboard-aware-scroll-view

  6 5,214 0.0 JavaScript

  A ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput.

  

Hey man… I am interested in integrating your component into my app. I’m currently using the flat list from https://github.com/APSL/react-native-keyboard-aware-scroll-view to scroll to specific components based on focused text inputs. How could I combine your component with that and get both functionalities together? Thanks!

Suggest a related project