2

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.

enter image description here

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?

HappyHands31
  • 4,001
  • 17
  • 59
  • 109

1 Answers1

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',
      }}>

example

Yoel
  • 7,555
  • 6
  • 27
  • 59