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
Related
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?
I'm trying to get the chart to extend to the bottom only. I tried using a column flex box with height="100vh". However, it's overflowing the screen.
<Flex direction="column" height="100vh">
<Flex flex="1" direction="row">
<div>123456789010 </div>
<Box flex="1">
<div>| 123</div>
<div>| 123</div>
<div>| 123</div>
<div>| 123</div>
<div>| 123</div>
<ThreeDataPoint />
</Box>
</Flex>
</Flex>
I notice that it'll work if I don't have any text above the chart. However, when I put anything above, it will cause it to overflow. It seems to be because the flexbox doesn't notice there's anything above, and is sizing the chart as if there's nothing there.
What could be occurring?
CODESANDBOX HERE
Try configuring the props of your react-financial-charts components.
The auto-sizing behavior of your react-financial-charts package seems to be causing this issue.
When inspecting the page in the browser, you’ll notice that your .react-financial-charts element has a hardcoded height equal to the height of the browser viewport. I had a look at this component with React Developer Tools in Chrome, and it seems to contain an AutoSizer component that may be causing this issue.
You export your BasicLineSeries component this way:
export default withSize({ style: { minHeight: 0 } })(
withDeviceRatio()(BasicLineSeries)
);
So my guess would be that withSize creates AutoSizer, which by default will resize the component to the size of the browser viewport.
The solution would then be to check the documentation for this package and figure out which props you need to use to tell it not to resize automatically.
One solution is to simply add overflow="hidden" prop to your Flex component like this : <Flex direction="column" height="100vh" overflow="hidden">
So imagine we want to have an image inside a TouchableOpacity button.
The image is slightly taller then the button and we want it to overflow. Currently the image gets clipped just before the top. I am debugging on Android.
How can I get an image to overflow a button in react native?
Use absolute position with image :
<TouchableOpacity>
<Text></Text>
<Image style={{position:'absolute', width:.., height:.., left:.., top:..}}/>
</TouchableOpacity>
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