Styling the page header with createAppContainer and createMaterialTopTabNavigator

Question

Good evening guys, I’m having trouble with header stylization, because I created a main screen and I believed in it and imported the tabs. In this same file I call 3 screen tabs (business, contact, email) and each has its own functionalities

He chanted importing an image of the representation of where I wanted to change:

Here’s my code from where I’m having trouble solving

import React from 'react';
import { SafeAreaView } from 'react-native';
import { createAppContainer } from 'react-navigation';

import { createMaterialTopTabNavigator, MaterialTopTabBar } from 'react-navigation-tabs';

import Business from './MenuTabBusiness/IndexScreen';
import Contact from './MenuTabContact/IndexScreen';
import Email from './MenuTabEmail/IndexScreen';

import colors from '../../constants/Colors';

function SafeAreaMaterialTopTabBar(props) {
    return (
        <SafeAreaView>
            <MaterialTopTabBar {...props} />
        </SafeAreaView>
    );
}

const mainNavigation = createMaterialTopTabNavigator(
    {
        'Negócios': { screen: Business },
        'Contato': { screen: Contact },
        'E-mail': { screen: Email },
    },
    {
        tabBarComponent: SafeAreaMaterialTopTabBar,
        tabBarOptions: {
            tabStyle: {
                backgroundColor: colors.tintColor
            },
        },
    },
);

export default createAppContainer(mainNavigation)

I’m starting with React-On, and I’m a little lost to solve that part of the header...

Thank you!

Answer 1

const mainNavigation = createMaterialTopTabNavigator(
  {
    'Negócios': { 
      screen: Business,
      navigationOptions: {
        //opcoes dessa pagina
        tabBarOptions: { ... }
      }
    },
    'Contato': { screen: Contact },
    'E-mail': { screen: Email },
  },
  {
    defaultNavigationOptions: {
      // vai pra todas paginas
      tabBarOptions: { ... }
    },
    tabBarComponent: SafeAreaMaterialTopTabBar,
    tabBarOptions: {
        Style: {  //exemplo
            backgroundColor: colors.tintColor
            labelStyle: { fontSize: 12 }, // tamanho da fonte
            tabStyle: { width: 100 }, // tamanho do header
            style: { backgroundColor: 'powderblue' }, // cor do header
        },
    },

Here are the properties of tabBarOptions

• activeTintColor - Label and icon color of the active tab.
• inactiveTintColor - Label and icon color of the inactive tab.
• showIcon - Whether to show icon for tab, default is false.
• showLabel - Whether to show label for tab, default is true.
• pressColor - Color for material ripple (Android >= 5.0 only).
• pressOpacity - Opacity for pressed tab (iOS and Android < 5.0 only).
• scrollEnabled - Whether to enable scrollable tabs.
• tabStyle - Style Object for the tab.
• indicatorStyle - Style Object for the tab Indicator (line at the bottom of the tab).
• labelStyle - Style Object for the tab label. Specifying a color here will override the - - color specified in activeTintColor and inactiveTintColor for the label.
• iconStyle - Style Object for the tab icon.
• style - Style Object for the tab bar.
• allowFontScaling - Whether label font should Scale to respect Text Size Accessibility - - Settings, default is true.
• renderIndicator - Function which takes an Object with the Current route and Returns a - - custom React Element to be used as a tab Indicator.

source

Answer 2

There are two ways to solve this problem.

The first would be to configure the "navigationOptions" of each route within its "mainNavigation". Here is an example:

const mainNavigation = createMaterialTopTabNavigator(
    {
        'Negócios': { screen: Business, navigationOptions: { headerTitle: 'Negócios' } },
        'Contato': { screen: Contact, navigationOptions: { headerTitle: 'Contato' } },
        'E-mail': { screen: Email, navigationOptions: { headerTitle: 'E-mail' } },
    },
    {
        tabBarComponent: SafeAreaMaterialTopTabBar,
        tabBarOptions: {
            tabStyle: {
                backgroundColor: colors.tintColor
            },
        },
    },
);

The other way would be to leave the "mainNavigation" the way it is and make this "navigationOptions" configuration inside each component used in the route

class Business extends React.Component {
  static navigationOptions = {
    title: 'Negócios',
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  };

  /* Programação do seu componente */
}

Here you have a link with the header configuration options:

https://reactnavigation.org/docs/en/headers.html