How to add image behind header in react native?

Question

I want to add image behind the header but how can I do that ? I have made header transparent but now I want to place the image below it (See screenshot 1). I also tried to add position: 'absolute' and top,bottom,left,right for image but it doesn't work why so ?

Code:

screen: ProjectDetailsScreen,
        navigationOptions: ({ navigation }) => ({
            headerStyle: {
                backgroundColor: 'transparent'
            },
            headerTitle: navigation.state.params.title,
        }),

Screenshot 1:

brother please try my solution!

Rizwan Atta
– Rizwan Atta

2019-01-04 07:26:02 +00:00
Commented Jan 4, 2019 at 7:26 — Rizwan Atta
– Rizwan Atta, Commented Jan 4, 2019 at 7:26

Rizwan Atta · Accepted Answer · 2019-01-04 07:50:11Z

6

Try using the mix of zIndex and Position in styles !

like in the manner of this!

1: make the header as

screen: ProjectDetailsScreen,
    navigationOptions: ({ navigation }) => ({
        headerStyle: {
            position:'relative',
            zIndex: 1
        },
      headerTransparent: true
    })
    // this will cause header on the top and make the rest of design in below part
     lowerViewContainerStyle:{
            position:'absolute',
            zIndex: 0
     }

edited Jan 4, 2019 at 7:50

answered Jan 4, 2019 at 7:17

Rizwan Atta

3,3052 gold badges21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

fun joker Over a year ago

If I try to add top, left, right, bottom, position: 'absolute' inside headerStyles it gives warning saying it has no effect on headerStyles so it is not working. So headerTransparent: true works fine.

Rizwan Atta Over a year ago

the position and zIndex help to put the image behind the header and also the lower header on top index!

fun joker Over a year ago

Can you please help me here: stackoverflow.com/questions/54132013/…

fun joker · Accepted Answer · 2019-01-04 07:47:24Z

1

Adding headerTransparent: true inside navigationOptions solved the problem.

Code:

navigationOptions: ({ navigation }) => ({    
      headerTransparent: true
})

answered Jan 4, 2019 at 7:47

fun joker

1,7277 gold badges35 silver badges54 bronze badges

Collectives™ on Stack Overflow

How to add image behind header in react native?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related