After much trial and error, I finally discovered the correct method for achieving fixed size items in a flex layout. Instead of using width/height properties, one should utilize flex: 0 and flexBasis. Initially, this approach didn't yield the desired results due to an issue with sizing in a parent component affecting the flex rendering. It appears that flexBasis behaves like density-independent pixels when set to a specific number.
Check out the proof of concept on expo.io
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
export default class App extends Component {
render() {
return (
<View>
<Text>Test</Text>
<View style={styles.container}>
<Text style={styles.text1}>{"Left\nText"}</Text>
<View style={styles.view} />
<Text style={styles.text2}>Test</Text>
</View>
<View style={styles.container}>
<Text style={styles.text1}>{"Left\nText"}</Text>
<View style={styles.view} />
<Text style={styles.text2}>Test</Text>
</View>
<View style={styles.container}>
<Text style={styles.text1}>{"Left\nText"}</Text>
<View style={styles.view} />
<Text style={styles.text2}>Test</Text>
</View>
<Text>Test</Text>
<View style={styles.container}>
<Text style={styles.text1}>{"Left\nText"}</Text>
<View style={styles.view} />
<Text style={styles.text2}>Test</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: "row",
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
view: {
flex: 0,
flexBasis: 50,
height: 50,
backgroundColor: "red",
},
text1: {
flex: 1,
textAlign: "right",
paddingRight: 10,
},
text2: {
flex: 1,
textAlign: "left",
paddingLeft: 10,
}
});