headerContentComponent props with custom design change the shape of the header

[prox2]

I have tried to use props

headerContentComponent | component | chech the code | set your own design for the header content as follow:

<GradientHeader
        gradientColors={["#00416A", "#E4E5E6"]}
        headerContentComponent={
          <View>
            <TouchableOpacity
              style={{
                width: 50,
                paddingRight: SIZES.padding * 2,
                justifyContent: 'center'
              }}
            >
              <Image
                source={icons.heart}
                resizeMode="contain"
                style={{
                  width: 30,
                  height: 30
                }}
              />
            </TouchableOpacity>
          </View>
        }
      />

but it result in unresponsive shape of header with weird design. i am not sure if it is the correct way i used this prop or not because there is no documentation regarding how to use this prop. please help

[WrathChaos]

Hello @prox2 You should not change the shape, if you need another design actually you should create it yourself.

[prox2]

yes and this what I did I created just a view and designed it in my way but the shaped changed itself i didn't change it

[WrathChaos]

@prox2 can you share with me the example? I could not understand without look at it I guess

[prox2]

<GradientHeader
        gradientColors={["#00416A", "#E4E5E6"]}
        headerContentComponent={
          <View>
            <TouchableOpacity
              style={{
                width: 50,
                paddingRight: SIZES.padding * 2,
                justifyContent: 'center'
              }}
            >
              <Image
                source={icons.heart}
                resizeMode="contain"
                style={{
                  width: 30,
                  height: 30
                }}
              />
            </TouchableOpacity>
          </View>
        }
      />

this my example

[WrathChaos]

I don't know what the SIZES is or what imports you do or any other things to affect the issue. Can you share the whole js file?

[prox2]

to share all js file is to long actually and will be confusing so I will make the example simple, I have function called renderHeader and it is returning the <GradientHeader/>

so here is the function renderHeader:

function renderHeader() {
    return (
      <GradientHeader
        gradientColors={["#00416A", "#E4E5E6"]}
        headerContentComponent={
          <View style={{ width: windowWidth, flexDirection: 'row', justifyContent: 'space-between' }}>
            <Text>Header title</Text>
            <TouchableOpacity
              style={{
                width: 50,

                justifyContent: 'center'
              }}
            >
              <Image
                source={{ uri: 'https://www.rawshorts.com/freeicons/wp-content/uploads/2017/01/black_webpict35_1484337166-1.png' }}
                resizeMode="contain"
                style={{
                  width: 30,
                  height: 30
                }}
              />
            </TouchableOpacity>
          </View>
        }
      />

    )
  }

so, I found out something while doing this example in the start before adding this style "style={{ width: windowWidth, flexDirection: 'row', justifyContent: 'space-between' }} " for the view that is wrapping the content component of custom header the problem remine as the the bottom of the header curve is not displayed as how is suppose to be, but when I set the width to full screen width it worked so I'm not sure if that is a bug now or not or you may need to mentioned in the documentation that when using the headerContentComponent must set to full screen width.