Lista de favoritos

Para los que estén desarrollando el proyecto con hooks, pueden agregar el evento focus de la siguiente manera.

const FavoritesScreen = ({navigation}) => {
  const [favs, setFavs] = useState([]);

  useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      getFavs();
    });
    return unsubscribe;
  }, [navigation]);

  const getFavs = async () => {
    try {
      const allKeys = await Storage.instance.getAllKeys();
      const keys = allKeys.filter((key) => key.includes('favorite-'));
      const responseFavs = await Storage.instance.getAll(keys);
      const favorites = responseFavs.map((fav) => JSON.parse(fav[1]));
      setFavs(favorites);
    } catch (err) {
      console.log('get favorites err', err);
    }
  };

Tambien se podría hacer de la siguiente manera en el render:

render() {
    const {favorites} = this.state;

    return (
      <View style={styles.container}>
        {favorites.length === 0 ? (
          <FavoritesEmptyState />
        ) : (
          <FlatList
            data={favorites}
            renderItem={({item}) => (
              <CoinsItem item={item} onPress={() => this.handlePress(item)} />
            )}
          />
        )}
      </View>
    );
  }

La verdad me agradó aunque le puse algo más a mi gusto =)

Podemos usar hook para eventos de navegacion

useEffect(() => {
        const unsubscribe = props.navigation.addListener('focus', () => {
            getFavorites()
        });
        return unsubscribe;
    }, [props.navigation]);

el evento listener es un opción, pero si tenemos un estado centralizado como redux al acceder a la pantalla pasaría lo mismo ¿? o el redux soluciona esto ¿?

el if de linea se puede reemplazar con el operador && así evitaría la condición y que luego sea null. Esta disponible en nodeJS >= 12.6

{favorites.length === 0 && <FavoritesEmptyState />}

¿Por qué se usa una instancia de Storage y no se accede directamente con métodos estáticos?

Para el focus se puede utilizar el hook useFocusEffect de React Navigation
https://reactnavigation.org/docs/use-focus-effect/

   const [favorites, setFavorites] = useState([])

    async function handleGetFavorites(){
        const all = await AsyncStorage.getAllKeys()
        const values = await AsyncStorage.multiGet(all)
        const valores = values.map((value)=>JSON.parse(value[1]))
        setFavorites(valores)
    }

    useFocusEffect(
        React.useCallback(() => {
            handleGetFavorites();
        }, [])
    );

Jaja “quedaria como un zombie”, la verdad me paso que no desmonte el evento y en ocaciones se ejecutaba el el evento sin que estuviera la pantalla enfocada. MUCHO CUIDADO CON ESTO¡, espero que en las versiones nuevas agreguen algún mecanismo para evitarlo.

Fri Sep 18 2020 15:18:44.362] LOG stored true
[Fri Sep 18 2020 15:18:49.107] LOG get favorites err [TypeError: _storage.default.instance.getAllkeys is not a function. (In ‘_storage.default.instance.getAllkeys()’, ‘_storage.default.instance.getAllkeys’ is undefined)]

Una guia por favor me sale ese error cuando ingreso a favoritos y no se muestran los favoritos agregados

en el storage.js, en el método getAllkeys no debe ir la variable keys en el arrow function ?

getAllkeys = async (keys) =>

getAllkeys = async (keys) => {
		try {
			return await AsyncStorage.getAllKeys(keys);
		} catch(err) {
			console.log("storage getAllkeys err",err);
			

			throw Error(err);
		}
	}

Me quedó de esta manera añadiendo un TextInput para filtrar

import React, { Component } from 'react'
import { View, StyleSheet, FlatList } from 'react-native'
import FavoritesEmptyState from './FavoritesEmptyState'
import Colors from 'cryptoTracker/src/res/Colors';
import Storage from 'cryptoTracker/src/libs/storage'
import CoinsItem from 'cryptoTracker/src/components/coins/CoinsItem'
import CoinsSearch from 'cryptoTracker/src/components/coins/CoinsSearch'

class FavoritesScreen extends Component {

    state = {
        favorites: [],
        allFavorites: [],
    }

    getFavorites = async () => {
        try {
            const allKeys = await Storage.instance.getAllKeys();
            //filter keys
            const keys = allKeys.filter((key) => key.includes("favorite-"))

            const favs = await Storage.instance.multiGet(keys);

            const favorites = favs.map((fav) => JSON.parse(fav[1]));
            this.setState({ favorites: favorites })
            this.setState({ allFavorites: favorites })
        } catch (error) {
            console.log(error);
        }
    }

    handlePress = (coin) => {
        //Send rediret to coin Details
        this.props.navigation.navigate("Detail", { coin })
    }

    handleSearch = (query) => {
        const { allFavorites } = this.state;
        query = query.toLowerCase();
        const favoritesFiltered = allFavorites.filter((coin) => {
            return coin.name.toLowerCase().includes(query) ||
                coin.symbol.toLowerCase().includes(query)
        })
        this.setState({ favorites: favoritesFiltered })
    }

    componentDidMount() {
        this.getFavorites()

        //reload the screen
        this.props.navigation.addListener("focus", this.getFavorites)
    }

    componentWillMount() {
        // stop to reload the screen
        this.props.navigation.removeListener("focus", this.getFavorites)
    }

    render() {

        const { favorites } = this.state

        return (
            <View style={styles.container}>
                { favorites.length == 0 ?
                    <FavoritesEmptyState />
                    :
                    <View>
                        <CoinsSearch onChange={this.handleSearch} />
                        <FlatList
                            data={favorites}
                            renderItem={({ item }) =>
                                <CoinsItem
                                    item={item}
                                    onPress={() => this.handlePress(item)}
                                />
                            }
                        />
                    </View>

                }
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Colors.charade,

    }
})

export default FavoritesScreen

P. D. El Bitcoin no para de subir.

render() {
    const {favorites} = this.state;
    return (
      <View style={styles.container}>
        {favorites.length ? (
          <FlatList
            data={favorites}
            renderItem={({item}) => <CoinsItem item={item} />}
          />
        ) : (
          <FavoritesEmpy />
        )}
      </View>
    );
  }
}

Si tienen problemas con el Storage, pueden leer esto https://reactnative.dev/docs/asyncstorage.