React-родной заголовок изображения обрезан, почему?

Question

Итак, я работаю над собственным приложением реакции и использую навигацию для своей навигации, используя изображение в headerTitle в настройках экрана, но изображение обрезано. Я попытался поэкспериментировать с высотой / шириной изображения, задаваясь вопросом, было ли это проблемой заполнения с заголовком, но все еще ничего. Есть идеи почему?

Вот этот компонент

import React from "react";
import { View, Image, StyleSheet } from "react-native";

function HeaderLogo(props) {
    return(
        <Image style={styles.logoStyles} source={require("../../assets/images/svg/LogoNoTxt.png")}/>
    );
};

const styles = StyleSheet.create({
    logoStyles: {
        height: 40,
        width: 40,
    },
});

export default HeaderLogo

Вот стековый навигатор

import React from "react";
import { createStackNavigator } from '@react-navigation/stack';

//Components
import HeaderLogo from "../../components/images/HeaderLogo";

//TopTab
import HomeTopTabNavigator from "../topTab/HomeTopTabNavigator";

//Screens
import AddTasks from "../../screens/home/AddTasks";

//Initialize vars
const Stack = createStackNavigator();

function HomeStackNavigator() {
    return(
        <Stack.Navigator screenOptions={defaultOptions}>
            <Stack.Screen name="Home" component={HomeTopTabNavigator}/>
            <Stack.Screen name="AddTasks" component={AddTasks}/>
        </Stack.Navigator>
    );
};

//Options
const defaultOptions = {
    headerStyle: {
        elevation: 0,
        shadowColor: "transparent",
    },
    //headerTitleAlign: "center",
    headerTitle: (
        <HeaderLogo />
    ),
    headerTitleAlign: "center",
};

export default HomeStackNavigator;

Изображение Lo go на заголовке (обрезано)

Answer 1

Только что завернул компонент в функцию, и он правильно отрисовался.