in Appbar.content has empty space above

Question

I am using the following code to create a header with react-native-paper and react-navigation:

return (
        <Appbar.Header theme={{ colors: { primary: "white" } }}>

            {previous ? (
                <Appbar.BackAction onPress={navigation.pop} color={theme.colors.primary} />
            ) : (
                <TouchableOpacity onPress={()=>{navigation.openDrawer();}}>
                    <Avatar.Image
                        size={40}
                        source={{uri: "https://i.imgur.com/2tTU7q1.jpg"}}
                    />
                </TouchableOpacity>
            )}
            <Appbar.Content
                title={
                   <Image source={require("../../assets/images/icon.png")}
                            style={{
                                width: 40,
                                height: 40,
                            }}
                    />
                   }
                titleStyle={{backgroundColor: "red",}}
                style={{alignItems: "center"}}
            />
        </Appbar.Header>
    );

The result is that I systematically get an empty space above the Image (put the background red to make it more obvious):

The space doesn't exist in the .jpg and actually appears with any picture. This space doesn't appear if I use a MaterialCommunityIcons (from @expo/vector-icons) instead of the image.

Any idea what causes this and how to remove it?

I don't think that's possible because it cannot render the content when it's image. Incase you solve the problem do post the answer. — Saswata, Jun 09 '20 at 19:41
@phaniindra unfortunately, I just gave up on using that component — Ryan Pergent, Aug 15 '20 at 13:54
Okay @RyanPergent can you suggest any other component that worked for you — phani indra, Aug 21 '20 at 15:23
@phaniindra I reverted to the default header component of react-navigation. I am not trying to display an image instead of the header title anymore. However, I believe that would be doable. — Ryan Pergent, Aug 22 '20 at 09:57

in Appbar.content has empty space above

0 Answers0