Feat/text add underline

demo/src/screens/componentScreens/TextScreen.js → demo/src/screens/componentScreens/TextScreen.tsx

@@ -3,9 +3,8 @@ import {Animated, ScrollView} from 'react-native';
 import {View, Text, Colors} from 'react-native-ui-lib';
 
 class TextScreen extends Component {
-  state = {};
-  toggle = false;
-  animatedValue = new Animated.Value(0);
+  private toggle = false;
+  private animatedValue = new Animated.Value(0);
 
   animate = () => {
     this.toggle = !this.toggle;
@@ -89,6 +88,7 @@ class TextScreen extends Component {
             <Text
               text70
               animated
+              // @ts-expect-error
               style={{transform: [{scale: this.animatedValue.interpolate({inputRange: [0, 1], outputRange: [1, 2]})}]}}
               onPress={this.animate}
             >

generatedTypes/src/components/text/index.d.ts

@@ -7,13 +7,17 @@ export declare type TextProps = RNTextProps & TypographyModifiers & ColorsModifi
      */
     color?: string;
     /**
-     * whether to center the text (using textAlign)
+     * Whether to center the text (using textAlign)
      */
     center?: boolean;
     /**
-     * whether to change the text to uppercase
+     * Whether to change the text to uppercase
      */
     uppercase?: boolean;
+    /**
+     * Whether to add an underline
+     */
+    underline?: boolean;
     /**
      * Substring to highlight
      */

src/components/text/index.tsx

@@ -22,13 +22,17 @@ export type TextProps = RNTextProps &
      */
     color?: string;
     /**
-     * whether to center the text (using textAlign)
+     * Whether to center the text (using textAlign)
      */
     center?: boolean;
     /**
-     * whether to change the text to uppercase
+     * Whether to change the text to uppercase
      */
     uppercase?: boolean;
+    /**
+     * Whether to add an underline
+     */
+    underline?: boolean;
     /**
      * Substring to highlight
      */
@@ -97,7 +101,7 @@ class Text extends PureComponent<PropsTypes> {
   }
 
   render() {
-    const {modifiers, style, center, uppercase, children, forwardedRef, ...others} = this.props;
+    const {modifiers, style, center, uppercase, underline, children, forwardedRef, ...others} = this.props;
     const color = this.props.color || modifiers.color;
     const {margins, typography, backgroundColor, flexStyle} = modifiers;
     const textStyle = [
@@ -109,6 +113,7 @@ class Text extends PureComponent<PropsTypes> {
       margins,
       center && styles.centered,
       uppercase && styles.uppercase,
+      underline && styles.underline,
       style
     ];
 
@@ -133,6 +138,9 @@ const styles = StyleSheet.create({
   uppercase: {
     textTransform: 'uppercase'
   },
+  underline: {
+    textDecorationLine: 'underline'
+  },
   highlight: {
     color: Colors.grey30
   },

src/components/text/text.api.json

@@ -13,6 +13,7 @@
     {"name": "color", "type": "string", "description": "Color of the text"},
     {"name": "center", "type": "boolean", "description": "Whether to center the text (using textAlign)"},
     {"name": "uppercase", "type": "boolean", "description": "Whether to change the text to uppercase"},
+    {"name": "underline", "type": "boolean", "description": "Whether to add an underline"},
     {"name": "highlightString", "type": "string | string[]", "description": "Substring to highlight"},
     {"name": "highlightStyle", "type": "TextStyle", "description": "Custom highlight style for highlight string"},
     {"name": "animated", "type": "boolean", "description": "Use Animated.Text as a container"}