React Native Draggable Flatlist with Swipeable Item not working

Question

I am new to React native. I am trying draggable Flatlist with Swipeable item which is not working. But when i tried with example it's working but not with real code.

https://snack.expo.dev/@computerjazz/swipeable-draggable-list -- Working

 //Here is my first component 

This is my first component where i have added only draggable flatlist.But when i tried with example it's working but not with real code.

//Correct Draggable list
import React, {useState} from 'react';
import {StyleSheet, Text, TouchableOpacity, View, CheckBox} from 'react-native';
import DraggableFlatList from 'react-native-draggable-flatlist';
import LABEL from '../common/ContentTranslations';
import RowComponent from './RowComponent';

function DashboardSortableListComponent(props) {
  const [data, setData] = useState(props.data);
  const disableText = props.appLanguage
    ? LABEL[props.appLanguage].LABEL_DISABLE
    : '';

  const data_order = props.data;
  const order = Object.keys(data_order);
  const renderItem = ({item, index, drag, isActive}) => (
    <View style={styles.item}>
      <TouchableOpacity onLongPress={drag}>
        <RowComponent
          key={item.pid}
          rowData={item}
          index={index}
          totalRows={item.length}
          navigate={props.navigate}
          appLanguage={props.appLanguage}
          disableText={disableText}
          removeCurrencyPairFromList={props.removeCurrencyPairFromList}
        />
      </TouchableOpacity>
    </View>
  );

  return (
    <View style={styles.screen}>
      <View style={{flex: 1}}>
        <DraggableFlatList
          data={data}
          renderItem={renderItem}
          keyExtractor={(item, index) => index.toString()}
          onDragEnd={({data}) => setData(data)}
          updateOrder={props.onUpdateOrder}
          order={order}
          disableText={disableText}
          navigate={props.navigate}
          appLanguage={props.appLanguage}
          refreshCurrencyPairsList={props.refreshCurrencyPairsList}
          removeCurrencyPairFromList={props.removeCurrencyPairFromList}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    //marginTop: 24,
    flex: 1,
    //backgroundColor: '#212121',
  },
  item: {
    // flexDirection: 'row',
    // justifyContent: 'space-between',
  },
});

export default DashboardSortableListComponent;




   //Here is my second component where i have added Swipeable list in another component.



 import React from 'react';
import Swipeout from 'react-native-swipeout';
import {Text, View, Animated, TouchableOpacity} from 'react-native';
import {TouchableHighlight} from 'react-native-gesture-handler';
import HTMLText from 'react-native-html-to-text';
import {Helper} from '../common/helpers/Helper';
import Icon from 'react-native-vector-icons/Ionicons';
import Swipeable from 'react-native-gesture-handler/Swipeable';
import SwipeableItem, {
  useSwipeableItemParams,
} from 'react-native-swipeable-item';
import DraggableFlatList, {
  ScaleDecorator,
} from 'react-native-draggable-flatlist';
let createReactClass = require('create-react-class');
let styles = require('../assets/stylesheet/stylesheet');

