Añadiendo StyleSheet a la lista

Clase 11 de 17 • Curso de React Native: Manejo de Listas y Consumo de APIs

Luis Alejandro Nieto Ruth

student•

Para darle valores diferente dependiendo del sistema operativo donde se ejecute

import { Platform } from 'react-native';

Lo usamos en los estilos de la siguiente manera

marginBottom: Platform.OS === "android" ? 80 : 60,

Luis Fernando Pedroza Taborda

student•

Gracias por el aporte.

Lucas Ojeda de Sousa

student•

Para arreglar el problema de que la app se "mete" debajo de la barra de notificaciones de Android, pueden usar el siguiente componente que se llama igual que el que se usa en IOS pero viene de una distinto paquete:

import { SafeAreaView } from 'react-native-safe-area-context'

Luis Fernando Pedroza Taborda

student•

Buen dato, gracias.

Curso 2Innovateit

student•

  <SafeAreaView>
      <PokemonList
        pokemons={pokemons}
        loadPokemons={loadPokemons}
        isNext={nextPokemonsUrl}
      />
    </SafeAreaView>

En la PokedexScreen podría utilizarlo de esta manera en android

Anderson Mendoza

student•

Una forma que encontre en internet y me parece mas dinamica es establecer el paddingTop de acuerdo al alto del StatusBar pues este puede cambiar dependiendo del dispositivo que se use.

import { StyleSheet, Platform, StatusBar } from "react-native";

export default StyleSheet.create({
    droidSafeArea: {
        flex: 1,
        paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    },
});

IVAN FONSECA

student•

de los mejores cursos que he realizado, Muchas gracias Agustín Navarro

Añadiendo StyleSheet a la lista

Inicializando la app

Creación del proyecto: PokeDex

Configuración de React Navigation

Diseñando la Tab navigation con iconos

Stack de navegación para Pokedex

API y listado de Pokemon

Consumo de APIs con fetch: PokeApi

Información de todos los Pokemon

Lista de Pokemon con FlatList

Renderizando la PokemonCard

Clasificación por colores y utilidades de Lodash

Infinite scrolling con FlatList

Añadiendo StyleSheet a la lista

Detalles del Pokemon

Vista y navegación al detalle del Pokemon

Consultando la API de detalles del Pokemon

Maquetación del Pokemon: header

Maquetación del Pokemon: sección de tipos

Maquetación del Pokemon: estadísticas

Maquetación del Pokemon: barra de navegación