I have a simple Text component with a style in my App.
If I add fontweight: 'bold', the last character (sometimes a whole word) disappears.
two sample text components:
<Text style={styles.price}>{priceDisplay(deal.price)}</Text>
<Text style={styles.cause}>{deal.cause.name}</Text>
the styling for these two:
cause: {
fontSize: 14,
fontWeight: 'bold',
},
price: {
fontSize: 16,
textAlign: 'center',
fontWeight: 'bold',
},
without fontweight
with fontweight \
Thanks in advance.
EDIT: The Problem comes from my OnePlus Smartphone which has the OnePlus-Slate font as standard. That font causes the problem. If I change the font in my code to something like 'Roboto', the fontweight bold works.
Here are instructions to change the default font for the project: https://ospfolio.com/two-way-to-change-default-font-family-in-react-native/#why-do-myapp-sometimes-get-texts-cut-off-on-some-android-phone
Alternatively you can just change the font in your phone.
Related
I'm using react-native-render-html 6.3.4, attempting to use custom font, but can't seem to change the font family for 'strong' and 'em' tags. Other attributes are working like font size or font style but not font family.
const html = `<p><strong> Custom font bold.</strong> Regular text font family. </p>`;
<HTML
source={{ html }}
systemFonts={systemFonts}
tagsStyles={{
strong: {
fontFamily: 'PLEC-Regular',
fontStyle: 'italic',
fontSize: 30,
},
}}
/>```
This is how I solved my problem. I don't know why but the fontWeight must be different '700'
<HTML
source={{ html }}
systemFonts={systemFonts}
tagsStyles={{
strong: {
fontFamily: 'PLEC-Regular',
fontStyle: 'italic',
fontSize: 30,
fontWeight:'800',
},
}}
/>
React Native : 0.61.4
If paste formatted text into my TextInput, the styles of TextInput are ignored.
<TextInput
multiline
scrollEnabled={false}
inputAccessoryViewID="reviewButton"
style={{
fontSize: 20,
alignSelf: 'center',
marginHorizontal: '15%',
flex: 1,
textAlignVertical: 'top',
color: 'black',
}}
value={content}
maxLength={200}
onChangeText={changeContent}
/>
I specified the color and fontSize in the style of TextInput, but when I use paste, the color and fontSize are different.
How can I remove Text format when pasting?
It only happens on Android.
After doing some research and try to recreate your case in some famous React native app, I think its can't be possible :)
And btw, in case you haven't notice yet, in Android, there are always two options for pasting including Paste and Paste as plain text.
I am trying to render multiline text Eg. This is my text Read more, where for 'Read more' I am applying a style textDecorationLine: 'underline'. It works fine on Android. But in iOS 13, it works only if the underline text is not in the first line.
I tried to wrap this text in View, but I have to render this text at the end of a text that is obtained from the Server. Any solution?
<Text
style={{
fontSize: 12,
flexWrap: "wrap",
marginHorizontal: 10,
}}
>
{text}
<Text
style={{
textDecorationLine: "underline",
textDecorationStyle: "solid",
}}
onPress={() => {
this.readMore();
}}
>
Read more
</Text>
</Text>
I have the same issue and just found out that this has nothing to do with React Native. It is a font glitch which is also there when you show the font with underline in a native application. It is also unrelated to iOS 13 since it also happens with iOS 11. Though there is a difference between React Native and iOS.
This is the Balto font in React Native:
This is the Balto font in native:
Used font specs:
Family: Balto
Size: 19
Weight: Bold
Style: underline
You didn't specify the color for your text component.
<Text
style={{
textDecorationLine: 'underline',
textDecorationStyle: 'solid',
textDecorationColor: "red",
}}
whatever your text
</Text>
Style object is allowed to style icons.
<Icon name='angle-right' style={{fontSize: 22, fontColor: 'white', fontWeight: '900'}} />
fontSize and fontColor are working as expected, But fontWeight is not working.
Is it natural that fontWeight is not working and is there any way to make it work?
Thanks In Advance.
No You can't, icons don't have font weights
I purchase a theme from AppVaultDesign and it comes with a back button image that looks like this http://cl.ly/2h3x0j0p2v262k0k2U0e
However, when I add it to the code, the alignment looks wrong. The text is too close to the button. http://cl.ly/393s2D0f0v3P0m3H150O
When I tried to use textAlign: 'right', it looks like this http://cl.ly/0Z2d1Y0f3q1O100c0b3f No idea why is like that. Frustrating. It doesn't goes up when I do textAlign: 'center' or textAlign: 'left'.
So here's the code, I'm using. Any help?
var backButton = Ti.UI.createButton({
backgroundImage: 'images/back.png',
font: { fontSize: 13, fontWeight: 'bold' },
height: 28,
title: "Back",
width: 51
});
backButton.addEventListener('click', function(){
navGroup.close(self);
});
self.leftNavButton = backButton;
I think it should be an easy one. It just frustrating that I can't get it working right. It will be much appreciated, if someone can post me the working code for the button and the image. That way, I can try to see where went wrong as well.
Many thanks, Mickey
The simplest way, probably, is to add a whitespace before " Back"
var backButton = Ti.UI.createButton({
backgroundImage: 'images/back.png',
font: { fontSize: 13, fontWeight: 'bold' },
height: 28,
title: " Back",
width: 51
});