tvOS: TextInput backgroundColor style prop has inconsistent UI when highlighted.

React Native version: react-native-tvos@0.60.4-6

Code

<TextInput style={styles.textInput} placeholder="Email Address" />

const styles = StyleSheet.create({
    textInput: {
        backgroundColor: '#D5D5D5',
        height: 72,
        textAlign: 'center',
        fontSize: 32,
        fontWeight: '300',
        marginBottom: 28,
  },
})

Describe what you expected to happen:

TextInput has default tvOS UI experience that I need to customize. Providing styling to TextInput should disable that default tvOS UI experience.

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

[danychi]

I have been working on demos for an upcoming medium article on React Native TV user input. As part of this work, I found that there are issues on Android TV with having TextInput get the focus from a Touchable when navigating with the DPad.

The technique below seems to solve that issue, and wrapping the TextInput in a Touchable seems to restore the styling that you would expect.

const App = () => {
  const [inputText, setInputText] = useState('');
  const textInputRef = useRef();
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView
        style={[styles.container, {backgroundColor: colors.background}]}>
            <TouchableOpacity
              style={{flex: 1}}
              onPress={() => textInputRef?.current?.focus()}>
              <TextInput
                ref={textInputRef}
                label="Text Input"
                value={inputText}
                onChangeText={(src) => setInputText(src)}
              />
            </TouchableOpacity>
      </ScrollView>
    </SafeAreaView>
  );
};

This workaround seems to partially work, but when the TouchableOpacity uses a light background like “white” and the Text uses a “black” color, then the text is not visible as can be seen in this screenshot:

Black background - White text

White background - Black text

[douglowder]

This seems to be a long-standing issue with RN, where styles supported in <Text/> are not necessarily supported in <TextInput/>. https://github.com/facebook/react-native/issues/7070