How to scroll when list longer than screen height?

[fritzfr]

Hi,

I was wondering what the suggested approach is for lists longer than the screen height. The only way to scroll down seems to be dragging something further down. But I am wondering if it's possible to scroll without changing the order.

[curiousdustin]

The list should scroll like a normal FlatList. What is the behavior you are seeing?

[csath]

I have the same issue but only on android. Seems wipe up gesture is not captured. But if you press and hold for more than 10ms and swipe up scrolling happens.

[computerjazz]

Are you nesting the flatlist in another scrollable?

[fritzfr]

I do not.

[computerjazz]

thanks looking into it now -- there may have been a bug recently introduced

[computerjazz]

please try 2.1.2 and let me know if the issue is fixed

[jschwab923]

I was seeing this same issue on iOS. Can confirm that 2.1.2 has fixed the problem for me. @computerjazz Thanks for the quick response!

[csath]

I'm using computerjazz/react-native-swipeable-item with draggable flat list. I use latest versions of both libraries and you can find the versions below.

"react-native-draggable-flatlist": "^2.1.1", "react-native-swipeable-item": "^1.1.0", "react-native-gesture-handler": "^1.5.0", "react-native-reanimated": "^1.4.0"

Now application crashes with following error message.

[computerjazz]

@csath That's an issue with react-native-swipeable-item and not related to this issue. I've fixed it in 1.1.1 but please open an issue on that repo if you have future problems with it.

[fritzfr]

Yip, seems to be resolved for me. Thanks!

[wstock]

I'm finding, Android only:

• nested horizontal FlatLists will not scroll horizontally but vertical scrolling on the FlatList moves the screen as expected.

• if I make them nested horizontal DraggableFlatLists (with no drag functionality), they will scroll through the list horizontally but seem to block any vertical scrolling. So if I have an item that is as long as the screen, there's no way to scroll vertically away from it.

iOS works fine.

[bkitduy]

DraggableFlatLists nested in ScrollView. If the length of items in DraggableFlatLists so long, i can't scroll the items. Any solutions?

[sachix1001]

I'm having the same issue. I have vertical scrollView inside of horizontal DraggableFlatLists. The vertical scrollView doesn't scroll. Does anyone find a solution?

[wstock]

I found the FlatList from the gesture handler library behaves as expected when nested in a Draggable FlatList.

import { FlatList } from 'react-native-gesture-handler';

[sachix1001]

Thanks, wstock!! It worked with gesture handler!! You are legend!

[10xamohan]

Scroll works when touch above DraggableFlatList, but when tries to scroll from DraggableFlatList it does not work else working smooth as perfect

<ScrollView  style={{paddingTop:20}}>
            {this.state.progress ? (<View><Text> ... </Text></View>) :
                (                

                    <DraggableFlatList
                        scrollEnabled={false}                               
                        data={this.state.tempSectionItems}
                        renderItem={this.renderItem}                               
                        keyExtractor={(item, index) => `draggable-item-${item.prior}`}
                        onDragEnd={({ data }) =>  this.reoderFn(data)  }

                    />                        

                )           
            }          
           </ScrollView>

[JosephCon1998]

@10xamohan I'm having the exact same problem. Anybody have a solution?

[10xamohan]

Removed scrollView and its works fine for me one more thing I am not sure if it's because of that but I replaced RNFlatList with FlatList used in react-native-gesture-handler under node modules

whole code is

<SafeAreaView style={{flex: 1}}>
            <Header onPressBack={this.handleBackPress} title={LocalizedStrings.label.labelReordering}  />
               <View
                   style={{paddingVertical:20,backgroundColor:"#EAF3FA", marginBottom:25}}
                   >
                   <View style={{flexDirection:"row",  marginLeft:20 }}>
                       <Image source={assets.reorderScreen.arrow}  />
                       <Text style={{fontSize:18,marginLeft:15, fontWeight:"500" ,color:'#1C3865'}}>Drag and drop to reorder items</Text>
                   </View>

               </View>
           <DraggableFlatList
             data={this.state.tempSectionItems}
             renderItem={this.renderItem}
             keyExtractor={(item, index) => `draggable-item-${item.prior}`}
             onDragEnd={({ data }) => this.reoderFn(data) }
           />
           <TouchableHighlight onPress={this.saveList}
               style={{margin:20, justifyContent: 'center', backgroundColor:'rgb(28, 56, 101)',height: 50,borderRadius: 25 }} underlayColor={'#6EC8E6'} >
                <Text style={{alignSelf: 'center',color:"white",fontSize: 20}}>{LocalizedStrings.button.save}</Text>
           </TouchableHighlight>
            </SafeAreaView>

[10xamohan]

@10xamohan I'm having the exact same problem. Anybody have a solution?

You can check my code

[gael-explose]

Hi, I still have a problem on Android, here is the structure of my code:

      `<ScrollView
               refreshControl={
                    <RefreshControl refreshing={this.state.refreshing} onRefresh={() => onRefresh()}/>
                 }
         >

              <View style={styles.viewButonPlus}>
                    <Weather_info ref="weatherInfo" {...this.props} />

                     <ShortTermWeather callBackRefresh={(data) => 
                          this.refs.weatherInfo.refreshData(data)
                      }/>
              </view>

              <DraggableFlatList 
                   scrollEnabled={false}
                   data={this.state.data}
                   renderItem={this.renderItem}
                   keyExtractor={(item, index) => `draggable-item-${item.key}`}
                   onDragEnd={({ data }) => { this.changeDisposition(data) }}
              />
             </View>
      </ScrollView>`

