CODEWITHSUNDEEP
reactjsreact-nativeexpo
geoffjay
geoffjay

Reputation: 413

React native + expo topbar Material navigation leaves gap at top

I'm trying to add a tabbed navigation to a React Native app, also using expo if that matters, and whenever I do this I get a big chunk of white at the top of the screen. I'm not seeing what's causing this though, the status bar background shouldn't be pushing it down and as far as I can tell changing the height style of my navigation or main view doesn't do anything.

This looks like:

topgap

The complete source to recreate this is:

// utils/colors.js
export const white = '#fff'
export const orange = '#f26f28'

// App.js
import React, { Component } from 'react'
import { StyleSheet, View, StatusBar, Dimensions } from 'react-native'
import {
  createMaterialTopTabNavigator,
  createStackNavigator
} from 'react-navigation'
import { Constants } from 'expo'
import List from './components/List'
import Add from './components/Add'
import { orange, white } from './utils/colors'

function StatusBarBackground ({ backgroundColor, ...props }) {
  return (
    <View style={{ backgroundColor, height: Constants.statusBarHeight }}>
      <StatusBar translucent backgroundColor={backgroundColor} {...props} />
    </View>
  )
}

const Tabs = createMaterialTopTabNavigator({
  List: {
    screen: List,
    navigationOptions: {
      tabBarLabel: 'List',
    },
  },
  Add: {
    screen: Add,
    navigationOptions: {
      tabBarLabel: 'Add',
    },
  },
}, {
  navigationOptions: {
    header: null
  },
  tabBarOptions: {
    activeTintColor: white,
    style: {
      height: 56,
      backgroundColor: orange,
      shadowColor: 'rgba(0, 0, 0, 0.24)',
      shadowOffset: {
        width: 0,
        height: 3
      },
      shadowRadius: 6,
      shadowOpacity: 1
    }
  }
})

const MainNavigator = createStackNavigator({
  Home: {
    screen: Tabs,
  },
})

export default class App extends Component {
  render() {
    return (
      <View style={{flex: 1}}>
        <StatusBarBackground backgroundColor={orange} barStyle="light-content" />
        <MainNavigator />
      </View>
    )
  }
}

The Add and List components are just a view with a text, both look similar to this:

import React, { Component } from 'react'
import { View, Text } from 'react-native'

class Add extends Component {
  render() {
    return (
      <View>
        <Text style={{fontSize: 20}}>Add</Text>
      </View>
    )
  }
}

export default Add

Upvotes: 2

Views: 3018

Answers (1)

Rupesh Bramhankar
Rupesh Bramhankar

Reputation: 166

You are adding Your Tab Navigator inside Stack Navigator, That is why that white header is showing from Stack Navigator.

1) If You want to add header then style your header like below

const MainNavigator = createStackNavigator({
  Home: {
    screen: Tabs,
  },
},{
  navigationOptions:{
    headerStyle : {
      backgroundColor:'#243346'
    },
    headerTintColor:"#fff"
  },
})

2) If you want to remove header then you can either remove your Tab Navigator from Stack Navigator or add headerMode:'none' inside navigationOprions object.

Upvotes: 4

Related Questions