Switch Default trackColor false does not persist on Android

[Relax594]

Description

The Switch Component on Android does not persist its default trackColor for false. Its just gone (not just white) after switching On and Off again.

2 shows the Switch on first render 1 shows the Switch after being toggled On and Off again

React Native version:

System:
    OS: Windows 8.1
    CPU: (8) x64 Intel(R) Xeon(R) CPU           E5630  @ 2.53GHz
    Memory: 42.11 GB / 48.00 GB
  Binaries:
    Node: 12.16.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD
  SDKs:
    Android SDK:
      API Levels: 23, 28, 29
      Build Tools: 28.0.3, 29.0.2, 29.0.3
      System Images: android-29 | Google APIs Intel x86 Atom
  IDEs:
    Android Studio: Version  4.0.0.0 AI-193.6911.18.40.6626763
  npmPackages:
    react: 16.13.1 => 16.13.1
    react-native: 0.63.2 => 0.63.2

Steps To Reproduce

Run the code example on an Android Device (tested on Android 9 and 10). Running on Snack seems to be fine.

Expected Results

Expected to keep the default trackColor for false on Android aswell. iOS is fine.

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

This works fine on Snack but on an Android Device it is as described above.

import React, { useState } from 'react';
import { Switch, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  const [val, setVal] = useState(false);

  return (
    <View style={styles.container}>
      <Switch value={val} onValueChange={() => setVal(previousState => !previousState)} trackColor={{true: 'red' }} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

[chrisglein]

Recreated in a snack here: https://snack.expo.io/@chrisglein/repro29822 On iOS it shows red when switched on and grey when switched off (despite what the false value is). On Android it shows the red, same as iOS, but with the thumb not colored (and looks ugly): On Web the value isn't respected at all.

So I'm not seeing the same behavior as you, at least in an Expo Snack. Is there something more needed I might be missing?

[Relax594]

As I've written above, on expo snack it's working somehow. The behaviour I described is just happening on a real device as far as I can tell.

Just copying the code I provided into a brand new init project and building on android device. Nothing more needed. I can recreate it on multiple android devices with different OS versions.

As I've said, iOS is working as expected.

[chrisglein]

As I've written above, on expo snack it's working somehow. The behaviour I described is just happening on a real device as far as I can tell.

Sorry, I missed your comment about it working in Snack. Both of them. Yikes, my eyes are failing me.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.