I'm trying to make a text component with a color background and very thin padding. Like this:
However, the RN Text component has some sort of extra padding at the bottom that I don't know how to remove (and I don't know how this kind of text padding is called).
I tried setting lineHeight to the same as the fontSize, setting negative padding and margin, but the padding is always there.
Here is what I get:
fontSize: 50, lineHeight: 50
fontSize: 50, lineHeight: 40
This is happening on both iOS and Android. How to remove it???
This is my text component for reference:
<Text style={{
backgroundColor: someDarkGreen;
color: cyan;
fontSize: 50;
lineHeight: 50;
textTransform: uppercase;
fontWeight: bold;
paddingHorizontal: 10;
alignSelf: flex-start;
marginBottom: 30;
marginLeft: 30;
}}
/>
1. Add StyleSheet, View, Button and Text component in your project. 2. Create a State named as Text_Padding in constructor (). We would use this State to set padding on Text component. constructor () { super (); this.state= { //default padding.
By default we can set padding using Style’s padding property, but in this tutorial we would going to set Padding dynamically on text component on button click in both Android and iOS devices in react native application. 1. Add StyleSheet, View, Button and Text component in your project.
Open App.js in any code editor and replace the code with the following code Open the terminal again and jump into your project using. To run the project on an Android Virtual Device or on real debugging device This is how you can remove TextInput Underline in React Native.
In React Native, we are more strict about it: you must wrap all the text nodes inside of a <Text> component. You cannot have a text node directly under a <View>. You also lose the ability to set up a default font for an entire subtree. Meanwhile, fontFamily only accepts a single font name, which is different from font-family in CSS.
I still don't have a "clean answer" for my question, but since it's continuously getting upvotes I'll share my workaround.
I wrap the <Text>
in a <View>
, and put the background style on the View. Then I translateY
the Text so it appears centered on the View background:
<View
style={{
backgroundColor: 'purple',
paddingHorizontal: 10,
height: 50, // <------------------------- adjust background height here
}}
>
<Text
style={{
color: 'pink',
fontSize: 50,
lineHeight: 50,
textTransform: 'uppercase',
fontWeight: 'bold',
alignSelf: 'flex-start',
transform: [{ translateY: 5 }], // <----- adjust text position here
}}
>
Hello
</Text>
</View>
Note: Using marginTop: 5
instead of transform: [{ translateY: 5 }]
to adjust the Text position also works, as long as the View has a fixed height.
This allows to have the thin vertical padding effect I was looking for when I originally posted the question. It looks nice on both iOS and Android:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With