CODEWITHSUNDEEP
cssreactjsreact-nativeflexbox
SudoPlz
SudoPlz

Reputation: 23323

How to align 2 react native elements, 1 being in the center and 1 on the beginning

Lets assume that we have those react native styles:

var styles = StyleSheet.create({
  parentView:{
    width: 400,
    height:150
  },
  containerView:{
    flex:1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor:'black'
  },
  child1:{
    backgroundColor: 'red',
    alignSelf: 'flex-start'
  },
  child2: {
    backgroundColor: 'yellow'
  }
}

and that we have this render function:

render: function(){
  return(
      <View style={styles.parentView}>
        <View style={styles.containerView}>
          <Text style={styles.child1}>Child1</Text>
          <Text style={styles.child2}>Child2</Text>
        </View>
      </View>
    );  
}

This code produces this image: WRONG

but what I want to achieve is this image: enter image description here

VERY VERY IMPORTANT: I want child2 to be TOTALLY centered within the containerView, and not a bit far to the right because of the space that child1 occupies.

How can I achieve that in react-native?*

p.s.: Keep in mind that this will run on many resolutions (many screens with different aspect ratios) thus, it cannot be set in an absolute way that would result on it only working on "some" screens but not on others.

Upvotes: 4

Views: 5134

Answers (1)

Wesley Gormley
Wesley Gormley

Reputation: 134

not sure if this is the best way to do it, but it works for me 

render() {
    return(
      <View style={styles.parentView}>
      <View style={styles.containerView}>
        <View style={styles.rowContainer}>
          <View style={styles.rowItem}>
            <Text style={styles.child1}>Child1</Text>
          </View>
         <View style={styles.rowItem}>
            <Text style={styles.child2}>Child2</Text>
         </View>
        </View>
      </View>
    </View>
  );

const styles = StyleSheet.create({
  parentView:{
    width: 400,
    height:150
  },
  containerView:{
    flex:1,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor:'black'
  },
  rowContainer: {
    flex: 1,
    flexDirection: 'column',
  },
  rowItem:{
    flex: 1
  },
  child1:{
    backgroundColor: 'red',
    position: 'absolute',
  },
  child2: {
    alignSelf: 'center',
    backgroundColor: 'yellow'
  }
});

Upvotes: 4

Related Questions