Fix updating both styles at once on iOS

[tomekzaw]

Details

This PR fixes the formatting of MarkdownTextInput when both style and markdownStyle are changed in a single React render on iOS.

Before	After
before.mp4	after.mp4

Related Issues

Expensify/App#39348

Manual Tests

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* `inline code`');
  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',
  },
});

Linked PRs

[robertKozik]

✅