Drag and Drop doesn't work for emulator and real device

Open mckrava opened this issue 7 years ago • 1 comments

Hello! I wanna use your lib but I can't force it to work.
I'm working with Android Studio emulator Nexus 5X API 26 x86. Here are some of my dependencies: "native-base": "^2.3.3", "react": "^16.1.1", "react-native": "v0.49.3 ", "react-native-sortable-list": "0.0.20", "react-redux": "^5.0.6", "redux": "^3.7.2", I'm using Native Base for better UI. Here is part with SortableList component:

    renderDishesList(){
        let dnd_basket_scope = this.prepareDnDBasketScope();
        if (this.props.basket.basket_scope.length > 0) {
            return(
                <List>
                    <SortableList
                        // style={styles.list}
                        // contentContainerStyle={styles.contentContainer}
                        onActivateRow={ this.onRowActivate }
                        onPressRow={ this.onRowPress }
                        data={dnd_basket_scope}
                        renderRow={this.renderRow} />
                </List>
            )
        } else {
            Actions.pop();
        }
    }

    renderRow({ data, active }){
        return <DishItem current_dish={ data.dish } active={ active }/>
    }

    render() {
        return (
            <View style={{ flex: 1, backgroundColor: '#fff', paddingBottom: 50 }}>
                <ScrollView style={{ flex: 1, padding: 10 }}>
                    { this.renderDishesList() }
                </ScrollView>
            </View>
        )
    }

Here is DishItem component:

class DishItem extends Component {

    constructor(props) {
        super(props);
        this.state = {
            current_selected_quantity:  0,
            basket_scope:               props.basket.basket_scope
        };

        this._active = new Animated.Value(0.01);

        this.onDishSelect   = this.onDishSelect.bind(this);

        this._style = {
            ...Platform.select({
                ios: {
                    transform: [{
                        scale: this._active.interpolate({
                            inputRange: [0, 1],
                            outputRange: [1, 1.1],
                        }),
                    }],
                    shadowRadius: this._active.interpolate({
                        inputRange: [0, 1],
                        outputRange: [2, 10],
                    }),
                },

                android: {
                    transform: [{
                        scale: this._active.interpolate({
                            inputRange: [0, 1],
                            outputRange: [1, 1.07],
                        }),
                    }],
                    elevation: this._active.interpolate({
                        inputRange: [0, 1],
                        outputRange: [2, 6],
                    }),
                },
            })
        };

    }

    componentWillReceiveProps(nextProps) {
        if (this.props.active !== nextProps.active) {
            Animated.timing(this._active, {
                duration: 300,
                easing: Easing.bounce,
                toValue: Number(nextProps.active),
            }).start();
        }
    }

    onDishSelect(selected_dish){
        this.props.setCurrentDish(selected_dish);
        Actions.singleDish();
    }

    render() {
        let item_object = this.props.current_dish;

        return (
            <Animated.View style={[ this._style ]}>
                <TouchableWithoutFeedback onPress={() => this.onDishSelect(item_object)}>
                    <ListItem style={ itemContainer }>
                        <Thumbnail square size={80} source={{ uri: item_object.image }} />
                        <Body style={{ flexDirection: 'row', alignItems: 'center' }}>
                            <View style={{ flex: 1 }}>
                                <Text>{ item_object.title }</Text>
                                <Text note>{ item_object.price } { item_object.currency }</Text>
                            </View>
                            <View>
                                <QuantityControls current_dish={ item_object }/>
                            </View>
                        </Body>
                    </ListItem>
                </TouchableWithoutFeedback>
            </Animated.View>
        )
    }
}

So issue is that Drag&Drop doesn't work. Actions onActivateRow and onPressRow don't work when I make long press to the row. After short press to the item works TouchableWithoutFeedback handler. For test I removed TouchableWithoutFeedback and D&D still didn't work. Also I remover Native Base components and user simple <View> components - without result. But, example page from your repo is working properly in my application. It's a magic :(

Feb 07 '18 15:02 mckrava

Updated. I've found reasons of my issue. It's 2 things:

List component from Native Base lib;
list item was wrapped to the TouchableWithoutFeedback component. When I'm removing these components all working properly.

Feb 12 '18 10:02 mckrava