Update to 0.64: Bottom tab navigation doesn´t change text colour when selected

[prupipho]

Environment

Run the following in your terminal and copy the results here.

1. npx react-native --version: 5.0.1-alpha.2
2. npx react-native info:

System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 5.10 GB / 15.76 GB
  Binaries:
    Node: 14.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 28, 29, 30
      Build Tools: 28.0.3, 29.0.2, 30.0.2
      System Images: android-28 | Google APIs Intel x86 Atom, android-29 | Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom
      Android NDK: Not Found
    Windows SDK:
      AllowDevelopmentWithoutDevLicense: Enabled
      AllowAllTrustedApps: Enabled
      Versions: 10.0.18362.0, 10.0.19041.0
  IDEs:
    Android Studio: Version  4.1.0.0 AI-201.8743.12.41.7042882
    Visual Studio: 16.8.31019.35 (Visual Studio Community 2019)
  Languages:
    Java: 1.8.0_211 - C:\Program Files\Java\jdk1.8.0_211\bin\javac.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1
    react-native: 0.64.0 => 0.64.0
    react-native-windows: ^0.64.0-0 => 0.64.3
  npmGlobalPackages:
    *react-native*: Not Found

• Target Platform Version(s): 10.0.18362.0
• Target Device(s): Desktop
• Visual Studio Version: vscode
• Build Configuration: Debug

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Create new app using latest version and typescript running:
   npx react-native init MyTSApp --template react-native-template-typescript cd MyTSApp
2. Move to folder with cd MyTsApp and run npx react-native-windows-init --overwrite --language cs
3. Install react-navigation and needed dependencies for it. See zip file for package.json.
4. Update App.tsx with a basic app with 2 screens. See zip file for App.tsx.
5. yarn android. See in the image below that Home is in blue.
6. yarn windows. See image below and notice that Home is still in black even if it´s the active Screen.

Expected Results

We expect that the bottom tab for the active Screen displays in blue.

Snack, code example, screenshot, or link to a repository:

Screenshot of how Android app displays in the Emulator:

Screenshot of how Windows app displays in the Emulator:

Package.json

{
  "name": "tabbedtsapp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "windows": "react-native run-windows"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/bottom-tabs": "^5.11.9",
    "@react-navigation/native": "^5.9.4",
    "@react-navigation/stack": "^5.14.4",
    "react": "17.0.1",
    "react-native": "0.64.0",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-reanimated": "^2.1.0",
    "react-native-safe-area-context": "^3.2.0",
    "react-native-screens": "^2.18.1",
    "react-native-windows": "^0.64.0-0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@types/jest": "^26.0.20",
    "@types/react-native": "^0.64.0",
    "@types/react-test-renderer": "^16.9.2",
    "babel-jest": "^26.6.3",
    "eslint": "^7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.64.0",
    "react-test-renderer": "17.0.1",
    "typescript": "^3.8.3"
  },
  "resolutions": {
    "@types/react": "^17"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

App.tsx

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

TabbedTSApp.zip

[asklar]

@prupipho just to confirm, did this use to work on Windows on 0.63?

[prupipho]

@prupipho just to confirm, did this use to work on Windows on 0.63?

Yes, it was working fine for previous versions.
Just in case it helps, it was working fine with versions below:

"dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/bottom-tabs": "^5.11.8",
    "@react-navigation/native": "^5.9.3",
    "@react-navigation/stack": "^5.14.3",
    "react-native-gesture-handler": "^1.10.2",
    "react-native-reanimated": "^1.13.2",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-screens": "^2.18.0",
    "@types/react-native-vector-icons": "^6.4.6",
    "react": "16.13.1",
    "react-native": "0.63.4",
    "react-native-windows": "^0.63.0-0"
  },

[sibille]

Is there a possibility to back-port this to 0.64?

[NickGerleman]

Moving the milestone to 0.66, since 0.65 is approaching and this issue is not new in 0.65.

@sibille I expect this is one we will backport to 0.64, unless there are complex or breaking changes that would make this a risk, or we are not able to make a fix in the short-term.

[chiaramooney]

@prupipho @sibille When I follow the repro steps above I'm getting "folly::toJson: JSON object value was a NaN or INF" and the app fails to load. There's definitely a bug here but I'm trying to understand the mismatch in behavior between my repro and what's listed in the issue description. Can you walk through your repro steps and confirm?

[asklar]

@chiaramooney try disabling web debugging?

[chiaramooney]

This bug is an instance of #8395. Looking at the code for bottom-tabs the tab labels are rendered with backgroundColor 'transparent' making this issue a case of the larger bug that Text components rendered with both the color and backgroundColor style props fail to update their styling automatically and require reload for the new values to be seen.

[chiaramooney]

Bug now resolved in main. Will work on backporting to 0.65 and 0.64 soon.

[chiaramooney]

Update: Solution backported to 0.65. We have made the decision to not backport to 0.64 due to large changes in the Text code base. The backport in this case is not straightforward and the odds of introducing regressions are high.