Nativebase: [Header] elevation or zIndex don't work

[ahce]

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

[SupriyaKalghatgi]

I cannot reproduce this issue with the above provided code snippet

[SupriyaKalghatgi]

@ahce Any updates?

[ahce]

@SupriyaKalghatgi test this code

[SupriyaKalghatgi]

React Native issue
https://github.com/facebook/react-native/issues/19872

[SupriyaKalghatgi]

This was React Native issue, which is fixed with its latest release
Verified with react-native 0.57.1, works like charm!

[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)?