[Header] elevation or zIndex don't work

In Footer component this works.

Expected behaviour

Actual behaviour

Steps to reproduce

Try with this code:

render() {
    return (
      <Container>
        <Container>
          <Header style={{ elevation: 1, zIndex: 0 }}>
            <Title>
              {'Header'}
            </Title>
          </Header>
          <Content
            style={{ elevation: 0, zIndex: 0 }}
            refreshControl={<RefreshControl refreshing={false} />}
          />
        </Container>
        <Container>
          <Footer style={{ elevation: 1, zIndex: 0 }}>
            <Title>
              {'Footer'}
            </Title>
          </Footer>
          <Content
            style={{ elevation: 0, zIndex: 0 }}
            refreshControl={<RefreshControl refreshing={false} />}
          />
        </Container>
      </Container>
    );
  }

Environment

native-base 2.8.0 react-native 0.57.0 react 16.5.0

[FrK492]

I’m having the same issue with RN 0.58.3 and Native-Base 2.11.0

Does anyone know how to solve the issue?

@SupriyaKalghatgi

[the-habu]

Same issue here, any news on how to fix this?

We are using a simple layout (caution, pseudo code) and still the refreshControl renders on top of the header:

<Container>
    <Header/>
    <Content refreshControl={} />
    <Footer />
</Container>

Using RN 0.58.4 and native-base 2.12.1. It’s no showstopper, but I want to get this right. Is there a working example in the kitchensink maybe (couldn’t find one)?