React Native List of All Text Component CSS Style Props Explained Example

React Native’s Text component has 19 different type of style props in react native latest version 0.57 . Each of them is used to enable a specific type of styling to Text component. So in this tutorial we would going to make a tutorial with all the¬†List of All Text Component CSS Style Props Explained Example Tutorial. So let’s get started ūüôā .

Common Style Props for Both Android & iOS Platforms:

1.¬†textShadowOffset : It is used with 2 objects height and width with Number format and you’ll have to pass the height of shadow and width of shadow. Height is the margin between your main text and the shadow text in vertical manner and the Width is the margin between starting of the text with respect of horizontal manner. It works with¬†textShadowColor and textShadowRadius style props.

2. color : It is used to change the Text component color itself. You can pass here the color code in RGB color format, Hex color code format and also with Named color format.

3. fontSize : It is used to set the Text Font size in Number format.

4. fontStyle : It is used to set the font Style, There are 2 predefined parameters available here normal and italic .

5.¬†fontWeight : It is used to make the font stronger like bold or Strong tag in HTML. It supports¬†‘normal’, ‘bold’, ‘100’, ‘200’, ‘300’, ‘400’, ‘500’, ‘600’, ‘700’, ‘800’, ‘900’ all the values according the font.

6. lineHeight : It specify the height of the complete line of Text component. It supports number value.

7.¬†textAlign : Used to set the alignment of Text component inside text. The supported values are¬†‘auto’, ‘left’, ‘right’, ‘center’, ‘justify’.¬†justify is only supported on iOS devices .

8.¬†textDecorationLine : Used to set the special decoration on Text. Supported values are¬†‘none’, ‘underline’, ‘line-through’, ‘underline line-through’ .

9. textShadowColor : Used to set the Shadow color of Text component. Supported all types of color format RGB, Hex and Named color format.

10. fontFamily : There are almost 100 types of font family types available in react native. Click here to see List of all font family types.

11. textShadowRadius : It is used to radius of Text shadow. Supported number format.

12.¬†textTransform : Used to set the transformation of text component. Supported values are¬†‘none’, ‘uppercase’, ‘lowercase’, ‘capitalize’ .

Note : It is currently not working, i have tried in both devices, I thing there is a issue with this style pros. If you know how this will works please let me know in comment box.

Style Props for Android Platform :

1. includeFontPadding : Set to false to remove extra font padding in both directions.

2.¬†textAlignVertical : Used to set the alignment of text component in vertical format. Supported values are¬†‘auto’, ‘top’, ‘bottom’, ‘center’ .

Style Props for iOS Platform :

1.¬†fontVariant : Used with¬†‘small-caps’, ‘oldstyle-nums’, ‘lining-nums’, ‘tabular-nums’, ‘proportional-nums’ parameters.

2. letterSpacing : Used to give spacing between each letter, Support number type.

3. textDecorationColor : Used to set Text decoration color. Support all types of color format.

4.¬†textDecorationStyle : Used to set Text decoration style. Supported parameter is¬†‘solid’, ‘double’, ‘dotted’, ‘dashed’ .

5.¬†writingDirection : Used to set writing direction for Text component. Supported parameter is¬†‘auto’, ‘ltr’, ‘rtl’ .

Here you go now all the 19 Text style props is done. Now its time to start coding ūüôā .

List of All Text Component CSS Style Props Explained Example Tutorial :

1. Import StyleSheet, View and Text component in your project.

2. Create a Root View component in render’s return block and inside the root view put a Sample text component.

3. Creating Style.

4. Complete source code for App.js File :

Screenshot:

List of All Text Component CSS Style Props Explained

Leave a Reply

Your email address will not be published. Required fields are marked *