Search code examples
javascriptreact-nativenative-base

my header component of NativeBase result is empty and not on top

when I use header component from nativeBase : enter image description here

import React, { Component } from 'react';
import changeNavigationBarColor,{ showNavigationBar } from 'react-native-navigation-bar-color';
import { Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';

import { main, discoverPage } from './../../assets/style'
import HeaderOfPage from './../../components/Header'


export default class Splash extends Component {
    componentDidMount() {
        setTimeout(() => {
            showNavigationBar()
        },200)
        changeNavigationBarColor('#1f2128', true)
    }
    
    render() {
        return (
            <Container style={[main.Container,{backgroundColor:'#1f2128'}]}>
                <Header>
                  <Left>
                    <Button transparent>
                      <Icon name='arrow-back' />
                    </Button>
                  </Left>
                  <Body>
                    <Title>Header</Title>
                  </Body>
                  <Right>
                    <Button transparent>
                      <Icon name='menu' />
                    </Button>
                  </Right>
                </Header>
            </Container>
        )
    }
}

I don't know why, maybe because I use changeNavigationBarColor someone can help me ?

Solution

  • Did you give Flex in main.Container ? This seems like an issue from the style in Container component.