React Native Navigation Header Overflow

Question

I'm trying to make a custom header in react-navigation by setting the headerTitle: <CustomHeader /> , but the custom header overflows out the screen. Here is the preview on both iOS and Android

This is my markup:

<View style={styles.container}>
    <View style={styles.textContainer}>
        <Text style={styles.description}>Welcome to</Text>
        <Text style={styles.title}>Testing</Text>
    </View>
    <View>
        <Icon name="basket" color={globalStyles.colors.PRIMARY} size={24} />
    </View>
</View>

And this is my style

container: {
    height: "100%",
    width: "100%",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between"
},
textContainer: {
    height: "100%",
    flexDirection: "column",
    alignItems: "flex-start",
    justifyContent: "center"
},
basketContainer: {
    height: "100%",
    flexDirection: "row",
    alignItems: "flex-start",
    justifyContent: "flex-start"
}

It's actually doing what I intend it to do, it's just that the basket icon goes over the edge of the screen

Answer 1

Try to add flex: 1 to your textContainer style. Try also to specify a width to the view container of your icon.