const RowComponent = createReactClass({
  render: function () {
    let swipeoutBtns = [
      {
        text: this.props.disableText,
        backgroundColor: '#dfb665', //ff3333
        underlayColor: '#555d66',
        color: '#000000',
        onPress: () => {
          this.props.removeCurrencyPairFromList(this.props.rowData);
        },
      },
      ,
    ];
    const UnderlayRight = ({removeCurrencyPairFromList}) => (
      <Animated.Text
        style={{
          backgroundColor: '#dfb665',
          underlayColor: '#555d66',
          color: '#000000',
          flex: 1,
        }}>
        <TouchableOpacity
          onPress={() =>
            this.props.removeCurrencyPairFromList(this.props.rowData)
          }>
          <Text>{this.props.disableText}</Text>
        </TouchableOpacity>
      </Animated.Text>
    );

    return (
      <View
        style={
          this.props.index === this.props.totalRows - 1
            ? styles.cpLastRowStyle
            : styles.cpNormalRowStyle
        }>
        <ScaleDecorator>
          {/* <SwipeableItem
            key={this.props.rowData.pid}
            item={this.props.rowData}
            overSwipe={50}
            //swipeDamping={5}
            renderUnderlayRight={() => (
              <UnderlayRight
                removeCurrencyPairFromList={
                  this.props.removeCurrencyPairFromList
                }
              />
            )}
            snapPointsRight={[150]}> */}
             <Swipeout
          left={swipeoutBtns}
          style={{backgroundColor: '#414a53'}}
          autoClose={true}
          buttonWidth={100}
          sensitivity={10}>
            <View>
              {Helper.isChartsAvailable(
                this.props.rowData.currencyPair,
                this.props.rowData.graphCurrencyPair,
              ) ? (
                <TouchableHighlight
                  underlayColor={'#000000'}
                  delayLongPress={50}
                  style={{backgroundColor: '#333e48'}}
                  {...this.props.sortHandlers}
                  onPress={() =>
                    this.props.navigate('Charts', {
                      currencyPair: this.props.rowData.graphCurrencyPair,
                      bid: this.props.rowData.bid,
                      offer: this.props.rowData.offer,
                      graphCurrencyPair: this.props.rowData.graphCurrencyPair,
                      productName: Helper.selectProductNameBaseOnLang(
                        this.props.appLanguage,
                        this.props.rowData,
                      ),
                    })
                  }>
                  <View style={[styles.rowstyle]}>
                    <HTMLText
                      style={[
                        styles.width100,
                        styles.customFont,
                        styles.textGold,
                      ]}
                      html={Helper.selectProductNameBaseOnLang(
                        this.props.appLanguage,
                        this.props.rowData,
                      )}
                    />
                    <Text style={[styles.width60, styles.customFont]}>
                      {Helper.getDecimalPointsForCurrencyPairs(
                        this.props.rowData.currencyPair,
                      ) != -1
                        ? this.props.rowData.bid.toFixed(
                            Helper.getDecimalPointsForCurrencyPairs(
                              this.props.rowData.currencyPair,
                            ),
                          )
                        : this.props.rowData.bid}
                    </Text>
                    <Text style={[styles.width60, styles.customFont]}>
                      {Helper.getDecimalPointsForCurrencyPairs(
                        this.props.rowData.currencyPair,
                      ) != -1
                        ? this.props.rowData.offer.toFixed(
                            Helper.getDecimalPointsForCurrencyPairs(
                              this.props.rowData.currencyPair,
                            ),
                          )
                        : this.props.rowData.offer}
                    </Text>
                    <Icon
                      name="ios-stats-chart"
                      style={[styles.gridiconstyle, styles.width30]}
                    />
                  </View>
                </TouchableHighlight>
              ) : (
                <TouchableHighlight
                  underlayColor={'#000000'}
                  style={{backgroundColor: '#333e48'}}
                  delayLongPress={50}
                  {...this.props.sortHandlers}>
                  <View style={[styles.rowstyle]}>
                    <HTMLText
                      style={[
                        styles.width100,
                        styles.customFont,
                        styles.textGold,
                      ]}
                      html={Helper.selectProductNameBaseOnLang(
                        this.props.appLanguage,
                        this.props.rowData,
                      )}
                    />
                    <Text style={[styles.width60, styles.customFont]}>
                      {Helper.getDecimalPointsForCurrencyPairs(
                        this.props.rowData.currencyPair,
                      ) != -1
                        ? this.props.rowData.bid.toFixed(
                            Helper.getDecimalPointsForCurrencyPairs(
                              this.props.rowData.currencyPair,
                            ),
                          )
                        : this.props.rowData.bid}
                    </Text>
                    <Text style={[styles.width60, styles.customFont]}>
                      {Helper.getDecimalPointsForCurrencyPairs(
                        this.props.rowData.currencyPair,
                      ) != -1
                        ? this.props.rowData.offer.toFixed(
                            Helper.getDecimalPointsForCurrencyPairs(
                              this.props.rowData.currencyPair,
                            ),
                          )
                        : this.props.rowData.offer}
                    </Text>
                    <Icon
                      name="ios-stats-chart"
                      style={[
                        styles.gridiconstyle,
                        styles.width30,
                        styles.desabled,
                      ]}
                    />
                  </View>
                </TouchableHighlight>
              )}
            </View>
          {/* </SwipeableItem> */}
          </Swipeout>
        </ScaleDecorator>
      </View>
    );
  },
});

module.exports = RowComponent;

Answer 1

I had the same problem and next solution helped me.

Probably you didn't setup react-native-reanimated correctly. Check the documentation: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/

I think you need to add react-native-reanimated/plugin to the babel config.

And also add import 'react-native-gesture-handler' to the root component