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:

but what I want to achieve is this image:

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.