Maquetación del Pokemon: header

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",
  },
})

Esta quedando Genial!

el componente Header 🚀

<Header
        name={pokemon.name}
        order={pokemon.order}
        image={pokemon.sprites.other["official-artwork"].front_default}
        type={pokemon.types[0].type.name}
/>