No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de React Native CLI

Curso de React Native CLI

Alejandro Sanabria

Alejandro Sanabria

Buscador con TextInput

14/22
Recursos

Aportes 12

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Estilos TextInput

const styles = StyleSheet.create({
  textInput: {
    height: 46,
    backgroundColor: "rgba(0, 0, 0, 0.2)",
    paddingLeft: 16,
    color: "#fff"
  },
  textInputAndroid: {
    borderBottomWidth: 2,
    borderBottomColor: Colors.zircon
  },
  textInputIOS: {
    margin: 8,
    borderRadius: 8
  }
});

Les comparto como lo resolv铆 con hooks

CoinScreen.js

const CoinScreen = ({ navigation }) => {
  const [coins, setCoins] = useState([]);
  const [loading, setLoading] = useState(false);
  const [filteredCoins, setFilteredCoins] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      const res = await useFetchData('https://api.coinlore.net/api/tickers/');
      setCoins(res.data);
      setFilteredCoins(res.data);
      setLoading(false);
    };

    fetchData();
  }, []);

  const handlePress = (coin) => {
    navigation.navigate('Coin Detail', { coin });
  };

  const onChange = (query) => {
    const filter = coins.filter(
      (coin) => (coin.name.toLowerCase().includes(query.toLowerCase())
        || coin.symbol.toLowerCase().includes(query.toLowerCase())),
    );

    setFilteredCoins(filter);
  };

  return (
    <View style={styles.container}>
      <CoinSearch onChange={onChange} />
      {loading && <Loading />}
      <FlatList
        data={filteredCoins}
        renderItem={({ item }) => (
          <CoinItem coin={item} onPress={() => handlePress(item)} />
        )}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
};

CoinSearch.js

const CoinSearch = ({ onChange }) => {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (query) => {
    setInputValue(query);
    onChange(query);
  };

  return (
    <TextInput
      style={Styles.textInput}
      onChangeText={handleChange}
      value={inputValue}
      placeholder="Search Coins"
      placeholderTextColor="#fff"
    />
  );
};

de esta menera pueden no tener que guardar en dos valores del estado la lista filtrada y la lista sin flitras haciendo una computacion cada que se ejecute el render method o si usas hook al hacer el return de tu funcion

  //Computed
  const coinsData = coins.filter(
    (ff) =>
      ff.name.toLowerCase().include(query.toLowerCase()) ||
      ff.symbol.toLowerCase().include(query.toLowerCase()),
  );
return (
...

      <FlatList
        keyExtractor={(item) => item.id}
        data={coinsData}
        renderItem={({item}) => (
          <CoinsItem item={item} onPress={() => handlePress(item)} />
        )}
        showsVerticalScrollIndicator={false}
        refreshing={refreshing}
        onRefresh={onRefresh}
      />
    </View>
...
)

Comparto mi c贸digo de CoinSearch 馃槂

import  React, {Component } from 'react';
import {View, TextInput, Platform, StyleSheet} from 'react-native'
import Colors from '../../res/color'

class CoinSearch extends Component {

    state = {
        query: ''
    }

    handleText = (query) => {
        this.setState({query})

        if(this.props.onChange){
            this.props.onChange(query)
        }
    }

    render(){
        const query = this.state
        return(
            <View>
                <TextInput
                    style={[
                        styles.textInput,
                        Platform.OS == 'ios' ?
                        styles.textInputiOS :
                        styles.textInputAndroid
                    ]}
                    onChangeText={this.handleText}
                    value={query}
                    placeholder="Buscar critpomoneda"
                    placeholderTextColor="#fff"
                />
            </View>
           
        )
    }
}
export default CoinSearch

const styles = StyleSheet.create({
    textInput:{
        height:46,
        backgroundColor:Colors.charade,
        paddingLeft:16,
        color:"#fff"
    },
    textInputAndroid:{
        borderBottomWidth:2,
        borderBottomColor:Colors.zircon,
    },
    textInputiOS:{
        margin:8,
        borderRadius:8
    }
    
  });

