createMaterialTopTabNavigator backgroundColor не по умолчанию для основного цвета темы

Question

Я пытаюсь использовать основной цвет моей темы для фона моего createMaterialTopTabNavigator, но он не по умолчанию соответствует цвету темы, и я не могу получить доступ к теме вне компонента.

В основном я сейчас использую стандартную тему React-Native-Paper, и она выглядит примерно так (этот фиолетовый цвет - тот цвет, который я хочу):

Теперь MaterialTopBarNavigator выглядит следующим образом (он не использует фиолетовый цвет по умолчанию для темы):

В общем, я пытаюсь найти способ доступа к моей теме вне компонента, чтобы я мог передать ее в объект стиля в createMaterialTopTabNavigator tabBarOptions

Мой index.js выглядит так

const myDarkTheme = {
  ...DarkTheme,
  headerDark: true
};

const myDefaultTheme = {
  ...DefaultTheme,
  headerDark: true
};

export const ThemeContext = React.createContext(null);

export default class Main extends Component {
  state = {
    theme: myDefaultTheme
  };

  _toggleTheme = () => {
    this.setState(prevState => {
      return {
        theme: prevState.theme.dark ? myDefaultTheme : myDarkTheme
      };
    });
  };

  render() {
    return (
      <ThemeContext.Provider
        value={{ theme: this.state.theme, toggleTheme: this._toggleTheme }}
      >
        <PaperProvider theme={this.state.theme}>
          <App />
        </PaperProvider>
      </ThemeContext.Provider>
    );
  }
}

AppRegistry.registerComponent(appName, () => Main);

Вот мой createMaterialTopTabNavigator

const AccountNavigator = createMaterialTopTabNavigator(
  {
    Profile: { screen: Profile },
    Preferences: { screen: Preferences }
  },
  {
    initialRouteName: "Profile",
    swipeEnabled: true,
    animationEnabled: true,
    tabBarOptions: {
      labelStyle: { fontWeight: "bold" },
      //I would add this here to change background color
      //but I don't know how to access my theme color from here...
      //style: { backgroundColor: insertThemePrimaryColorHere }
    }
  }
);