Para hacer transparente el header y ocultar la sombra usar el siguiente código, enero del 2022
<Stack.Screen
name='Pokemon'
component={ Pokemon }
options={ {
title: "",
headerShown: true,
headerTransparent: true,
headerShadowVisible: false
} }
/>
Archivo header.js
import React from 'react'
import { View, Text, StyleSheet, SafeAreaView, Image } from 'react-native';
import { capitalize } from 'lodash';
import getColorByPokemonType from '../../utils/getColorByPokemonType'
export default function Header(props) {
const { name, order, image, type } = props;
const color = getColorByPokemonType(type);
const bgStyles = [{ backgroundColor: color, ...styles.bg }]
return (
<>
<View style={bgStyles} />
<SafeAreaView style={styles.content}>
<View style={styles.header}>
<Text style={styles.name}>{capitalize(name)}</Text>
<Text style={styles.order}>#{`${order}`.padStart(3, 0)}</Text>
</View>
<View style={styles.contentImg}>
<Image source={{ uri: image }} style={styles.image} />
</View>
</SafeAreaView>
</>
)
}
const styles = StyleSheet.create({
bg: {
width: '100%',
height: 400,
position: 'absolute',
borderBottomEndRadius: 300,
borderBottomLeftRadius: 300,
transform: [{ scaleX: 2 }],
},
content: {
marginHorizontal: 20,
marginTop: 30
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingTop: 40
},
name: {
color: 'white',
fontWeight: 'bold',
fontSize: 26,
},
order: {
color: 'white',
fontWeight: 'bold',
},
contentImg: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
top: 30,
},
image: {
width: 250,
height: 300,
resizeMode: "contain",
},
})
el componente Header 🚀
<Header
name={pokemon.name}
order={pokemon.order}
image={pokemon.sprites.other["official-artwork"].front_default}
type={pokemon.types[0].type.name}
/>
Esta quedando Genial!
la imagen se me distorciona cuando la paso de 100px
No se muestra la imagen :\
Les comparto mi repo al 14 de Julio del 2025, agregué Zustand para pasar el estado entre componentes:
no he podido visualizar el detalle de cada pokemon no me funciona me sale esto cada vez que le doy click a un pokemon: The action 'NAVIGATE' with payload {"name":"Pokemon","params":{"id":21}} was not handled by any navigator.
Do you have a screen named 'Pokemon'?
he revisado varias veces y tengo el mismo código, no se si me pueden ayudar
En el minuto 10 he visto che a mi todavia no hay en color del background, he revisado dopo el codico y es igual como escrito, no entiendo donde esta mal, ayuda pls
Patrick Jhonatan Hernandez Blanco
Para hacer transparente el header y ocultar la sombra usar el siguiente código, enero del 2022
<Stack.Screen name='Pokemon' component={ Pokemon } options={ { title: "", headerShown: true, headerTransparent: true, headerShadowVisible: false } } />
Luis Fernando Pedroza Taborda
Funciona bien, gracias.
Luis Alejandro Nieto Ruth
Luis Fernando Pedroza Taborda
Gracias por el resumen.
el componente Header 🚀
<Header name={pokemon.name} order={pokemon.order} image={pokemon.sprites.other["official-artwork"].front_default} type={pokemon.types[0].type.name} />
Kenet Andrés Chungandro Montenegro
Esta quedando Genial!
Edward Larsson Vega Carrillo
la imagen se me distorciona cuando la paso de 100px
Deyvid Antonio Arauz Cruz
No se muestra la imagen :\
Juan Camilo Rivas Molina
Al final de la clase el profe explica que puso por error mal "algo" y por eso no se ve en android, es "uri" en vez de "url" en el componente "Header"
David Rangel
Les comparto mi repo al 14 de Julio del 2025, agregué Zustand para pasar el estado entre componentes:
Juan Carlos Ramirez
no he podido visualizar el detalle de cada pokemon no me funciona me sale esto cada vez que le doy click a un pokemon: The action 'NAVIGATE' with payload {"name":"Pokemon","params":{"id":21}} was not handled by any navigator.
Do you have a screen named 'Pokemon'?
he revisado varias veces y tengo el mismo código, no se si me pueden ayudar
Renzo Spitale
En el minuto 10 he visto che a mi todavia no hay en color del background, he revisado dopo el codico y es igual como escrito, no entiendo donde esta mal, ayuda pls
Archivo header.js
import React from 'react' import { View, Text, StyleSheet, SafeAreaView, Image } from 'react-native'; import { capitalize } from 'lodash'; import getColorByPokemonType from '../../utils/getColorByPokemonType' export default function Header(props) { const { name, order, image, type } = props; const color = getColorByPokemonType(type); const bgStyles = [{ backgroundColor: color, ...styles.bg }] return ( <> <View style={bgStyles} /> <SafeAreaView style={styles.content}> <View style={styles.header}> <Text style={styles.name}>{capitalize(name)}</Text> <Text style={styles.order}>#{`${order}`.padStart(3, 0)}</Text> </View> <View style={styles.contentImg}> <Image source={{ uri: image }} style={styles.image} /> </View> </SafeAreaView> </> ) } const styles = StyleSheet.create({ bg: { width: '100%', height: 400, position: 'absolute', borderBottomEndRadius: 300, borderBottomLeftRadius: 300, transform: [{ scaleX: 2 }], }, content: { marginHorizontal: 20, marginTop: 30 }, header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingTop: 40 }, name: { color: 'white', fontWeight: 'bold', fontSize: 26, }, order: { color: 'white', fontWeight: 'bold', }, contentImg: { flex: 1, justifyContent: 'center', alignItems: 'center', top: 30, }, image: { width: 250, height: 300, resizeMode: "contain", }, })