Passing invalid color to `markdownStyle` causes crash on iOS

[tomekzaw]

Reported by @kacperkapusciak

Reproducible on ac7adf3 on iOS

import * as React from 'react';
import {Button, ScrollView, StyleSheet, Text, View} from 'react-native';
import {
  MarkdownTextInput,
  parseExpensiMark,
} from '@expensify/react-native-live-markdown';
import * as TEST_CONST from './testConstants';
import {handleFormatSelection} from './formatSelectionUtils';

export default function App() {
  const [value, setValue] = React.useState(TEST_CONST.EXAMPLE_CONTENT);
  const [multiline, setMultiline] = React.useState(true);
  const [textColorState, setTextColorState] = React.useState(false);
  const [linkColorState, setLinkColorState] = React.useState(false);
  const [textFontSizeState, setTextFontSizeState] = React.useState(false);
  const [emojiFontSizeState, setEmojiFontSizeState] = React.useState(false);
  const [caretHidden, setCaretHidden] = React.useState(false);
  const [selection, setSelection] = React.useState({start: 0, end: 0});

  const style = React.useMemo(() => {
    return {
      color: textColorState ? 'gray' : 'black',
      fontSize: textFontSizeState ? 15 : 20,
    };
  }, [textColorState, textFontSizeState]);

  const markdownStyle = {
    // emoji: {
    //   fontSize: 20,
    // },
    // link: {
    //   color: 'blue',
    // },
    // code: {
    //   backgroundColor: 'lightblue',
    // },
    pre: {
      backgroundColor: 'tranparent',
    },
  };

  const ref = React.useRef<MarkdownTextInput>(null);

  return (
    <View style={styles.content}>
      <MarkdownTextInput
        multiline={true}
        formatSelection={handleFormatSelection}
        autoCapitalize="none"
        caretHidden={false}
        // value={value}
        // onChangeText={setValue}
        style={[styles.input, style]}
        ref={ref}
        markdownStyle={markdownStyle}
        parser={parseExpensiMark}
        placeholder="Description"
        onSelectionChange={e => setSelection(e.nativeEvent.selection)}
        selection={selection}
        maxLength={30000}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {},
  content: {
    alignItems: 'center',
    marginTop: 60,
  },
  input: {
    fontSize: 20,
    width: '90%',
    height: 300,
    borderRadius: 5,
    backgroundColor: 'white',
    padding: 5,
    borderColor: '#ccc',
    borderWidth: 1,
    textAlignVertical: 'top',
  },
  text: {
    fontFamily: 'Courier New',
    marginTop: 10,
    height: 100,
  },
});

[tomekzaw]

TODO: check if the same problem happens on Android

[tomekzaw]

TODO: try "none" and "tranparent" (without s)