contains a flatlist with an horizontal scroll that works perfectly with my structure. My problem comes from the fact that I can't scroll from the elements of my DraggableFlatList. I can't find a solution to my problem, does anyone have the solution ? Big thanks.

[bill-pairaktaridis]

I can't scroll either. If I use a <FlatList /> or <SectionList /> everything works correctly. But with <DraggableFlatList /> I can basically only scroll if I drag an item.

EDIT: I was able to resolve this by using activationDistance={100} on the DraggableFlatlist. Maybe it was because I have the list within a tab navigator with swipe gestures.

[Svarto]

Any update on this?

I have a the DraggableFlatlist inside a Scrollview (this is a bigger screen, the DraggableFlatlist is just one list out of many), and vertical scrolls are consumed by the DraggableFlatlist and you can't scroll away if the list is longer than the screen.

activationDistance doesn't work for me, as it breaks dragging the list items - it enables scrolling vertically on the draggableFlatlist items but it breaks the actual dragging and reordering of the list items.

Hope I make sense, anyone managed to solve this? I can't change the ScrollView to gesture-handler version as I am using a KeyboardAwareScrollView...

[chengsam]

I can't scroll either. If I use a <FlatList /> or <SectionList /> everything works correctly. But with <DraggableFlatList /> I can basically only scroll if I drag an item.

EDIT: I was able to resolve this by using activationDistance={100} on the DraggableFlatlist. Maybe it was because I have the list within a tab navigator with swipe gestures.

After adding activationDistance my list can scroll but then unable to drag..

[JerakRus]

The simultaneousHandlers attribute can now be used, this was added here https://github.com/computerjazz/react-native-draggable-flatlist/pull/273. Dragging and dropping will work. It will be the same with FlatList, but you need to create a ref in a slightly different way. Here's my example:

import React, { useState, useCallback, useRef } from 'react'
import { View, Text, StyleSheet } from 'react-native'
import { FlatList } from 'react-native-gesture-handler'
import DraggableFlatList from 'react-native-draggable-flatlist'
import SectionHeader from '../common/SectionHeader'

const DraggableSectionList = ({ sections, keyExtractor, onEndReached, onRefresh, refreshing,
  ListEmptyComponent, ListFooterComponent, onScroll, onScrollEndDrag, onMomentumScrollEnd }) => {

  const parentRef = useRef(null)
  const [stopScroll, setStopScroll] = useState(false)

  const renderSection = useCallback(({ item: section, index }) => {
    return (
      <DraggableFlatList data={section.data}
                         renderItem={section.renderItem}
                         keyExtractor={keyExtractor}
                         simultaneousHandlers={parentRef}
                         onDragBegin={() => setStopScroll(true)}
                         onRelease={() => setStopScroll(false)}
                         onDragEnd={section.onDragEnd}
      />
    )
  }, [])

  const _keyExtractor = (item, index) => item.key
  const _separator = () => <SectionHeader date={''}/>
  return (
    <FlatList data={sections}
              renderItem={renderSection}
              keyExtractor={_keyExtractor}
              onEndReached={onEndReached}
              onRefresh={onRefresh}
              refreshing={refreshing}
              ListEmptyComponent={ListEmptyComponent}
              ListFooterComponent={ListFooterComponent}
              ItemSeparatorComponent={_separator}
              initialNumToRender={15}
              onEndReachedThreshold={0.5}
              scrollEventThrottle={5}
              onScroll={onScroll}
              onScrollEndDrag={onScrollEndDrag}
              onMomentumScrollEnd={onMomentumScrollEnd}
              ref={(f) => f && (parentRef.current = f._listRef._scrollRef)}
              scrollEnabled={!stopScroll}
    />
  )
}

export default React.memo(DraggableSectionList)

From the important points, I note that ScrollView and FlatList must be imported from the 'react-native-gesture-handler'library of version 1.10.0 or higher.

Also, unfortunately, there is a bug related to the 'react-native-gesture-handler' library - onRefresh will not work on android. (bug) But maybe it will help someone anyway.

[dreamkyr]

Thanks for great library. I found pretty easy solution without simultaneousHandlers

const [scrollEnable, setScrollEnable] = useState(true);
const renderItem = useCallback(({ item, index, drag, isActive }) => {
    return (
      <View
        style={{
          height: 100,
          backgroundColor: isActive ? 'red' : item.backgroundColor,
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        <Text
          style={{
            fontWeight: 'bold',
            color: 'white',
            fontSize: 32,
          }}>
          {item.label}
        </Text>
        <TouchableOpacity onPressIn={drag}>
          <Text>drag</Text>
        </TouchableOpacity>
      </View>
    );
  }, []);
  return (
<DraggableFlatList
        data={data}
        renderItem={renderItem}
        activationDistance={scrollEnable ? 100 : 1}
        keyExtractor={(item, index) => `draggable-item-${item.key}`}
        onDragBegin={() => setScrollEnable(false)}
        onDragEnd={({ data: item }) => {
          setData(item);
          setScrollEnable(true);
        }}
      />)

[Andriiklymiuk]

Still no luck of using DraggableFlatList inside ScrollView, when content of flatList goes beyond the screen. Autoscroll autoscrollSpeed and autoscrollThreshold also doesn't work. Has anyone figure out stable solution to this?

[sliptype]

I was able to get scrolling, dragging, and auto scrolling working by providing the ListHeaderComponent and ListFooterComponent props with the content I needed to be above and below the draggable items.

Instead of nesting DraggableFlatList inside a ScrollView I used it as the top level scroll view, with extra content above and below

[rohankm]

im facing a issue where the items always scrolls to the top when the item is bigger than the DraggableFlatlist height