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>
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 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 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'm trying to create an image with a text on it, and in order for the the text to be clearly seen I need to make the image darker.
Also (don't sure if it matters or not) I need the background image to be touchable.
This question was asked several times here and I've seen some answers, but none of them worked for me, so I'm wondering if I'm missing something more crucial here.
My code is the following:
<View style={postStyles.container}>
<TouchableOpacity onPress={() =>
this.props.navigation.navigate('AnotherWindow')}>
<ImageBackground source={require('../../assets/images/my_img.jpg')}
style={{width: '100%', height: 150}}>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</ImageBackground></TouchableOpacity>
From looking around here, I've tried the following solutions:
Tried to wrap the text element inside the imagebackground tag inside a
View element that has a style property of "backgroundColor" with value of 'rgba(255,0,0,0.5)' (also tried different values),
Tried to add this backgroundColor property to the styles of both the container itself, the TouchableOpacity element
Tried to above two solutions with the "elevation" property instead of backgroundColor (I work in Android).
None of the above solutions worked, in a sense that the background image didn't change at all, so I'm wondering if I'm missing something more crucial.
Thanks!
If anyone still having problems with the ImageBackground component, this is how i solved it, basically i set a view inside the image background which has the backgroundColor that darkens the image.
<ImageBackground
source={Images.background}
style={styles.imageBackground}
>
<View style={styles.innerContainer}>
{content}
</View>
</ImageBackground>
const styles = StyleSheet.create({
imageBackground: {
height: '100%',
width: '100%'
},
innerContainer: {
flex: 1,
backgroundColor: 'rgba(0,0,0, 0.60)'
},
});
if you want to make the image darker, you'll need the Image component and use the tintColor prop like:
<Image source={require('./your_image.png')} style={{ tintColor: 'cyan' }}>
this tintColor prop only works for Image component not ImageBackground, also if you want to add a text on the Image component, you'll need to positioning that text with position: 'absolute' or 'relative'
<View style={postStyles.container}>
<TouchableOpacity
onPress={() => his.props.navigation.navigate('AnotherWindow')}>}
>
<Image
source={require('./my_image.png')}
resizeMode="contain"
style={{ width: '100%', height: 150, tintColor: 'cyan' }}
/>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</TouchableOpacity>
</View>
Also, if you implement this approach you'll need to calculate the dimensions of the screen for each device, well you'll need to check this other component from react-native: https://facebook.github.io/react-native/docs/dimensions
Please, let me know if this works :D
You should just add tintColor to ImageBackground imageStyle and you're done. easy peasy!
<TouchableOpacity onPress={() => this.props.navigation.navigate('AnotherWindow')}>
<ImageBackground source={require('../../assets/images/my_img.jpg')}
style={{width: '100%', height: 150}}
imageStyle={{tintColor: 'rgba(255,0,0,0.5)'}}>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</ImageBackground>
</TouchableOpacity>
It's basically the search bar component from react-native-elements where the container background color is white and the placeholder field has a border with radius.
Not sure if react-native-element allows providing style to placeholder.
Any other way i could use style along with react-native-elements search bar component to get this result?
You need to modify the input and container styles
<SearchBar
inputStyle={{backgroundColor: 'white'}}
containerStyle={{backgroundColor: 'white', borderWidth: 1, borderRadius: 5}}
placeholderTextColor={'#g5g5g5'}
placeholder={'Pritish Vaidya'}
/>
Check the docs for more props and you can supply your own Icon
I made a combination of the answers here
<SearchBar
inputStyle={{backgroundColor: 'white'}}
containerStyle={{backgroundColor: 'white', borderWidth: 1, borderRadius: 5}}
inputContainerStyle={{backgroundColor: 'white'}}
placeholderTextColor={'#g5g5g5'}
placeholder={'Pritish Vaidya'}
/>