create a remove item function to delete the city from the list of cities

package.json

@@ -16,6 +16,7 @@
     "date-fns": "^2.16.1",
     "expo": "^39.0.3",
     "expo-linear-gradient": "~8.3.0",
+    "expo-localization": "~9.0.0",
     "expo-status-bar": "~1.0.2",
     "react": "16.13.1",
     "react-dom": "16.13.1",

src/screens/Locations/index.js

@@ -5,14 +5,13 @@ import {
   View,
   TouchableOpacity,
   ScrollView,
-  Alert,
-  Animated,
-  LayoutAnimation
+  Alert
 } 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 { Localization } from 'expo';
 
 import OpenWeather, { getOneCall } from '../../services/apis/openWeather';
 
@@ -28,7 +27,7 @@ const Locations = ({ navigation }) => {
     setLoading(true);
 
     const cities = JSON.parse(await AsyncStorage.getItem("locationData")) || [];
-
+    
     const locations = [];
 
     for (let city of cities) {
@@ -47,11 +46,20 @@ const Locations = ({ navigation }) => {
     }
 
     setLocations(locations);
+    console.log(locations)
     setLoading(false)
   };
 
+  const removeItem = async (item) => {
+    const cities = JSON.parse(await AsyncStorage.getItem("locationData"));
 
-
+    const city = item.toLowerCase();
+
+    const newCities = cities.filter(city => city.toLowerCase() !== item.toLowerCase());
+
+    const locations = [...newCities];
+    AsyncStorage.setItem("locationData", JSON.stringify(locations));
+  }
 
   const renderLocation = location => {
     return (
@@ -63,7 +71,14 @@ const Locations = ({ navigation }) => {
             <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>
+          <Text style={styles.temperature}>
+            {parseInt(location.data.main.temp)}°
+            <TouchableOpacity
+            onPress={() => removeItem(location.data.name)}
+            >
+              <Feather name="trash-2" style={styles.trash} />
+            </TouchableOpacity>
+          </Text>
         </View>
       </TouchableOpacity>
   );
@@ -149,6 +164,11 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     marginTop: 20,
   },
+  trash: {
+    fontSize: 18,
+    color: '#fefefe',
+    marginLeft: 5,
+  }
 });
 
 export default Locations;

yarn.lock

@@ -2595,6 +2595,13 @@ expo-linking@~1.0.4:
     qs "^6.5.0"
     url-parse "^1.4.4"
 
+expo-localization@~9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/expo-localization/-/expo-localization-9.0.0.tgz#1a61582f9ffb3cd28879a917dec347c444bff54e"
+  integrity sha512-jG84LA9yyQpLcSOKvR/WoIm0IHZ4tZQma//AJ9/DgBZC5zSB/aDbcjmCStQvqCePz8EMy1CKxRd+UlKYPLEiVw==
+  dependencies:
+    rtl-detect "^1.0.2"
+
 expo-location@~9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/expo-location/-/expo-location-9.0.0.tgz#43906dbd503803f6029a814df51f0370c3b4a765"
@@ -4938,6 +4945,11 @@ rsvp@^4.8.4:
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
   integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
 
+rtl-detect@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/rtl-detect/-/rtl-detect-1.0.2.tgz#8eca316f5c6563d54df4e406171dd7819adda67f"
+  integrity sha512-5X1422hvphzg2a/bo4tIDbjFjbJUOaPZwqE6dnyyxqwFqfR+tBcvfqapJr0o0VygATVCGKiODEewhZtKF+90AA==
+
 run-async@^2.2.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"