I have a view with text inside it. I'd like the text to stretch and touch the edges of the view.
<View style={{backgroundColor: "lightblue"}}>
<Text style={{fontSize: 55}}>
{totalBalance}
</Text>
</View>
I've tried adding flex: 1, height:'100%', adjustsFontSizeToFit={true}, and includeFontPadding:false (although this seems to be android only, and I'm testing on IOS) to the text style, but none of these things have worked.
If I add backgroundColor: red to the text element, the background covers the whole view, but the font doesn't. This makes me think that the font might have some sort of padding?
Is there any way I can make the $0 in the image stretch to touch the edges of the blue view?
Related
I am attempting to make some buttons on a react application by using touchable opacity. However I am finding an issue when I try and size the button, for instance: when I set the width of the button, the entire left and right to the end of the screen remains clickable even though the button is a much smaller region. Same happens if I try and add a margin, it'll set the vertical click zone above and below the button clickable for that corresponding margin amount.
<View style={styles.button}>
<View style={[{backgroundColor: props.color}, {height: 100},
{width: "70%"}, {margin: 10}]}>
<Text style={styles.text}>{props.text}</Text>
</View>
</View>
)
return<TouchableOpacity onPress={props.onPress}>{content}</TouchableOpacity>
By default every element has alignSelf set as 'stretch'. Add see if changing it to 'flex-start' helps.
<TouchableOpacity style={{alignSelf: 'flex-start'}}>
...
</TouchableOpacity>
If you are using react native version >= 0.63, then use Pressable component instead. It's more powerful, it provide hitSlop prop to adjust the pressable area of the button.
https://reactnative.dev/docs/pressable
I am working with Material-UI tabs. Thanks for the help of others in the threat at Creating a Material-UI tab with image tabs instead of text labels, I was able to get images working for my tabs but I cannot control the width of the tabs no matter how small I make the images - the tabs do grow in width if I make the images larger.
I have a Code SandBox at https://codesandbox.io/s/lucid-stonebraker-q1r4v?file=/src/App.js that demonstrates the problem.
I did manage to set the width of the tabs using inline styles but it just clipped the content to the right rather than centering the image in the narrower tab.
Without the inline style, there is a responsive breakpoint at about 600 pixels. Below the breakpoint, the tab width is about 72 pixels. Larger than the breakpoint, the tab width is about 160. I just guessed these numbers by measuring a different browser window and overlying this app on it. If I do manually force the width with the inline style, I can see that the image location still moves at the breakpoint as though the underlying width that the images are centering to is the original tab width as though I hadn't forced the width.
I settled on these exact numbers of width because the visual measurement matched very close to two min-width numbers in the Material-UI tab.js source code. It could be coincidence. I actually did try changing those in the source code and testing again but they had no effect on the breakpoint behavior so I put the file back to original.
If it's at all possible, I'd like to be able to set the width to my own needs, set margins/padding to my own needs, and still have the images centered in the result.
Ciao, to center the image on Tab you have to pass a style to flexContainerVertical class on Tabs in this way:
<Tabs
orientation="vertical"
value={value}
onChange={handleChange}
aria-label="Vertical tabs example"
className={classes.tabs}
classes={{
flexContainerVertical: classes.flexContainerVertical // pass the class flexContainerVertical
}}
>
Then on your makeStyles:
const useStyles = makeStyles((theme) => ({
...
flexContainerVertical: {
display: "flex",
alignItems: "center",
}
}));
And Tab images will appear on center of the Tab.
Here your codesandbox modified.
This post is very close but I do have a different situation: How to Horizontally Center React Native Flexbox Text that Wraps across Multiple Lines
I am trying to style my text like this: and in order to get the two different text styles to wrap to a second line like that I read I had to wrap the two of them in a <Text> container like so:
<Text style={textAlign="center"}>
<Text style={[ {color: colors.mustardYellow, fontSize: 30, textAlign:"center"}, textStyles.Bold]}>Hey! </Text>
<Text style={[ {color: colors.white, fontWeight: "100", fontSize: 30, textAlign:"center"}]}>How are you feeling today?</Text>
</Text>
This worked and lets the second text components wrap under the first one. HOWEVER, it refuses to center itself horizontally on the second line. I tried adding another container around the greater <text> component container but did not find any success there either. The only way I was able to make it work was with creating 3 separate text components, one for the yellow text, a second for "How are you" on the first line and a final one for the "feeling today?" on the second line which I was able to center horizontally. This is an awful way to do things and I'm sure there is a right way but for the life of me I cannot find it.
Any help would be greatly appreciated!
On your first Text tag your style prop sould be style={{textAlign: "center"}} instead of style={textAlign="center"}.
Here's an Expo Snack with working code.
I'm working on a quiz app. In which users select an option based on his confidence so for that I decided to make three boxes in each option using touchable opacity and its working fine but I want to have text behind these boxes that I failed to achieve yet. Here is my code
Note: This "Style" contains style objects for the app.
<View style={[ Style.flexRow, Style.marginV5, Style.borderRadius20, Style.paddingDefault, Style.bgLight ]}>
<Text>Ajax</Text>
<TouchableOpacity style={[ Style.flex, Style.borderRight, Style.height100, Style.borderLeft ]}>
</TouchableOpacity>
<TouchableOpacity style={[ Style.flex, Style.borderRight, Style.height100, Style.borderLeft ]}>
</TouchableOpacity>
<TouchableOpacity style={[ Style.flex, Style.borderRight, Style.height100, Style.borderLeft ]}>
</TouchableOpacity>
</View>
One way is to do that is to make text position absolute but after that, it is impossible to change the height of the parent dynamically according to text size. Please help me to solve this issue or suggest me if you know any better solution than this. Thanks!
Instead of setting the text as absolute, you could put the TouchableOpacity boxes inside a flex container and set the container to absolute instead. This would allow the text size to control the height of the box, while allowing you to add as many boxes as you like in front of the text.
See my example here:
https://codepen.io/sungaila/pen/oQpPQq
You can give negative margin values to other elements.
Since you have Text component hierarchically in the first order, you should set TouchableOpacity's margin to a negative value.
<Text>Ajax</Text>
<TouchableOpacity style={{marginTop: -100}}
This way, TouchableOpacity will move 100 unit upwards, and overlay the Text element.
I have a tableview row like the below.
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<Text>{user.fullName}</Text>
<Button/>
</View>
Above renders so that name sticks to the left and button sticks to the right.
-----------------------------------
User's Full Name Button
-----------------------------------
It's all good when user's full name is short enough.
However, when user's name is long.
This is how it looks.
-----------------------------------
User's Very Very Long Full Name Button
-----------------------------------
Now, the row content overflows the row's width and button goes out of the screen and becomes invisible.
What I want is this.
-----------------------------------
User's Very Very Long... Button
-----------------------------------
How do I achieve this with flexbox model?
How do I make the name to grow and fill the available width, but not exceed?
Note that Button can grow or shrink based on the local state.
Also, is there equivalent of text-overflow: ellipsis on react-native?
You can set flex:1 on the Text to grow relative to the remaining flex items(Button here). There is no flex set on Button, it will occupy as much space it needs. See numberOfLines docs. You can set it to 1 to make the text ellipsize
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<Text numberOfLines={1} style={{flex:1}}>{user.fullName}</Text>
<Button/>
</View>
I had a very similar issue and fixed it by adding this to the view containing the text. Then the ellipsis showed up and the text no longer overflows.
flexShrink: 1
Source