Consider the following 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'
}
}
Now, let's look at 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>
);
}
The code currently generates this image: https://i.sstatic.net/EpW1M.png
However, the desired output is shown in this image: https://i.sstatic.net/SKVU2.jpg
In order to achieve this layout, it is crucial that child2 is perfectly centered within containerView, without being offset due to the space taken by child1.
How can we attain this in a responsive way in React Native?
p.s.: Remember that this will be displayed on various screen resolutions and aspect ratios, so a solution that works universally across different devices is needed.