Si se encuentran con este error: VirtualizedList: You have a large list that is slow to update鈥

Este indica que nuestro lista se est谩 renderizado cada que hacemos scroll, por qu茅? porque cada que lo hacemos, est谩 cambiando el estado del componente.

Por lo tanto, para resolverlo podemos hacer uso del hook useRef, que lo que hace es mantener la persistencia de nuestro estado durante todo el ciclo de vida del componente.

import React, {useRef} from 'react';

function CoinsPage({navigation}) {
	...
	let flatListRef = useRef(null);
	
	.
	.
	.

return (
    ...
      {requestStatus?.success && (
        <FlatList
          ref={(ref) => (flatListRef = ref)}
          data={coins}
          renderItem={({item}) => (
            <ItemCoins item={item} onPress={() => handlePress(item)} />
          )}
        />
      )}
	...
  );
}

Enlace a la documentaci贸n del useRef

Muy cool lo de poder asignar estilos dependiendo del SO

Este buscador tiene un problemita
Resulta que al tener el handleText dentro del componente del buscador y el handleSearch en el componente padre llega con retraso el input.
Creo que es porque el componente interno se actualiza cuando se cambia el texto, pero el externo no, entonces cuando se usa el handleChange tiene la informaci贸n anterior y no la actual.
Para corregir esto lo que hice fue sacar el handleText hacia el componente padre y as铆 actualizar toda la vista con cada cambio en el input.

Hooks 馃ず馃敟

const coinsFiltered = useMemo(() => expensiveComputedValue(), [data, query])

  function expensiveComputedValue () {
    return data?.filter(({ name, symbol }) => {
      return name.toLowerCase().includes(query.toLowerCase()) ||
      symbol.toLowerCase().includes(query.toLowerCase())
    })
  }

tuve un error en el Flatlist de markets

FlatList warning 'Each child in an array or iterator should have a unique 鈥渒ey鈥 props.

solucion

                    <FlatList
                      style={styles.list}
                      horizontal={true}
                      data={markets}
                      keyExtractor={(item, index) => index.toString()}
                      renderItem={({ item }) => <CoinMarketItem item={item} />}
                    />

Que grande este profesor

hola buenos dias estoy intentando entender el capitulo 14 , y nada parece que tengo un problema ( diria q es :
Error: Unable to resolve module ./debugger-ui/debuggerWorker.aca173c4.js from ``:

adjunto contenido de mi metro con la inf de la app

Error: Unable to resolve module ./debugger-ui/debuggerWorker.aca173c4.js from ``:

None of these files exist:

  • debugger-ui/debuggerWorker.aca173c4.js(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
  • debugger-ui/debuggerWorker.aca173c4.js/index(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
    at ModuleResolver.resolveDependency (/Users/franciscodeborjapetitme/App/viajeApp/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:163:15)
    at ResolutionRequest.resolveDependency (/Users/franciscodeborjapetitme/App/viajeApp/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (/Users/franciscodeborjapetitme/App/viajeApp/node_modules/metro/src/node-haste/DependencyGraph.js:287:16)
    at /Users/franciscodeborjapetitme/App/viajeApp/node_modules/metro/src/lib/transformHelpers.js:267:42
    at Server.<anonymous> (/Users/franciscodeborjapetitme/App/viajeApp/node_modules/metro/src/Server.js:841:41)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/franciscodeborjapetitme/App/viajeApp/node_modules/metro/src/Server.js:99:24)
    at _next (/Users/franciscodeborjapetitme/App/viajeApp/node_modules/metro/src/Server.js:119:9)
    [Sat Jan 30 2021 10:41:04.910] BUNDLE ./index.js

[Sat Jan 30 2021 10:41:05.326] MAP ./index.js

buen finde [email protected],
BpM