dancormier / react-native-swipeout

iOS-style swipeout buttons behind component
MIT License
2.62k stars 646 forks source link

It will not be restored after sliding. #268

Closed liuqing520it closed 4 years ago

liuqing520it commented 6 years ago

image image image

Swipeout drag will affect the layout of the control on the swipeout, causing the subspaces on the swipeout to shift to the left.

"react": "16.3.1", "react-native": "0.55.4", "react-navigation": "^1.1.2", "react-navigation-redux-helpers": "^1.0.6", "react-redux": "^5.0.7", "redux": "^4.0.0"

lytieunuong1 commented 6 years ago

I got the same issue when I tried to use this lib. Here is my code:

render() {
        const swipeSetting = {
            autoClose: true,
            onClose: (secId, rowId, direction) => {
            },
            onOpen: (secId, rowId, direction) => {
            },
            right: [
                {
                    onPress: () => {

                    },
                    text: 'Delete',type: 'delete'
                }
            ],
            rowId: this.props.item.index,
            sectionId:1
        };
        return (
            <Swipeout {...swipeSetting}>
                <View style={{}}>
                    <View style={{
                        flex: 1, 
                        backgroundColor: 'mediumseagreen',
                        flexDirection: 'row'
                        }}>
                        <Image style={{width:100, height:100, margin: 5}} source={{uri:this.props.item.imageURL}} />
                        <View style={{flex: 1, flexDirection:'column'}}>
                            <Text style={styles.flatListItem}>{this.props.item.name}</Text>
                            <Text style={styles.flatListItem}>{this.props.item.foodDescription}</Text>
                        </View>

                    </View>
                    <View style={{
                        height: 1,
                        backgroundColor: '#dadada'
                    }}
                    ></View>
                </View>
            </Swipeout> 
        );
    }

And style is:

const styles = StyleSheet.create({
    flatListItem: {
        color: 'white',
        padding: 10,
        fontSize: 16
    }
});

Please show me what was wrong... Thanks so much!

MarioGogogo commented 6 years ago

I have the same problem, please tell me the answer http://o8lhvvxj2.bkt.clouddn.com/540F0DA1-7A3D-47CF-B57F-7DB9A3828208.png

hamedmam commented 6 years ago

same here, cards wont go back to first position (some margin left on right), and the more you swipe them to left the more margin appears

kunalqss commented 6 years ago

Possible duplicate of #267

manoj2166 commented 6 years ago

I have the same issue in iPhone

kenanlalic commented 6 years ago

try instead of

<Swipeout {...swipeSetting}>
                <View style={{}}>
                   ...
                </View>
</Swipeout> 
<Swipeout {...swipeSetting}>
                <TouchableWithoutFeedback style={{}}>
                   ...
                </TouchableWithoutFeedback>
</Swipeout> 
liuqing520it commented 6 years ago

update react-native v0.56.0-rc or returning to 0.54.4 fixes the problem.

SCJMENGMENG commented 6 years ago

npm install --save react-native@0.51

markrookie commented 6 years ago

Release 2.3.6 fixed this issue

amrit-sahoo commented 6 years ago

It still appears on 2.3.6