Nativebase: Header absolute/fixed value with transparent background

Created on 9 Jun 2018 · 10Comments · Source: GeekyAnts/NativeBase

I'm trying to make the header to be transparent. I've tried styling it to absolute but its not in the screen (hidden) if I do that. also if I do backgroundColor: 'transparent' it doesn't work as well.

I want the Header component to be on top of the view that has the gradient. I want to achieve something like this.

Is it possible with Native Base header component or I have to create my own?

Source

IbraheemAlSaady

Most helpful comment

I done this using style={{ backgroundColor: null }}

iamadityaaz on 11 Apr 2019

👍3 😄2

All 10 comments

To make header transparent you should do

class App extends Component {
  static navigationOptions = {
    headerStyle: {
      backgroundColor: 'transparent'
    }
  }
  render() {
    return (
      <YourViewHere/>
    )
  }
}

You did backgroundColor: { 'transparent' } instead with {}
Also keep note that the white _may_ be your actual background color, so you may mistake your View background color for that

Hope this helps! Please let me know if it does! :D

qin-guan on 9 Jun 2018

👎2 😕1

@QinGuan2004 Yeah sorry for the {}, I updated my question.
I'm using the Header component from Native Base, looks like this.

<Header noShadow style={{ backgroundColor: 'red' }}>
   <Left>
       <Button transparent>
           <Icon name="arrow-back" />
       </Button>
   </Left>
</Header>

You can change the style of the Header (backgroundColor, etc...), but what I want is for the header to be on top of the element that has the gradient color.

I tried your solution, but unfortunately, it didn't work.

IbraheemAlSaady on 9 Jun 2018

@IbraheemAlSaady try wrapping the screen with ImageBackground.

Sample code

import React, { Component } from 'react';
import { ImageBackground, Dimensions } from "react-native";
import { Container, Header, Left, Body, Right, Button, Icon, Content, Text } from 'native-base';

export default class App extends Component {

  render() {

    let { height, width } = Dimensions.get('window');

    return (
      <ImageBackground source={require("./background.png")} style={{ width, height }}>
        <Container>
          <Header style={{ backgroundColor: "transparent" }} iosBarStyle={"light-content"} noShadow>
            <Left>
              <Button transparent>
                <Icon name='arrow-back' style={{ color: "white" }} />
              </Button>
            </Left>
            <Body />
            <Right />
          </Header>
          <Content>
            <Text style={{ color: "white", padding: 20 }}>Hi there!</Text>
          </Content>
        </Container>
      </ImageBackground>
    );
  }
}

Screenshot
simulator screen shot - iphone 6 - 2018-06-11 at 15 30 43

akhil-geekyants on 11 Jun 2018

noShadow does not give the desired output for iOS

Lets have transparent as prop for Header

SupriyaKalghatgi on 12 Jun 2018

Fixed with v2.5.2

SupriyaKalghatgi on 15 Jun 2018

👍1

@SupriyaKalghatgi, v2.5.2 did the trick. thanks

IbraheemAlSaady on 17 Jun 2018

I'm using latest 2.5.2, and I can't even reproduce @akhil-geekyants code on Android emulator..
My code

import React, { Component } from 'react';
import { ImageBackground, Dimensions } from "react-native";
import { Container, Header, Left, Body, Right, Button, Icon, Content, Text } from 'native-base';

export default class App extends Component {

  render() {
    let { height, width } = Dimensions.get('window');

    return (
      <ImageBackground
        source={{uri: "https://placeimg.com/1000/2160/tech"}}
        style={{ width, height }}
      >
        <Container>
          <Header
            style={{ backgroundColor: "transparent" }}
            iosBarStyle={"light-content"}
            androidStatusBarColor="rgba(0,0,0,0.251)"
            transparent
            noShadow
          >
            <Left>
              <Button transparent>
                <Icon name='arrow-back' style={{ color: "black" }} />
              </Button>
            </Left>
            <Body />
            <Right />
          </Header>
          <Content>
            <Text style={{ color: "black", padding: 20 }}>Hi there!</Text>
          </Content>
        </Container>
      </ImageBackground>
    );
  }
}

And here's the result I'm getting
rsz_screenshot_1529283656

While header is transparent, statusbar isn't.. Any ideas?

kenny26 on 18 Jun 2018

👍1

@kenny26 You can do something like this on android

import { StatusBar } from 'react-native'

// inside your component class
componentWillMount() {
    if (Platform.OS === 'android') {
      StatusBar.setTranslucent(true);
    }
}

// you can put this inside your render method
<StatusBar backgroundColor="transparent" barStyle="light-content" />

IbraheemAlSaady on 18 Jun 2018

Fixed with 2.6.1

SupriyaKalghatgi on 22 Jun 2018

I done this using style={{ backgroundColor: null }}

iamadityaaz on 11 Apr 2019

👍3 😄2

Was this page helpful?

0 / 5 - 0 ratings