feat: add lineHeight and lineSpacingExtra style props to TextWidget

Author: sAleksovski

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Add `lineHeight` and `lineSpacingExtra` style props to `TextWidget`
+
 ### Fixed
 
 - Fix crash when deleting widgets if stored widget images cannot be listed

android/src/main/java/com/reactnativeandroidwidget/builder/widget/TextWidget.java

@@ -7,6 +7,7 @@
 import android.graphics.Typeface;
 import android.os.Build;
 import android.text.TextUtils;
+import android.util.TypedValue;
 import android.view.Gravity;
 import android.widget.TextView;
 
@@ -50,20 +51,28 @@ public void applyProps() {
             }
         }
 
+        setFont();
+        setShadow();
+
         if (props.hasKey("letterSpacing")) {
             view.setLetterSpacing((float) (props.getDouble("letterSpacing") / getFontSize()));
         }
 
+        if (props.hasKey("lineSpacingExtra")) {
+            view.setLineSpacing(dpToPx(props.getDouble("lineSpacingExtra")), 1.0f);
+        }
+
+        if (props.hasKey("lineHeight")) {
+            setLineHeight(props.getDouble("lineHeight"));
+        }
+
         if (props.hasKey("truncate")) {
             view.setEllipsize(TextUtils.TruncateAt.valueOf(props.getString("truncate")));
         }
 
         if (props.hasKey("maxLines")) {
             view.setMaxLines(props.getInt("maxLines"));
         }
-
-        setFont();
-        setShadow();
     }
 
     private void setFont() {
@@ -115,6 +124,15 @@ private void setShadow() {
         }
     }
 
+    private void setLineHeight(double lineHeight) {
+        int lineHeightPx = textSizeToPx(lineHeight);
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+            view.setLineHeight(lineHeightPx);
+        } else {
+            TextViewCompat.setLineHeight(view, lineHeightPx);
+        }
+    }
+
     private float getFontSize() {
         float fontSize = 12;
         if (props.hasKey("fontSize")) {
@@ -129,4 +147,8 @@ private int getFontSizeUnit() {
         }
         return COMPLEX_UNIT_SP;
     }
+
+    private int textSizeToPx(double value) {
+        return Math.round(TypedValue.applyDimension(getFontSizeUnit(), (float) value, appContext.getResources().getDisplayMetrics()));
+    }
 }

example/src/screens/TextScreen.tsx

@@ -34,6 +34,9 @@ const FONT_WEIGHT: (
   '900',
 ];
 
+const LOREM_IPSUM =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porta risus at sem facilisis, vitae luctus augue volutpat.';
+
 function TextWidgetDemo({
   fontStyle,
   fontWeight,
@@ -67,6 +70,38 @@ function TextWidgetDemo({
   );
 }
 
+function LineHeightDemo() {
+  return (
+    <FlexWidget>
+      <TextWidget
+        text={LOREM_IPSUM}
+        style={{
+          width: 320,
+          fontSize: 15,
+          lineHeight: 24,
+          color: '#111827',
+        }}
+      />
+    </FlexWidget>
+  );
+}
+
+function LineSpacingExtraDemo() {
+  return (
+    <FlexWidget>
+      <TextWidget
+        text={LOREM_IPSUM}
+        style={{
+          width: 320,
+          fontSize: 15,
+          lineSpacingExtra: 6,
+          color: '#111827',
+        }}
+      />
+    </FlexWidget>
+  );
+}
+
 export function TextScreen() {
   return (
     <ScrollView
@@ -100,6 +135,20 @@ export function TextScreen() {
           </View>
         ))
       )}
+
+      <Text style={styles.sectionTitle}>lineHeight</Text>
+      <WidgetPreview
+        renderWidget={() => <LineHeightDemo />}
+        height={120}
+        width={320}
+      />
+
+      <Text style={styles.sectionTitle}>lineSpacingExtra</Text>
+      <WidgetPreview
+        renderWidget={() => <LineSpacingExtraDemo />}
+        height={120}
+        width={320}
+      />
     </ScrollView>
   );
 }
@@ -118,4 +167,12 @@ const styles = StyleSheet.create({
     height: 30,
     marginBottom: 16,
   },
+  sectionTitle: {
+    width: 320,
+    marginTop: 8,
+    marginBottom: 8,
+    fontSize: 18,
+    fontWeight: '600',
+    color: 'black',
+  },
 });

src/widgets/TextWidget.tsx

@@ -31,6 +31,8 @@ interface TextWidgetInternalProps extends CommonInternalProps {
   adjustsFontSizeToFit?: boolean;
   textAlign?: 'center' | 'left' | 'right';
   letterSpacing?: number;
+  lineHeight?: number;
+  lineSpacingExtra?: number;
   color?: HexColor;
   shadow?: {
     radius: number;
@@ -67,6 +69,8 @@ export interface TextWidgetStyle extends CommonStyleProps {
   adjustsFontSizeToFit?: boolean;
   textAlign?: 'center' | 'left' | 'right';
   letterSpacing?: number;
+  lineHeight?: number;
+  lineSpacingExtra?: number;
 
   textShadowColor?: ColorProp;
   textShadowRadius?: number;
@@ -112,9 +116,9 @@ TextWidget.convertProps = (props: TextWidgetProps): TextWidgetInternalProps => {
     ...(props.style?.fontStyle ? { fontStyle: props.style.fontStyle } : {}),
     ...(props.style?.fontWeight ? { fontWeight: props.style.fontWeight } : {}),
     ...(props.style?.textAlign ? { textAlign: props.style.textAlign } : {}),
-    ...(props.style?.letterSpacing
-      ? { letterSpacing: props.style.letterSpacing }
-      : {}),
+    ...copyNumberStyleProp(props.style ?? {}, 'letterSpacing'),
+    ...copyNumberStyleProp(props.style ?? {}, 'lineHeight'),
+    ...copyNumberStyleProp(props.style ?? {}, 'lineSpacingExtra'),
     ...(props.style?.adjustsFontSizeToFit
       ? { adjustsFontSizeToFit: props.style.adjustsFontSizeToFit }
       : {}),
@@ -126,6 +130,17 @@ TextWidget.convertProps = (props: TextWidgetProps): TextWidgetInternalProps => {
 };
 TextWidget.__name__ = 'TextWidget';
 
+function copyNumberStyleProp(
+  style: TextWidgetStyle,
+  propName: 'lineHeight' | 'lineSpacingExtra' | 'letterSpacing'
+): Partial<TextWidgetInternalProps> {
+  if (style[propName] !== undefined) {
+    return { [propName]: style[propName] };
+  }
+
+  return {};
+}
+
 function buildTextShadow(
   style: TextWidgetStyle
 ): Partial<TextWidgetInternalProps> {