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 Jan 04 '19 at 07:26 — Rizwan Atta, Jan 04 '19 at 07:26

Rizwan Atta · Accepted Answer · 2019-01-04T07:50:11.517

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 04 '19 at 07:50

answered Jan 04 '19 at 07:17

Rizwan Atta

3,222
2
19
31

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. – fun joker Jan 04 '19 at 07:49
2

the position and zIndex help to put the image behind the header and also the lower header on top index! – Rizwan Atta Jan 04 '19 at 07:51
Can you please help me here: https://stackoverflow.com/questions/54132013/how-to-close-modal-in-react-native – fun joker Jan 10 '19 at 16:25

score 1 · Answer 2 · answered Jan 04 '19 at 07:47

1

Adding headerTransparent: true inside navigationOptions solved the problem.

Code:

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

answered Jan 04 '19 at 07:47

fun joker

1,717
6
31
52

How to add image behind header in react native?

2 Answers2