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