Fixing RTL text made with @react-pdf/renderer

السلام عليكم 👋

If you're creating a pdf using @react-pdf/renderer and you noticed the Arabic text direction is broken, then you can use the following component (Original)

export const TextRTL = ({ isRTL, style, text }) => {
  return (
    <View
      style={{
        display: "flex",
        flexDirection: isRTL ? "row-reverse" : "row",
        flexWrap: "wrap",
        ...style,
      }}
    >
      {text?.split(" ").map((item) => (
        <Text
          style={{
            ...(isRTL ? { marginLeft: 2.5 } : { marginRight: 2.5 }),
          }}
        >
          {item}
        </Text>
      ))}
    </View>
  );
};

Before:

After: