[Fabric] Implement letterSpacing for TextInput (#14460)

anupriya13 · web-flow · commit 7480f75e39d3 · 2025-04-02T15:09:20.000+05:30
* Implement letterSpacing for TextInput

* Change files

* Update react-native-windows-9ee8d633-698c-476d-9334-170be2c5dc25.json

* Update textinput.tsx

* optimize code
diff --git a/change/react-native-windows-9ee8d633-698c-476d-9334-170be2c5dc25.json b/change/react-native-windows-9ee8d633-698c-476d-9334-170be2c5dc25.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Implement letterSpacing for TextInput",
+  "packageName": "react-native-windows",
+  "email": "54227869+anupriya13@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/playground/Samples/textinput.tsx b/packages/playground/Samples/textinput.tsx
@@ -144,6 +144,10 @@ export default class Bootstrap extends React.Component<{}, any> {
             clearTextOnFocus={true}
             placeholder={'Clear text on focus'}
           />
+          <TextInput
+            style={[styles.input, {letterSpacing: 5.1}]}
+            placeholder={'Letter Spacing'}
+          />
           <Button
             title={
               this.state.passwordHidden
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp
@@ -986,7 +986,9 @@ void WindowsTextInputComponentView::updateProps(
   if (!facebook::react::floatEquality(
           oldTextInputProps.textAttributes.fontSize, newTextInputProps.textAttributes.fontSize) ||
       (oldTextInputProps.textAttributes.allowFontScaling != newTextInputProps.textAttributes.allowFontScaling) ||
-      oldTextInputProps.textAttributes.fontWeight != newTextInputProps.textAttributes.fontWeight) {
+      oldTextInputProps.textAttributes.fontWeight != newTextInputProps.textAttributes.fontWeight ||
+      !facebook::react::floatEquality(
+          oldTextInputProps.textAttributes.letterSpacing, newTextInputProps.textAttributes.letterSpacing)) {
     m_propBitsMask |= TXTBIT_CHARFORMATCHANGE;
     m_propBits |= TXTBIT_CHARFORMATCHANGE;
   }
@@ -1301,6 +1303,12 @@ void WindowsTextInputComponentView::UpdateCharFormat() noexcept {
   cfNew.dwMask |= CFM_OFFSET;
   cfNew.yOffset = 0;
 
+  // set letter spacing
+  float letterSpacing = props.textAttributes.letterSpacing;
+  if (!std::isnan(letterSpacing)) {
+    updateLetterSpacing(letterSpacing);
+  }
+
   // set charset
   cfNew.dwMask |= CFM_CHARSET;
   cfNew.bCharSet = DEFAULT_CHARSET;
@@ -1545,4 +1553,20 @@ void WindowsTextInputComponentView::autoCapitalizeOnUpdateProps(
   }
 }
 
+void WindowsTextInputComponentView::updateLetterSpacing(float letterSpacing) noexcept {
+  CHARFORMAT2W cf = {};
+  cf.cbSize = sizeof(CHARFORMAT2W);
+  cf.dwMask = CFM_SPACING;
+  cf.sSpacing = static_cast<SHORT>(letterSpacing * 20); // Convert to TWIPS
+
+  LRESULT res;
+
+  // Apply to all existing text like placeholder
+  winrt::check_hresult(m_textServices->TxSendMessage(EM_SETCHARFORMAT, SCF_ALL, reinterpret_cast<LPARAM>(&cf), &res));
+
+  // Apply to future text input
+  winrt::check_hresult(
+      m_textServices->TxSendMessage(EM_SETCHARFORMAT, SCF_SELECTION, reinterpret_cast<LPARAM>(&cf), &res));
+}
+
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.h
@@ -110,6 +110,8 @@ struct WindowsTextInputComponentView
       const std::string &previousCapitalizationType,
       const std::string &newcapitalizationType) noexcept;
 
+  void updateLetterSpacing(float letterSpacing) noexcept;
+
   winrt::Windows::UI::Composition::CompositionSurfaceBrush m_brush{nullptr};
   winrt::Microsoft::ReactNative::Composition::Experimental::ICaretVisual m_caretVisual{nullptr};
   winrt::Microsoft::ReactNative::Composition::Experimental::IDrawingSurfaceBrush m_drawingSurface{nullptr};
