flexBasis property can be used in RN. And yes we can give pixel as well as % values for flexBasis property. Pixel values can be given for this and its straight forward, percentage value can also be given using points like 0.4 defines 40% of the parent.
We can also use Dimensions of RN(import Dimensions from RN), like
const deviceWidth = Dimensions.get('window').width;
and can be used in styling like
const styles = StyleSheet.create({
parent: {
width: deviceWidth,
},
child: {
width: deviceWidth * 0.5, // 50% of the parent
}
});
Similarly like width property used above, we can also give the same values for flexBasis property.
Here is the simple solution for your expected layout.
<View>
{/* first row */}
<View style={styles.numbersRow}>
<Text style={styles.numberText}>1</Text>
<Text style={styles.numberText}>2</Text>
</View>
{/* second row */}
<View style={styles.numbersRow}>
<Text style={styles.numberText}>3</Text>
<Text style={styles.numberText}>4</Text>
</View>
</View>
styling part:
const styles = StyleSheet.create({
numbersRow: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-around', // to adjust the spacing
marginTop: 30,
},
numberText: {
flex: 0.4, // 40% of the parent
paddingVertical: 30, // 30px padding from top and bottom makes it vertically centered
borderRadius: 8,
textAlign: 'center', // horizontally centered
backgroundColor: '#000',
color: '#fff',
fontSize: 30,
}
});
Also refer the npm package for better styling https://github.com/vitalets/react-native-extended-stylesheet, includes %, rem units and media queries as well and various features.