Cursos Empresas Blog Live Conf Eventos Precios

0:003:38

Añadiendo StyleSheet a la lista

Curso de React Native: Manejo de Listas y Consumo de APIs

Clase 11 / 17

Ver clases

Añadiendo StyleSheet a la lista

Curso de React Native: Manejo de Listas y Consumo de APIs

Clase 11 de 17

Clase 11 / 17

Añadiendo StyleSheet a la lista

Curso de React Native: Manejo de Listas y Consumo de APIs

Clase 11 / 17

Ver clases

Comentarios

Luis Alejandro Nieto Ruth#3075051
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,
```
Lucas Ojeda de Sousa#3219157
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'
```

Anderson Mendoza#4591051

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#3696645
de los mejores cursos que he realizado, Muchas gracias Agustín Navarro

Comentarios

Luis Alejandro Nieto Ruth#3075051

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,

Lucas Ojeda de Sousa#3219157

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'

Anderson Mendoza#4591051

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#3696645

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

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

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

Añadiendo StyleSheet a la lista

Añadiendo StyleSheet a la lista

Añadiendo StyleSheet a la lista

Progreso del curso

Inicializando la app

API y listado de Pokemon

Detalles del Pokemon

Comentarios

Añadiendo StyleSheet a la lista

Añadiendo StyleSheet a la lista

Comentarios