Multiple Rows Within Container - Flex - React-Native - css

Question

First, I can't seem to set up a CodeSandBox - the following code in the index.js file just renders a blank screen: https://codesandbox.io/s/q4qymyp2l6
import React, { Component } from 'react';
import { View } from 'react-native';
export default class JustifyContentBasics extends Component {
render() {
return (
// Try setting `justifyContent` to `center`.
// Try setting `flexDirection` to `row`.
<View style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
}}>
<View style={{flex: 1, flexDirection: 'row', height: 50, backgroundColor: 'powderblue'}} />
<View style={{flex: 1, flexDirection: 'row', height: 50, backgroundColor: 'skyblue'}} />
<View style={{flex: 1, flexDirection: 'row', height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
};
But - if you copy and paste this code into the React-Native flexbox docs:
https://facebook.github.io/react-native/docs/flexbox
(first code sample under "LEARN MORE HERE") It will render three columns within a row.
I'm not understanding why. I've declared that the Views are rows with flexDirection: 'row', and they each get flex: 1, so I'd expect three equally sized rows.
With Bootstrap you can just declare a row within a container like so:
https://jsfiddle.net/HappyHands31/z0ncwe6b/
How can I achieve the same in React-Native?

Answer 1

You will put the contents of the code in the APP.JS file
If you give the COL value you get the result of 3 lines
flexDirection This is the direction in which the children inside the container will be
<View style={{
flex: 1,
flexDirection: 'col',//try change this line
justifyContent: 'space-between',
}}>