add removeItem function

src/components/swipeable/index.js

@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+import { Animated, StyleSheet, Text, View, I18nManager } from 'react-native';
+
+import { RectButton, Swipeable } from 'react-native-gesture-handler';
+
+export default class AppleStyleSwipeableRow extends Component {
+  renderLeftActions = (progress, dragX) => {
+    const trans = dragX.interpolate({
+      inputRange: [0, 50, 100, 101],
+      outputRange: [-20, 0, 0, 1],
+    });
+    return (
+      <RectButton style={styles.leftAction} onPress={this.close}>
+        <Animated.Text
+          style={[
+            styles.actionText
+          ]}
+          >
+          Archive
+        </Animated.Text>
+      </RectButton>
+    );
+  };
+  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>
+  );
+  updateRef = ref => {
+    this._swipeableRow = ref;
+  };
+  close = () => {
+    this._swipeableRow.close();
+  };
+  render() {
+    const { children } = this.props;
+    return (
+      <Swipeable
+        ref={this.updateRef}
+        friction={2}
+        leftThreshold={30}
+        rightThreshold={40}
+        renderLeftActions={this.renderLeftActions}
+        renderRightActions={this.renderRightActions}>
+        {children}
+      </Swipeable>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  leftAction: {
+    flex: 1,
+    backgroundColor: '#497AFC',
+    justifyContent: 'center',
+  },
+  actionText: {
+    color: 'white',
+    fontSize: 16,
+    backgroundColor: 'transparent',
+    padding: 10,
+  },
+  rightAction: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+  },
+});

src/screens/Locations/index.js

@@ -6,15 +6,13 @@ import {
   TouchableOpacity,
   ScrollView,
   Alert,
-  Animated
+  Animated,
+  LayoutAnimation
 } from 'react-native';
 import AsyncStorage from '@react-native-community/async-storage';
 import { LinearGradient } from 'expo-linear-gradient';
 import { Feather } from '@expo/vector-icons';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import Swipeable from 'react-native-gesture-handler/Swipeable';
-import Icon from 'react-native-vector-icons/FontAwesome';
 
 import OpenWeather, { getOneCall } from '../../services/apis/openWeather';
 
@@ -49,22 +47,28 @@ const Locations = ({ navigation }) => {
     setLoading(false)
   };
 
+  const removeItem = async () => {
+    await AsyncStorage.removeItem("locationData"));
+  }
+
   const renderLocation = location => {
     return (
-      <Swipeable
+      <TouchableOpacity  
       key={location.data.id}
-      >
-        <TouchableOpacity  onPress={() => goToLocation(location)}>
-          <View style={styles.containerRow}>
-            <View style={styles.container}>
-              <Text style={styles.city}>{location.data.name}</Text>
-              <Text style={styles.time}>{location.hour}</Text>
-            </View>
-            <Text style={styles.temperature}>{parseInt(location.data.main.temp)}°</Text>
+      onPress={() => goToLocation(location)}>
+        <View style={styles.containerRow}>
+          <View style={styles.container}>
+            <Text style={styles.city}>{location.data.name}</Text>
+            <Text style={styles.time}>{location.hour}</Text>
           </View>
-        </TouchableOpacity>
-      </Swipeable>
-    );
+          <Text style={styles.temperature}>{parseInt(location.data.main.temp)}°</Text>
+          <TouchableOpacity
+          onPress={removeItem}>
+            <Feather name="trash-o" style={styles.icon} />
+          </TouchableOpacity>
+        </View>
+      </TouchableOpacity>
+  );
   };
 
   const goToLocation = (data) => {