CODEWITHSUNDEEP
javascriptcssreact-nativeflexboxreact-native-web
Dimitri Kopriwa
Dimitri Kopriwa

Reputation: 14353

Flexbox generator does not display well in my react application

I am testing https://yogalayout.com/playground and have created that template:

import React, {Component} from 'react';
import {View} from 'react-native';

export default class MyLayout extends Component {
  render() {
    return (
      <View style={{
        flex: 1,
        width: 500,
        height: 500,
        justifyContent: 'space-between',
      backgroundColor: 'red',
      }}>
        <View style={{
          flex: 1,
          width: 100,
          height: 100,
          backgroundColor: 'blue',
        }} />
        <View style={{
          flex: 1,
          width: 100,
          height: 100,
          backgroundColor: 'green',
        }} />
        <View style={{
          flex: 1,
          width: 100,
          height: 100,
          backgroundColor: 'purple',
        }} />
      </View>
    );
  }
};

I expect to have this result:

flexbox normal

Instead, I have this:

flexbox broken

What could have break my flexbox layout?

Upvotes: 0

Views: 138

Answers (1)

user9408899
user9408899

Reputation: 4540

The default flexDirection is column in React Native. So, try setting it to row in your container View.

<View style={{
        flex: 1,
        width: 500,
        height: 500,
        justifyContent: 'space-between',
        backgroundColor: 'red',
        flexDirection: "row"
      }}>
  .
  .
  .

Upvotes: 1

Related Questions