App.js

import React, {useEffect, useState} from 'react'
import { View, Text, FlatList, StyleSheet, TextInput, StatusBar} from 'react-native'
import CoinItem from './components/CoinItem';

const App = () => {

const [criptoCoins, setcriptoCoins] = useState([]);
const [buscador, setBuscador] = useState('');
const [carga, setCarga] = useState(false)

const cargarData= async ()=>{
  const res = await fetch(
    'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false'
    );
    const data = await res.json();
    // console.log(data)
    setcriptoCoins(data);
}

useEffect(() => {
     cargarData();
}, [])




  return (
    <View style={styles.container}>
      <StatusBar backgroundColor="#141414"></StatusBar>
      <View style={styles.header}>
        <Text style={styles.title}>Crypto Info</Text>
        <TextInput style={styles.search}  
                  onChangeText={text => setBuscador(text)}
                  placeholder="Buscar Cripto"
                  placeholderTextColor="#858585">
        </TextInput>
      </View>
      <FlatList
          style={styles.list}
          data={
            criptoCoins.filter(criptoCoin => criptoCoin.name.toLowerCase().includes(buscador)
            ||
            criptoCoin.symbol.toLowerCase().includes(buscador))
              }
          renderItem={({item})=>{
          return <CoinItem coin={item} />
          }}
          showsVerticalScrollIndicator={false}
          refreshing={carga}
          onRefresh={async ()=>{
            setCarga(true)
            await cargarData();
            setCarga(false)
          }}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
      backgroundColor: '#141414',
      alignItems: 'center',
      flex: 1
  },
title: {
  color: '#fff',
  marginTop: 10,
  // fontFamily: 'roboto',
  fontSize: 20,
},
list: {
  width: '90%'
},
header: {
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'flex-end',
  width: '90%',
  marginBottom: 10,
  height: 50,
},
search: {
  color: '#fff',
  borderBottomColor: '#4657CE',
  borderBottomWidth: 1,
  width: '40%',
  textAlign: 'center',

}
})

export default App