React Native - Swipe to hide and show new content

Question

I am creating list of items on react native app. I want to make swipe to left and right every item of this list. So when I swipe to left I want to hide Views that was rendered and show new elements. Also when I swipe to right I want to display other elements that will be different from that element that will be rendered when I swipe left. I found this library called "react-native-swipe-gestures" but I can't figure out how to display and hide elements with it. I declared some items but when I try to display it i got an error that "can't find variable 'item'" maybe you will have some explain to me how I should use it to actually get working swipe left and right.

import React, {Component} from 'react';
import {
    ScrollView,
    Text,
    View,
    Image,
    Button
} from 'react-native';
import GestureRecognizer, {swipeDirections} from 'react-native-swipe-gestures';
import {List, ListItem} from "react-native-elements";

class Offers extends Component {

    constructor(props) {
        super(props);
        this.state = {
            myText: '',
            gestureName: 'none',
            icons: '',
            guardian: '',
            area: '',
            rooms: '',
            floor: '',
            market: '',
            year: '',
            pricePerMeter: '',
        };
    }


    onSwipeRight(gestureState) {
        this.setState({myText: 'You swiped right!'});
    }

    onSwipe(gestureName, gestureState) {
        const {SWIPE_LEFT, SWIPE_RIGHT} = swipeDirections;
        this.setState({gestureName: gestureName});
        switch (gestureName) {
            case SWIPE_LEFT:
                this.setState({backgroundColor: 'blue'});
                break;
            case SWIPE_RIGHT:
                this.setState({backgroundColor: 'yellow'});
                break;
        }
    }

    onSwipeLeft(gestureState) {
        this.setState({
            guardian: item.offerGuardian, //items from const offers
            area: item.offerArea,
            floor: item.offerFloor,
            rooms: item.offerRooms,
            market: item.offerMarket,
            year: item.offerYear,
            pricePerMeter: item.offerPricePerMeter,
        })
    }

    render() {

        const config = {
            velocityThreshold: 0.3,
            directionalOffsetThreshold: 80
        };


        const offers = [
            {
                offerNumber: 'TEST912697',
                offerLocation: 'Warszawa Białołęka',
                offerStreet: 'ul. Bruszewska',
                offerType: 'Mieszkanie',
                offerStatus: 'Akt. Wewnętrzna',
                offerStatusColor: '#0FBEB2',
                offerAddDate: '2017-09-20 12:08:06',
                offerPrice: '2 450 000',
                photo: 'https://static.pexels.com/photos/164516/pexels-photo-164516.jpeg',
                offerGuardian: 'Adam Borek',
                offerTransactionType: 'sprzedaż',
                offerArea: '50 m2',
                offerRooms: '2 pokoje',
                offerFloor: '1 z 2',
                offerYear: '2005 rok',
                offerMarket: 'rynek pierwotny',
                offerPricePerMeter: '5000 zł/m2'
            },
        ];

        return (
            <ScrollView>
                <View style={{
                    flexDirection: 'row',
                    justifyContent: 'flex-end',
                    alignItems: 'flex-end'
                }}>
                    <View style={{marginRight: 20, marginTop: 10}}>
                        <Button title="akcje"/>
                    </View>
                </View>
                {offers.map((item, i) => (
                    <View key={i}>
                        <List>
                            <GestureRecognizer
                                onSwipe={(direction, state) => this.onSwipe(direction, state)}
                                onSwipeLeft={(state) => this.onSwipeLeft(state)}
                                onSwipeRight={(state) => this.onSwipeRight(state)}
                                config={config}
                                style={{
                                    flex: 1,
                                    backgroundColor: this.state.backgroundColor
                                }}
                            >
                                <ListItem
                                    roundAvatar
                                    subtitle={
                                        <View style={{flexDirection: 'row'}}>
                                            <View>
                                                <Text>{this.state.myText}</Text>
                                                <Text>{this.state.guardian}</Text>
                                                <Text>{this.state.area}</Text>
                                                <Text>{this.state.floor}</Text>
                                                <Text>{this.state.market}</Text>
                                                <Text>{this.state.year}</Text>
                                                <Text>{this.state.pricePerMeter}</Text>

                                                <Image source={require('../../gfx/lel.jpg')}
                                                       style={{
                                                           height: 100,
                                                           width: 150
                                                       }}/>
                                            </View>
                                            <View style={{
                                                marginLeft: 5,
                                                flexDirection: 'row',
                                                flexWrap: 'wrap'
                                            }}>
                                                <View style={{width: 140}}>
                                                    <Text>
                                                        {item.offerLocation}
                                                        {"\n"}
                                                        {item.offerStreet}
                                                        {"\n"}
                                                        {item.offerType} na {item.offerTransactionType}
                                                        {"\n"}
                                                        {item.offerNumber}
                                                    </Text>
                                                </View>
                                                <View>
                                                    <View style={{
                                                        justifyContent: 'flex-end',
                                                        width: 95,
                                                        height: 30,
                                                        backgroundColor: item.offerStatusColor
                                                    }}>
                                                        <Text style={{color: '#fff', textAlign: 'center'}}>
                                                            {item.offerStatus}
                                                        </Text>
                                                    </View>
                                                    <View style={{
                                                        flexDirection: 'column',
                                                        alignItems: 'flex-end',
                                                        flexWrap: 'wrap'
                                                    }}>
                                                        <Text style={{fontSize: 20}}>
                                                            {"\n"}
                                                            {"\n"}
                                                            {item.offerPrice}
                                                        </Text>
                                                    </View>
                                                </View>
                                            </View>
                                        </View>
                                    }
                                    onPress={() => this.props.navigation.navigate('OffersDetails')}
                                />
                            </GestureRecognizer>
                        </List>
                    </View>
                ))}
            </ScrollView>
        )
    }

}

export default Offers;

Answer 1

I would recommend trying out this libray react-native-swipe-list-view. It is well documented and easy to use for any type of swipable row. https://github.com/jemise111/react-native-swipe-list-view

The basic concept is that you have one element in front of a hidden element. When you swipe it just reveals the hidden element below.