placeholderTextColor is ignored when secureTextEntry = {true} on TextInput

[dzunisanindlhovu]

Environment

If you are using latest version:

1. react-native -v:
   react-native-cli: 2.0.1
   react-native: 0.61.52.
   react-native run-windows --info:

Otherwise if --info doesn't exist:

1. react-native -v:
   react-native-cli: 2.0.1
   react-native: 0.61.52.
2. npm ls rnpm-plugin-windows:
   `-- (empty)
3. npm ls react-native-windows:
   `-- react-native-windows@0.61.0
4. node -v:
   v12.10.0
5. npm -v:
   6.10.3
6. yarn --version:
   1.22.0

Then, specify:

10.0,18362.0

• Target Platform Version(s):
  x64

• Target Device(s):
  Windows 10 PC

• Visual Studio Version:
  Visual Studio 2019

• Build Configuration: Debug

Steps to Reproduce

(Write your steps here:)

On a high-level we need to be able to change the color of the placeholder text in TextInput on react-native-windows.

The placeholderTextColor works fine when the secureTextEntry = {false} but placeholderTextColor is ignored when secureTextEntry = {true} on TextInput.

This is partially because TextInput on react-native-windows uses winrt::Windows::UI::Xaml::Controls::TextBox when secureTextEntry = {false} and winrt::Windows::UI::Xaml::Controls::PasswordBox when secureTextEntry = {true}.

Even though we have the TextBox.PlaceholderForeground Property that we currently use to change the placeholder color, we actually don’t have anything equivalent for PasswordBox that we can just use straight away.

Expected Behavior

(Write what you thought would happen.)

Actual Behavior

(Write what happened. Add screenshots!)

react-native run-windows --logging

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

Additional context

(Write any other additional context that may help in root causing the issue.)

[dzunisanindlhovu]

This is the fix/workaround that we found in the Xbox partner team. https://github.com/microsoft/react-native-windows/pull/4477/files