Sorting not working in Android

[saransh-malik]

Hi,

I am using this package to render a sortable list, which works as intended in iOS but not on android. On Android on longpress it does get active but as soon as I try to move it the view scrolls and the item goes back to its place.

Here is my code :

<View style={styles.container}>
        <View style={styles.header}>
          <TextButton text={`+ ${I18n.t('activityType')}`} textStyle={styles.btnText} onPress={this.goToEditActivityType()} style={styles.button} />
          <View styles={styles.infoText}>
            <Text style={styles.textInfo}>{I18n.t('toggleInfo')}</Text>
            <Text style={styles.textInfo}>{I18n.t('dragInfo')}</Text>
          </View>
        </View>
        <SortableList
          data={this.props.activityTypes}
          renderRow={this.renderItem}
          sortingEnabled
          manuallyActivateRows
          scrollEnabled={true}
          onReleaseRow={this.onReleaseRow}
          onChangeOrder={this.onChangeOrder}
        />
      </View>

Here is the renderRow Code :

<Animated.View style={this._style}>
        <TouchableOpacity
          style={styles.row}
          onPress={this.props.onPress}
          onLongPress={this.props.toggleRowActive}
        >
          <View style={styles.nameNIcon}>
            <Image
              style={[styles.image, !data.active ? styles.inactive : {}]}
              resizeMode='contain'
              source={Images[imageName]}
            />
            <Text style={[styles.text, !data.active ? styles.inactive : {}]}>
              {data.name}
            </Text>
          </View>
          <Switch
            trackColor={{ false: Colors.lightGray, true: Colors.primary }}
            thumbTintColor={Platform.OS === 'ios' ? null : Colors.snow}
            value={data.active}
            onValueChange={this.props.onToggleState}
            style={styles.switch}
          />
        </TouchableOpacity>
      </Animated.View>

React Native Version : 0.59.10 SortableList Version : 0.0.22

[emilionavarro]

Also running into this on Android. Seems to be working fine on iOS for me. Overall just seeing pretty different behavior on Android and iOS.

[mikraus94]

Do you have any workaround?

[devagul93]

Okay, It seems like ScrollView is taking control of panResponder,

Setting ScrollEnabled={false} prop makes the reordering work.

Finding a workaround.

@gitim would you recommend anything?

will send a PR when I am able to fix this.

[mikraus94]

Any another workaround if I need use scrolling?

[ivanzotov]

Adding another ScrollView around SortableList with controlled scrollEnabled works on Android. It is not scrolling when a draggable item on the top or bottom, but it is ok in my case.

<ScrollView scrollEnabled={this.state.scrollEnabled}>
   <SortableList
      scrollEnabled={false}
      onActivateRow={() => this.setState({ scrollEnabled: false })}
      onReleaseRow={() => this.setState({ scrollEnabled: true })}
      onChangeOrder={this.onChangeOrder}
      renderRow={this.renderRow}
   />
</ScrollView>

[billouboq]

these lines in componentDidUpdate of SortableListComponent are causing this issue :

if (prevProps.scrollEnabled !== scrollEnabled) {
	this.setState({ scrollEnabled: prevProps.scrollEnabled });
}

You can comment them.

[Yandamuri]

@ivanzotov I just copied your code, But still sorting is not working for me. Can you share this.renderRow to see how row implementation looks like. Do we need to provide anything to onLongpress or sorting works by default?

[caterinamennito]

Hey @sumnerwarren, thanks for your contribution: your fix is actually solving the Android sorting issue. Is there a reason why the PR wasn't merged?

[sumnerwarren]

@caterinamennito Only because this package does not seem to be maintained anymore. We switched to react-native-draggable-list.