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>
Related
I have read the docs but still don't understand how to make the text input scroll to an exact position. I want the text input to automatically scroll to the very top of the screen just below my Header component. Using the following code below, could anyone provide an example of how this is done? Thanks.
<KeyboardAwareScrollView>
<TextInput
style={{
fontSize: 18,
width: "100%",
textAlignVertical: "center",
}}
autoFocus={true}
blurOnSubmit={false}
value={name}
onChangeText={(text: string) => {
setName(text);
}}
/>
</KeyboardAwareScrollView>
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>
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 have a standard Text component in my code.
<Text style={Styles.headerText} numberOfLines={2}>
{this.props.config.mag_screen_title}
</Text>
I am specifying lineHeight in the style.
headerText: {
fontFamily: fonts.gilroyBold,
fontSize: 24,
lineHeight: 25,
},
However, the display does not respect my lineHeight settings. The displayed lineHeight in inspector comes as 31 pixels.
The spec with the correct lineHeight looks like this.
It may be because of using nesting Text. If you want to change lineHeight, you must change style of the parent Text like this:
<Text style={ {lineHeight: 25} }>
Parent Text <Text style={ {fontSize: 24} }>Child Text</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>