Alignement support ?

[martinezguillaume]

Hello, I saw in native-base docs that we can use this lib to align components :

No more worries about props of Flexbox such as alignItems, flexDirection, justifyContent, margin, padding, position, width etc.

However, I don't see anything related to alignement (like alignItems or justifyContent) to center component... Thanks for your help !

[ironforward]

+1 I was checking this out today as well and found a stack overflow answer about it, not sure if that's an intended way to do it or a hacky work-around, but I figured I'd share it with you.

here's an example of flex-ending two rows in a column too, since that's what I was trying to figure out how to do (and would love to know if there was a good way to do it without using flex properties).

render() {
    return (
      <Container>
        <Content contentContainerStyle={{flex: 1}}>
          <Grid style={{alignItems: 'flex-end'}}>
            <Col>
              <Row style={{backgroundColor: '#D954D7', height: 100}}></Row>
              <Row style={{backgroundColor: '#D93735', height: 100}}></Row>
            </Col>
          </Grid>
        </Content>
      </Container>
    );
  }

[martinezguillaume]

Yes, I think that too... Or maybe Col & Row is just used in a more "container" level, just to manage your main view component. Then, you use simple view with flex attribute for alignements... I'm a little surprised that we don't have any docs for that...

I saw the demo app of react-native-elements (they had implemented their own Grid, Col, Row based on this repo) and they explicitly use flex attributes. So I think that's the good pattern

[SupriyaKalghatgi]

The ReadMe of Easy-Grid includes the possible combination of examples.
The ReadMe also mentions about NativeBase, which explains easy Grid in brief.

Check Layout in NativeBase Docs

[yangzhou15]

Inside "Row" component wrap "Text" with < View style={{ flex: 1 }} >, then style < Text > with TextAlign: <Text style={{ textAlign: 'right' }}>
Below is my working code. It has additional function/style not related to this topic but I think it's cool to leave it.

import { View, Text, TouchableHighlight } from 'react-native';
import { Grid, Col, Row } from 'react-native-easy-grid';
import FontAwesome, { Icons } from 'react-native-fontawesome';

...

  <Grid>
        <Col size={2} >
        <Row size={1} style={{backgroundColor: '#635DB7'}} ><Text>Up Left</Text ></Row >
        <Row size={1} style={{backgroundColor: '#00CE9F'}} ><Text>Down Left</Text ></Row >
        </Col>
        <Col size={1} style={{ backgroundColor: 'orange' }}>
          <TouchableHighlight onPress={onPress}>
             <View style={{ alignItems: 'center' }}>
             <FontAwesome style={{ fontSize: 40 }} >
               {Icons.lock}
             </FontAwesome>
             </View>
         </TouchableHighlight>
        </Col>
        <Col size={2} >
          <Row size={1} style={{backgroundColor: '#635DB7'}} ><View style={{ flex: 1 }}><Text style={{ textAlign: 'right' }}>Up Right</Text></View></Row >
          <Row size={1} style={{backgroundColor: '#00CE9F'}} ><View style={{ flex: 1 }}><Text style={{ textAlign: 'right' }}>Down Right</Text ></View></Row >
        </Col>
      </Grid>