Problem:
I have font separated to 2 files, like "XSansRegular.ttf" and "XSansBold.ttf", both has same font family, like "X Sans".
I have added it as assets.
But when I'm trying to use them with setting:
style={{
fontFamily: "X Sans"
}}
it doesn't work. I need to use exact file name, like this:
style={{
fontFamily: "XSansRegular"
}}
What I want to do:
Use it with font name, instead of file name
style={{
fontFamily: "X Sans"
}}
with possibility to pass there props like bold
style={{
fontFamily: "X Sans",
fontWeight: 'bold'
}}
Do you have the linked font files ?
If your react-native version >= 0.70，Run npx react-native-asset to link font files and try again.
Related
I am using react native custom fonts and there is an issue with that. with default the text is on center and when I use a Font then text has not on center.
here is code.
<TextInput
style={{
height:40,
width:width-10,
margin:5,
backgroundColor:"#eee",
borderRadius:5,
paddingLeft:20,
fontFamily:FONTS.medium // if I comment this line then placeholder and text input is on center.
}}
placeholder="Search Here"
/>
Image with default fonts
note: I have checked it with multiple fonts and have same issue.
Try if the prop includeFontPadding or lineHeight remove the spacing.
<Text
style={{
backgroundColor: 'red',
//lineHeight: 92,
fontSize: 24,
color: '#000000',
fontFamily: 'Roboto-Regular',
includeFontPadding: false}}>
Search Here
</Text>
If this don’t work check the font itself has a spacing. Open the font file *.ttf and check if the the text has a big spacing.
use includeFontPadding attribute, it will remove the default space
<Text style={{
includeFontPadding: false
}}>
Search Here
</Text>
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.
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>
I just created a new React Native project and was working on the UI bit. I tried to write some text within <Text>Hello world!</Text> and it was working fine:
Hello world!
But when I added fontWeight: 'bold' to the same, it truncated and showed something like this:
Hel..
I've only tested this in android.
My React project version details:
react-native-cli: 2.0.1
react-native: 0.52.0
I have no idea why the text is truncating itself. Is this a known issue in the 0.52.0 because I've been using the same method to set text bold and the issue never occurred in 0.48.2
EDIT:
I just realized, this happens when I have inside a with a style property alignItems: 'center' . I have no idea why this still happens though. Here's my code:
<View style={{alignItems:'center'}}>
<Text style={{fontWeight: 'bold'}}>Helloworld!</Text>
</View>
Thanks!
my coworker had the same problem, we solved by changing the font (through font-family). Most probably a bug from react...
You can use flex:1 and flexDirection:"column" at view level style if you want your content to come line by line. like this:-
<View style={{flex:1, flexDirection:"column"}}>
<Text style={{fontWeight: 'bold'}}>Helloworld!</Text>
</View>
or if you don't want to use flexDirection then you can use alignSelf: 'stretch', textAlign: 'center'. like this:-
<View style={{ alignSelf: 'stretch', textAlign: 'center'}}>
<Text style={{fontWeight: 'bold'}}>Helloworld!</Text>
</View>
You can use flexGrow:1 on the Text element, e.g.:
<Text style={{flexGrow:1, fontWeight:'bold'}}> General Checkup </Text>