I put two items (e.g. two buttons) in one row. I want to align the first item left, and align the second item right, which looks like:
How to achieve this in react native using flex?
After some digging, I found there're two easy ways to achieve this:
// first way
<View style={{flexDirection: "row", justifyContent: "space-between"}}>
<Button>B1</Button> // align left
<Button>B2</Button> // align right
</View>
// second way
<View style={{flexDirection: "row"}}>
<Button>B1</Button> // align left
<Button style={{marginLeft: "auto"}}>B2</Button> // align right
</View>
to do this, use space-between. If the container has a width larger than the 2 buttons, you'll see one on the left, one on the right
doc
Related
I want to decrease the space after end of the line in the Label (UI5 Web components), so the Label would be like here below, but it's border should be immediately after longest line of text. The Icon and Label are wrapped by FlexBox with only alignItems and justifyContent set.
screen
From all solutions I've tried and found the closest one was width: "min-content" on Label. It kinda works, but creates ugly layout, with text spread across multiple lines. It cannot be without text wrap.
//ColumnHeader
return (
<FlexBox
alignItems={FlexBoxAlignItems.Center}
justifyContent={FlexBoxJustifyContent.Start}
style={{
border: "solid",
}}>
<Label
required={required}
wrappingType={WrappingType.Normal}
style={{marginRight: "5px",}}
>
{columnTitle}
</Label>
{tooltipMessage && <HeaderTooltip tooltipMessage={tooltipMessage}/>}
{sortButtons && <>{sortButtons}</>}
</FlexBox>
);
It's inside TableColumn (UI Web Components) with only property set being: style={{width: 10%}}
I am using react native 0.57. I want to make 2D Grid for non-fixed width and fixed height boxes by using Flatlist. Something like grid show be free to adjust the number of columns according to the screen size. I am unable to implement it.
I can use fixed column but I want my grid to ajust per the device width. The box width can be unpredictable depending upon the text between them. Thanks in advance
Example: In gmail:
You can use flex property , and a width of null.
assuming you have a renderitem function and a max of 4 columns, you will need to have some "dummy items" in your flatlist data
<FlatList
style={{flex:1}}
data={[1,2,3,4,dummy,dummy,3,4,1,2,dummy,dummy]}
renderItem={this.renderItem}
numColumns={4}
/>
renderItem = ({ item, index }) => {
if(item==='dummy'){return <View/>}
return (
<View style={{height:100,width:null,flex:1,backgroundcolor:'red'}}/>
);
};
use flex 1 to fill "dummy" space or flex 1/2 to fill half of the screen , etc.
Go to https://snack.expo.io/HJV601djf and open login_screen/components/Form.js. As you can see, the textInput has the style
textInput: {
flex:1,
height: 50,
marginBottom: 20
}
You can see that the user icons are not aligned with the text input. If I take marginBottom out, everything goes ok, but with marginBottom: 20 the icons get dealigned. I can probably fix that by making the text input get aligned vertically too, but I'll not know the cause of the problem.
How can marginBottom affect the insides of UserInput if it's supposed to add space only on the outside?
Printscreen if you don't want to wait to load the app:
This is happening because , in your UserInput.js, you are trying to merge the styles for the textInput while the Image / Icon styles are remaining the same, therefore it is misaligned.
The optimum way to solve this would be to add a textInputContainer style to the component and set the margin to it as
TextInput.js
<View style={mergeObjects(this.props.containerStyle ? StyleSheet.flatten(this.props.containerStyle) : {}, StyleSheet.flatten(styles.inputWrapper))}>
Form.js
<UserInput
containerStyle={styles.textInputContainer}
style={styles.textInput}
source={{uri:'http://www.free-icons-download.net/images/user-icon-74490.png'}}
placeholder="e-mail"
autoCapitalize={'none'}
returnKeyType={'done'}
autoCorrect={false}
/>
and the styles
textInputContainer : {
marginBottom: 20
},
Here's the snack for the same
I have text and image in one row. and now I want to put button over the row with exact size of row.
used flexDirection: 'row'
Any help?
You can wrap your text and image inside the TouchableOpacity component
<TouchableOpacity onPress={() => doYourThing()}>
<Text>{yourText}</Text>
<Image source={{}} />
</TouchableOpacity>
If the text and image are already wrapped in a View, you can just replace the View component with the TouchableOpacity component. It takes all the props which View takes.
I have a text element inside a view:
<View><Text>hello world foo bar</Text></View>
as part of a flex grid.
I want this view to have an auto width based on the content i.e. length of the text.
How do I achieve this?
You can achieve this if element will have alignSelf property, like:
alignSelf: 'flex-start'
or
alignSelf: 'center'
you can always set minWidth: some width and then align it to the center