MarkdownStyles updated with delay on iOS

[Skalakid]

Current Behavior

Currently changing markdownStyle on iOS will have effect only after pressing any key on the keyboard.

Expected Behavior

Changing markdownStyle should have an instant effect and its behavior should be aligned with Android and Web implementatioans.

ios.bug.mov

[tomekzaw]

Repro

It works correctly only if the current text doesn't contain an emoji.

App.tsx

import * as React from 'react';

import {Button, StyleSheet, Text, View} from 'react-native';

import {MarkdownTextInput} from '@expensify/react-native-live-markdown';

export default function App() {
  const [value, setValue] = React.useState('Hello *world* `code` aaa😡');
  const [state1, setState1] = React.useState(false);
  const [state2, setState2] = React.useState(false);

  const textColor = state1 ? 'lime' : 'green';
  const codeColor = state2 ? 'cyan' : 'blue';

  return (
    <View style={styles.container}>
      <Text>text color: {textColor}</Text>
      <Text>code color color: {codeColor}</Text>
      <MarkdownTextInput
        multiline
        value={value}
        onChangeText={setValue}
        style={[styles.input, {color: textColor}]}
        markdownStyle={{code: {color: codeColor}}}
      />
      <Button
        title="Toggle text color"
        onPress={() => setState1((s) => !s)}
      />
      <Button
        title="Toggle code color"
        onPress={() => setState2((s) => !s)}
      />
      <Button
        title="Toggle both"
        onPress={() => {
          setState1((s) => !s);
          setState2((s) => !s);
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    marginTop: 60,
  },
  input: {
    fontSize: 20,
    width: 300,
    padding: 5,
    borderColor: 'gray',
    borderWidth: 1,
    textAlignVertical: 'top',
  },
});

[tomekzaw]

I was able to pinpoint the issue to this conditional – the branch depends on whether the text contains an emoji or not: