React-native-navigation: Custom TopBar losing text on Android

[bbuchanan]

Issue Description

Using a custom style on the top bar for all screens. This is a tab based layout. In my application the problem feels a bit more random, but when I created a small app to demonstrate the problem, it appears that it happens fairly consistently on the last tab. I have an app with 3 tabs. The last screen almost always loses the text on Android (ios seems fine).

Steps to Reproduce / Code Snippets / Screenshots

Create a tab application with more than 1 one screen. Use a custom style / control for the navigatorStyle. Navigate to the last tab and the text on Android and the text in the header will be missing.

Screen 1 looks fine.

Screen 3 loses the text (it seems like it's always the last screen, even if I make 4 or 5 tabs).

I included the relevant code below, but also created a repository to pull from if you want to build something and see it happen.
Repo

App.js

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import Icon from "react-native-vector-icons/Ionicons";
import { Navigation } from "react-native-navigation";
import ScreenOne from "./src/screens/Screen1";
import ScreenTwo from "./src/screens/Screen2";
import ScreenThree from "./src/screens/Screen3";
import NavView from "./src/NavView";
import startTabs from "./startTabs";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

Navigation.registerComponent("nav-bug.Screen1", () => ScreenOne);
Navigation.registerComponent("nav-bug.Screen2", () => ScreenTwo);
Navigation.registerComponent("nav-bug.Screen3", () => ScreenThree);
Navigation.registerComponent("nav-bug.NavView", () => NavView);

navBarStyle.js

const navBarStyle = {
  navBarBackgroundColor: "#001327",
  navBarButtonColor: "white",
  navBarTextColor: "white",
  statusBarTextColorScheme: "light",
  navBarCustomView: "nav-bug.NavView"
};

export default navBarStyle;

startTabs.js

import { Navigation } from "react-native-navigation";
import Icon from "react-native-vector-icons/Ionicons";

import navBarStyle from "./navBarStyle";

const startTabs = () => {
  Promise.all([
    Icon.getImageSource("md-home", 30),
    Icon.getImageSource("md-menu", 30),
    Icon.getImageSource("md-apps", 30)
  ]).then(sources => {
    Navigation.startTabBasedApp({
      tabs: [
        {
          screen: "nav-bug.Screen1",
          label: "Screen 1",
          icon: sources[0],
          navigatorStyle: navBarStyle
        },
        {
          screen: "nav-bug.Screen2",
          label: "Screen 2",
          icon: sources[1],
          navigatorStyle: navBarStyle
        },
        {
          screen: "nav-bug.Screen3",
          label: "Screen 3",
          icon: sources[2],
          navigatorStyle: navBarStyle
        }
      ],
      tabsStyle: {
        tabBarSelectedButtonColor: "orange"
      },
      appStyle: {
        tabBarSelectedButtonColor: "orange"
      }
    });
  });
};

export default startTabs;

NavView.js

import React from "react";
import { View, Text, StyleSheet, ViewStyle } from "react-native";

const styles = StyleSheet.create({
  containerStyle: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  navText: {
    backgroundColor: "#001327",
    color: "white",
    fontSize: 20,
    fontWeight: "bold",
    borderRadius: 7,
    paddingTop: 5,
    paddingBottom: 5,
    paddingRight: 8,
    paddingLeft: 8,
    borderWidth: 2,
    borderColor: "white"
  }
});

const NavView = () => (
  <View style={styles.containerStyle}>
    <Text style={styles.navText}>Title Text!</Text>
  </View>
);

export default NavView;

---

Environment

• React Native Navigation version: 1.1.393
• React Native version: 0.52.0
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator, Pixel 1, API v26, 2GB RAM, Android 8.0.

[Billydubb]

We have noticed the exact same problem in our App. At first it only occurred in signed APK release builds but now we can reproduce it fairly regularly in debug builds also. It's mostly the last tab with the missing title, but sometimes it's also other tabs.

[bbuchanan]

I've switched away from using the NavView component to style my top bar. I'm strictly relying on navBarStyle.js. As a result, I had to lose the border around the text. No problem. However today I simply applied navBarTextFontSize and my text on Android started disappearing again. So I could probably further simplify the sample by getting rid of the component for styling. Perhaps it's as simple as setting the text size? Not sure yet.

[palmsnipe]

I've had the same issue, the custom component wasn't showing on the latest tab. As a workaround, I set statically then dynamically the style on the last scene.

static navigatorStyle = {
  navBarCustomView: null
};

componentDidMount() {
  this.props.navigator.setStyle({
    navBarCustomView: "/navbar"
  });
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[ivan133]

@palmsnipe solution works!