I'm trying to achieve the following design in React Native -
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
export default function App() {
return (
<View style={styles.container}>
<View style={{flexDirection:'row'}} >
<View style={styles.eachRow} />
<View style={styles.eachRow} />
<View style={styles.eachRow} />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
eachRow:{
flex:1,
backgroundColor:'blue',
borderRightWidth:2,
borderLeftWidth:2,
borderColor:'pink',
height:50
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});