React Native / swipealbe

1. Install

npm install @react-navigation/native

expo install react-native-gesture-handler react-native-reanimated
# expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

사용방법은 총 2가지

2-1. 사용방법 첫번째

home.js

import Swipeable from 'react-native-gesture-handler/Swipeable';

import React, {useState} from 'react';
import { View, Text, Button,  FlatList, TouchableOpacity} from 'react-native';
import { globalStyles } from '../styles/global'
import { RectButton } from 'react-native-gesture-handler' ;
import Swipeable from 'react-native-gesture-handler/Swipeable';

export default function Home({navigation}) {


    const [reviews, setReviews] = useState([
        {title:'book a', rating:5, body: 'first book', key:1},
        {title:'book b', rating:4, body: 'second book', key:2},
        {title:'book c', rating:3, body: 'third book', key:3},

    ])

    const LeftSwipeActions = () => {
        return (
            <View
            style={{ flex: 1, backgroundColor: '#ccffbd', justifyContent: 'center' }}
            >
            <Text
                style={{
                color: '#40394a',
                paddingHorizontal: 10,
                fontWeight: '600',
                paddingHorizontal: 30,
                paddingVertical: 20,
                }}>
                Bookmark
            </Text>
            </View>
        );
    };
    const rightSwipeActions = () => {
        return (
            <View
            style={{
                backgroundColor: '#ff8303',
                justifyContent: 'center',
                alignItems: 'flex-end',
            }}>
            <Text
                style={{
                color: '#1b1a17',
                paddingHorizontal: 10,
                fontWeight: '600',
                paddingHorizontal: 30,
                paddingVertical: 20,
                }}
            >
                Delete
            </Text>
            </View>
            
            
        );
    };

    const swipeFromLeftOpen = () => {
        alert('Swipe from left');
        };
    const swipeFromRightOpen = () => {
        alert('Swipe from right');
    };

    const pressHandler = () => {
        // 페이지 이동. navigate = push
        // 변수는 routes 파일 screens 내 키값을 사용한다
        navigation.navigate('ReviewDetail');
        // navigation.push('ReviewDetail');
    }

    return(
        <View style={globalStyles.container}>
            <FlatList
				keyExtractor={(item)=>item.key.toString()}
                data = {reviews}
                renderItem = {({item})=>(
                    <Swipeable
                    renderLeftActions={LeftSwipeActions} // 왼-> 오
                    renderRightActions={rightSwipeActions} // 오->왼
                    onSwipeableRightOpen={swipeFromRightOpen}
                    onSwipeableLeftOpen={swipeFromLeftOpen}
                    >
                        <TouchableOpacity onPress={()=>navigation.navigate('ReviewDetail', item)}>
                            <Text style={globalStyles.titleText}>{item.title}</Text>
                        </TouchableOpacity>
                    </Swipeable>

                )}
            />
        </View>
    )
}

2.-2 사용방법 두번째

import React, {useState} from 'react';
import { StyleSheet, View, Text, Button,  FlatList, TouchableOpacity, I18nManager, Animated} from 'react-native';
import { globalStyles } from '../styles/global'
import { RectButton, Swipeable } from 'react-native-gesture-handler' ; 



export default function Home({navigation}) {


    const [reviews, setReviews] = useState([
        {title:'book a', rating:5, body: 'first book', key:1},
        {title:'book b', rating:4, body: 'second book', key:2},
        {title:'book c', rating:3, body: 'third book', key:3},

    ])

    renderRightAction = (text, color, x, progress) => {
        const trans = progress.interpolate({
          inputRange: [0, 1],
          outputRange: [x, 0],
        });
        const pressHandler = () => {
          this.close();
          alert(text);
        };
        return (
          <Animated.View style={{ flex: 1, transform: [{ translateX: 0 }] }}>
            <RectButton
              style={[styles.rightAction, { backgroundColor: color }]}
              onPress={pressHandler}>
              <Text style={styles.actionText}>{text}</Text>
            </RectButton>
          </Animated.View>
        );
    };

    renderRightActions = progress => (
        <View style={{ width: 192, flexDirection: I18nManager.isRTL? 'row-reverse' : 'row' }}>
          {this.renderRightAction('More', '#C8C7CD', 192, progress)}
          {this.renderRightAction('Flag', '#ffab00', 128, progress)}
          {this.renderRightAction('More', '#dd2c00', 64, progress)}
        </View>
      );


      return (
        <View style={globalStyles.container}>
            <FlatList 
                keyExtractor={(item)=>item.key.toString()} 
                data = {reviews}
                renderItem = {({item})=>(
                    <Swipeable
                    renderRightActions={this.renderRightActions}
                    friction={2}
                    rightThreshold={40}
                    renderRightActions={this.renderRightActions}>
                        <TouchableOpacity onPress={()=>navigation.navigate('ReviewDetail', item)}>
                            <Text style={globalStyles.titleText}>{item.title}</Text>
                        </TouchableOpacity>
                    </Swipeable>
                )}
            />
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        flex: 1,
    },
    item: {
        margin: 5
    },
    rightAction: {
        alignItems: 'center',
        flex: 1,
        justifyContent: 'center',
      },
});