React-native header title image is cut off, why?

Question

So I'm working on a react-native application and I am using react-navigation for my navigation, using an image in the headerTitle in the screen options works however the image is cut off. I've tried messing with the height/width of the image, wondered if it was a padding issue with the header yet still nothing. Any ideas why?

Here is the component

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

Here is the stack navigator

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;

Image of Logo on the header (cut off)

BlueFits BlueFits · Accepted Answer · 2020-04-12T19:45:55

5

votes

Just wrapped the component in a function, and it rendered properly.

React-native header title image is cut off, why?

2 Answers