I have these two buttons separated by a label acting as a spacer. What settings do I need to put into each’s Position parameters to get them to be the same width and extend to the edges of the flex container?
Set the basis the same on both components. Make sure grow and shrink are the same. Also, rather than using a spacer, I would set a marginLeft and marginRight property on each button to get the spacing you require.
1 Like
To make sure that all components have the same width, they should all have the same grow value and the same shrink value. To enforce this even at smaller sizes, you should also make sure they have the same basis, otherwise they’ll each fill different percentages.
You could also do away with the Label spacer and instead use margin values in the style of the components.
basically exactly what @michael2 said seconds before I pressed “Reply”.
RE the spacer label, if I used margins instead, I would need to set a margin for both buttons, the left one set the right margin and the right button set the left margin, in order to get them centred to the flex container, is that correct? That’s the only reason I went with the label spacer instead, as I didn’t need to then set two margins. Then if I wanted to change the gap between, I’d have to change both margins and I’m lazy 
If you create a custom property on the flex container itself that has the margin you want then you can just bind both to parent.custom.myMargin instead.
But you would still need to set up the properties themselves, ie: RightButton.props.style.marginLeft and LeftButton.props.style.marginRight.
I guess I would just have a Perspective Style called HorizontalMargin and assign it to both, but then you wouldn’t have them flush against the sides (which I think would look better anyway. To each his own, I guess.
1 Like
The flex container is actually in a View that I embed in another View as a “card”, and in the other View is where I apply padding to the whole thing which pulls them away from the sides (as I agree, buttons flush to the sides look bad!).
I’m still learning Perspective however and definitely open to suggestions! I’ll swap over to using the margin style instead as you suggest, as that will help with consistency across the project as well thanks for the tip
Alternatively, you could have the flex container use one of the justify properties and have the buttons just be smaller.
