React Native Lists

empty-pokemons-component.tsx

import React from 'react'

function Pokemons() {
  
}

export default Pokemons

pokemons-component-flat-list.tsx

import React from 'react'
import {
  View,
  Text,
  Image,
  FlatList
} from 'react-native'
import usePokemons from './use-pokemons'

function Pokemons() {
  const pokemons = usePokemons()
  
  return (
    <FlatList
      data={pokemons}
      renderItem={({ item }) => (
        <View>
          <Text>{item.name}</Text>
          <Image source={{ uri: image }} style={{ height: 50, width: 50 }} />
        </View>
      )}
      keyExtractor={(item) => item.name}
    />
  )
}

export default Pokemons

pokemons-component-render-pokemon-comp.tsx

import React from 'react'
import {
  View,
  Text,
  Image,
  FlatList
} from 'react-native'
import usePokemons from './use-pokemons'

const Pokemon: React.FC<Partial<IPokemon>> = ({
  name,
  image,
}: Partial<IPokemon>) => {
  return (
    <View style={pokemonStyles.container}>
      <Text style={pokemonStyles.name}>{name}</Text>
      <Image source={{ uri: image }} style={pokemonStyles.image} />
    </View>
  )
}

export default function Pokemons() {
  const pokemons = usePokemons()

  const renderPokemon = ({ item }: { item: IPokemon }) => {
    return <Pokemon name={item.name} image={item.image} />
  }

  return (
    <FlatList
      style={styles.list}
      data={pokemons}
      renderItem={renderPokemon}
      keyExtractor={(item) => item.name}
    />
  )
}

export default Pokemon

pokemons-component-render-pokemon-func.tsx

import React from 'react'
import {
  View,
  Text,
  Image,
  FlatList
} from 'react-native'
import usePokemons from './use-pokemons'

function Pokemons() {
  const pokemons = usePokemons()

  const renderPokemon = ({ item }: { item: IPokemon }) => {
    return (
      <View>
        <Text>{item.name}</Text>
        <Image source={{ uri: item.image }} style={{ height: 50, width: 50 }} />
      </View>
    ) 
  }

  return (
    <FlatList
      style={styles.list}
      data={pokemons}
      renderItem={renderPokemon}
      keyExtractor={(item) => item.name}
    />
  )
}


export default Pokemons

pokemons-component-use-pokemons.tsx

import React from 'react'
import usePokemons from './use-pokemons'

function Pokemons() {
  const pokemons = usePokemons()  
}

export default Pokemons