I have followed styles:
const styles = StyleSheet.create({
title: {
textDecorationLine: 'underline',
textDecorationStyle: 'solid',
textDecorationColor: '#000'
}
});
and it creates the underline for my content into some Text component. But it seems that this underline is too close to the text decorated with it.
Can I increase this distance in some how?
Thank you for helping!
Wrap your Text in a View that has a style containing borderBottomWidth: 1 or whatever you want the thickness to be.
Give your Text a lineHeight to adjust the spacing between the border and the content. If you have multiple lines of text, then using paddingBottom would also work.
Simple as that really. Bear in mind the View border will stretch to include any padding on the View itself.
As of now that is not possible in React Native, cause it is also not supported in web apps i.e Css.
Link here
But there is a work around to this.
Create react View wrapper over the Text you want to adjust the underline. And then add borderBottomWidth to View and adjust the distance of underline from Text paddingBottom.
const styles = StyleSheet.create({
viewStyle : {
borderBottomWidth: 10, // whatever width you want of underline
}
title: {
paddingBottom: 4, // Adjust the distance from your text view.
}
});
Add the viewStyle to your parentView.
Hope that helps!
According to me, the best possible way to do this is to add a <View /> (without content) after the <Text> and give top-border as you want your underline to be.
For example:
<Text style={{ color: 'blue' }}>Categories</Text>
<View style={{
height: 0, // height is '0' so that the view will not occupy space
width: 100, // as much as you want to 'Stretch' the underline
borderTopColor: 'blue',
borderTopWidth: 2, // 'Thickness' of the underline
marginTop: 15 . // 'Gap' between the content & the underline
}} />
REMEMBER: This will work if the parent of your Text has flexDirection: 'column' (which is default value). But if it has flexDirection: 'row', wrap both the Text & View (i.e. underline) in another view like <View>...</View> so the items will be arranged in a column.
How to give space between text and decoration line in react-native. Refer the attached image
1 with bottom border width and 2 is decoration line
Related
I've currently got a button module, which, based on an array it is given, generates a button with an Image, and Text. However, now that i started adding translations to the buttons, I noticed that some translations for more complex words, are overflowing out of the button, at an inconsistent way.
The bottom left is the standard/default text in English. There is some inconsistency that I've yet to sort out, but it's all style from my understand. I am still learning how styling buttons works.
All the other buttons show what happens when a different language is presented/selected/used. The buttons update the text when language is updated, so they are dynamically refreshed with new text.
Each button is generated like this:
return <button
key={buttonName}
disabled={disabledStatus}
style={this.props.buttonStyle}
onClick={this.handleButtonClick.bind(this, buttonLowerCase)
>
<img src={...} alt={buttonName}
/>
<span style={spacer}/> || This is just {width: '5px'} for seperation||
{buttonText}
</button>;
buttonStyle is passed down with following parameters from the module:
{
width: '100px',
margin: '5px',
height: '38px',
display: 'flex',
alignItems: "center",
justifyContent: "left",
};
what are possible solutions to this? Keeping in mind, that the buttons cannot grow to be a bigger size than they are currently.
I also do notice that spacer does not seem to be respected, if text is larger than given space, now that I look at it, but have no better solution for forming a bit of space from the text at this point.
If you absolutely need to force the content into the space of the button without increasing the button size dynamically to match the text length, here are some options:
Break the words. See: "word-break" css property.
Make the text smaller where needed.
Using import {dimension} from 'react-native' and flex:1 at the same time in css style and for some devices design got broken when there is input field present inside the js. CSS is so simple that's it should not be broken
MainContainer: {
height : Dimensions.get('window').height,
width : Dimensions.get('window').width,
backgroundColor: '#fff',
flex: 1
}
and moreover there is slight 1 px blank space for some android devices.
Earlier when I have started coding with react-native I have faced the same issue while using the same css style.
You should read the documentation first carefully to get idea about flex.
flex will define how your items are going to “fight” over the
available space along your primary axis. Most of the time you will
want your app container to be flex:1 to take all of the screen
height. Space will be divided according to each element flex property.
In the following example the red, yellow and the green views are all
children in the container view that got flex:1. The red view got
flex:1 , the yellow view got flex:2 and the green view got
flex:3 . 1+2+3=6 which means that red view will get 1/6 of the
space, the yellow 2/6 of the space and the red 3/6 of the space. I
think you got it…
To get more clear idea about the above lines please refer to this medium.com's post
And basically we don't use dimension while developing app using react-native .
MainContainer: {
height: '100%',
width: '100%',
backgroundColor: '#fff',
}
This will be enough to design the main container. Also If you are using Input field then I will suggest to use scrollView
I think My answer will help you.
I have a small component and I seem to have an issue with the font size. When the fontSize is 179 the text loads correctly. When the font size is 180 and above it seems to vanish.
return (<View style={{flexDirection:'row'}}>
<Text numberOfLines={1} style={{
textAlignVertical: "center",
fontSize: 179,
textAlign: "center",
backgroundColor:'rgba(0,0,0,0)',
color:'rgba(0,0,0,.3)',
flex: 1,
flexWrap: 'wrap',
}}>A</Text>
</View>);
I can still see the element in dev tools:
Has anybody come across this before?
Am I just missing something?
Thanks, James
You shouldn't have numberOfLines={1} and flexWrap together; They contradict each other.
If you want it the text to wrap around, remove numberOfLines or have it be more than 1.
If you don't want text to wrap remove flex and flexWrap properties from the style object.
What is your goal with those styles? I recommend you start with unstyled (default) styled . Add styles one by one and see what works or doesn't work to give you your desired results.
This same question is previously asked by many people. The issue is that
Image component cannot contain children .If you want to render content on top of an image, consider using the <ImageBackground> component or absolute positioning.
I have referred the article Text Over Image and previous question on stack overflow . Content over image is working using <ImageBackground> component. But how to make it work using <Image> component instead?
Part 1 (Text / Body of your question)
To answer the text/body of your question, the official docs say:
A common feature request from developers familiar with the web is
background-image. To handle this use case, you can use the
<ImageBackground> component, which has the same props as , and
add whatever children to it you would like to layer on top of it.
Thus, <ImageBackground> component is specifically designed for ability to display content over a background image. So, you must use <ImageBackground> component for placing content over an image. This behavior cannot be achieved through <Image> component.
Part 2 (Title of your question)
Now, to answer the TITLE of your question, try this:
<ImageBackground
style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}
source={require('path/to/img')}>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', width: '100%' }}>
<Text>Centered Text (both vertically and horizontally)</Text>
</View>
</ImageBackground>
justifyContent works along primary axis (in this case column/vertical). alignItems works along secondary axis (in this case row/horizontal).
You may not need width: '100%' in child View, but I think that I've experienced some issues a couple of times. So you can experiment with that.
I have a <Text> component that is being passed a style so..
TextFile.js:
<Text style={styles.text}>
This is a line of text and this might be a second line
</Text>
screenFile.js:
<View style={styles.viewContainer}>
<TextFile style={styles.textWithinContainer}>
</View>
textFiles/styles.js:
text: {
fontSize: 20,
color: 'black',
fontWeight: '400',
}
screenFiles/styles.js:
textWithinContainer: {
textAlign: 'center',
}
textAlign within textWithInContainer is not being applied. If I add textAlign: 'center' to styles.text gives me the style I want but it's being used in different screens and I only want it centered in the screenFile. I want the styles from styles.textWithinContainer to override the styles in styles.text. How would I go about this?
You aren't delegating the styles you pass to TextFile to the actual Text element in TextFile. What you can do is add the styles together by passing an array of style objects to apply it:
<Text style={[styles.text, props.style]}>
This is a line of text and this might be a second line
</Text>
From the React Native documentation:
You can also pass an array of styles - the last style in the array has precedence, so you can use this to inherit styles.
Thus, if you pass textAlign in textWithContainer, it'll be applied in the Text component, and it can be reused as you wish without textAlign.
In my initial TextFile, I passed style as an argument, and in the styles array, just used style as the second item in the array.
const TextFile = ({ text, style }) => (
<Text style=([styles.text, style])> {text} </Text>
);
Whenever TextFile gets used, it will apply any styles being given within that component, and/or default to the initial styles it's being given in styles.text.
Thank you #Li357!