Q: StackNavigator header style no effect with createBottomTabNavigator screen? I want to render bottom tabs under stack navigator and this is my code: 
const todosScreen = {
  screen: TodosScreen,
  navigationOptions: ({ navigation }) => ({
    header: null,
    title: navigation.state.routeName
  })
};

const BottomTabs = createBottomTabNavigator({
  All: todosScreen,
  Active: todosScreen,
  Complete: todosScreen
});

const AppNavigator = createStackNavigator(
  {
    Home: {
      screen: BottomTabs
    }
  },
  {
    initialRouteName: 'Home',
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: '#f4511e',
        alignSelf: 'center',
        textAlign: 'center'
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
        textAlign: 'center',
        alignSelf: 'center',
        flex: 1
      }
    }
  }
);

unfortunately the stacknavigator only renders white background on top, I guess the styles of header is not taking effect? I wonder what could be the cause and fix?

A: Not exactly a fix for your issue, more like a workaround.
I found easier to customize the header with the Header component from react-native-elements. Just add the component for each screen that you want header on. Then you hide the header on your stack navigator using header: null, otherwise you might end up with two headers.
Example below:
<React.Fragment>
  <Header
    statusBarProps={{ barStyle: 'light-content' }}
    barStyle="light-content"
    leftComponent={
      <SimpleIcon
        name="menu"
        color="#34495e"
        size={20}
      />
    }
    centerComponent={{ text: 'HOME', style: { color: '#34495e' } }}
    containerStyle={{
      backgroundColor: 'white',
      justifyContent: 'space-around',
    }}
  />
</React.Fragment>

