react native flex 50% causes errors

Question

I'm trying to learn react native.

I have the following code:

<View>
    <View style={{flex:0.5,flexDirection="row"}}>
        <Image source={{uri:"http://image.com/image1.jpg"}} style={{width:100,height:'auto'}} resizeMode={"cover"} />
        <Text>Picture 1</Text>
    </View>
    <View style={{flex:0.5,flexDirection="row"}}>
        <Image source={{uri:"http://image.com/image2.jpg"}} style={{width:100,height:'auto'}} resizeMode={"cover"} />
        <Text>Picture 2</Text>
    </View>
    <View style={{flex:0.5,flexDirection="row"}}>
        <Image source={{uri:"http://image.com/image3.jpg"}} style={{width:100,height:'auto'}} resizeMode={"cover"} />
        <Text>Picture 3</Text>
    </View>
    <View style={{flex:0.5,flexDirection="row"}}>
        <Image source={{uri:"http://image.com/image4.jpg"}} style={{width:100,height:'auto'}} resizeMode={"cover"} />
        <Text>Picture 4</Text>
    </View>
</View>

But this when I run this code, I get an error saying the line

<View style={{flex:0.5, flexDirection:"row"}}>

"is an unexpected token".

I tried replace 0.5 with 50% and "0.5" but those also causes error.

Basically if this were html css for the web, the behaviour I'm trying to achieve is:

<div>
    <div style="width:50%; float:left;">
        <img src="http://image.com/image1.jpg" style="width:100%; height:auto;" />
        <span>Picture 1</span>
    </div>
    <div style="width:50%; float:left;">
        <img src="http://image.com/image2.jpg" style="width:100%; height:auto;" />
        <span>Picture 1</span>
    </div>
    <div style="width:50%; float:left;">
        <img src="http://image.com/image3.jpg" style="width:100%; height:auto;" />
        <span>Picture 1</span>
    </div>
    <div style="width:50%; float:left;">
        <img src="http://image.com/image4.jpg" style="width:100%; height:auto;" />
        <span>Picture 1</span>
    </div>
</div>

In other words, I just want two columns of thumbnail images with a caption underneath each image.

But `flex: 0.5` does not mean `50%` and doesn't set width, it mean 0.5 of 2, where 2 comes from the 4 items summed flex values and set how the space left should be distributed among the items. What you seem to look for is `flex-basis`, which RN doesn't have but a substitute can be found here: https://stackoverflow.com/questions/35436478/react-native-substitute-for-flex-basis/43022365 — Asons, Oct 09 '17 at 07:33
A correction of above, where flex work a little different in RN and should not be _...set how the **left** space should be distributed_ but rather _...set how the space should be distributed_ — Asons, Oct 09 '17 at 07:53

score 3 · Accepted Answer · answered Oct 10 '17 at 13:44

Set up the container with flexDirection:'row' and each child to have half of the screen flexBasis without flex grow. something like this:

<View>
<View style={{flexDirection="row"}}>
    <Image source={{uri:"http://image.com/image1.jpg"}} style={{flexBasis:Dimensions.get('window').width / 2, flexGrow:0}} resizeMode={"cover"} />
    <Text {{flexBasis:Dimensions.get('window').width / 2, flexGrow:0}}>Picture 1</Text>
</View>
...

score 0 · Answer 2 · answered Oct 10 '17 at 14:06

I started on react-native not much time ago and I think what you need is something like this:

import React, { Component } from 'react';
import {
  StatusBar,
  View,
  Image,
  StyleSheet,
  TouchableHighlight
} from 'react-native';
import NavigationBar from './navigationBar';

const logo = require('../../imgs/logo5.png');
const clientMenu = require('../../imgs/menu_cliente.png');
const contactMenu = require('../../imgs/menu_contato.png');
const companyMenu = require('../../imgs/menu_empresa.png');
const serviceMenu = require('../../imgs/menu_servico.png');

export default class MainScene extends Component {

  render() {
    console.log('Rendering App!');
    return (
      <View>
        <StatusBar
          backgroundColor='#CCC'
        />
      <NavigationBar />

        <View style={styles.logo}>
          <Image source={logo} />
        </View>

        <View style={styles.menu}>
          <View style={styles.menuGroup}>

            <TouchableHighlight
              underlayColor={'#B9C941'}
              activeOpacity={0.3}
              onPress={() => {
                this.props.navigator.push({ id: 'client' });
              }}
            >
              <Image style={styles.imgMenu} source={clientMenu} />
            </TouchableHighlight>

            <TouchableHighlight
              underlayColor={'#61BD8C'}
              activeOpacity={0.3}
              onPress={() => {
                this.props.navigator.push({ id: 'contact' });
              }}
            >
              <Image style={styles.imgMenu} source={contactMenu} />
            </TouchableHighlight>

          </View>

          <View style={styles.menuGroup}>

            <TouchableHighlight
              underlayColor={'#EC7148'}
              activeOpacity={0.3}
              onPress={() => {
                this.props.navigator.push({ id: 'company' });
              }}
            >
              <Image style={styles.imgMenu} source={companyMenu} />
            </TouchableHighlight>

            <TouchableHighlight
              underlayColor={'#19D1C8'}
              activeOpacity={0.3}
              onPress={() => {
                this.props.navigator.push({ id: 'services' });
              }}
            >
              <Image style={styles.imgMenu} source={serviceMenu} />
            </TouchableHighlight>

          </View>
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  logo: {
    marginTop: 30,
    alignItems: 'center'
  },
  menu: {
    alignItems: 'center'
  },
  menuGroup: {
    flexDirection: 'row'
  },
  imgMenu: {
    margin: 15
  }
});

score 0 · Answer 3 · answered Oct 10 '17 at 18:21

What you are trying to achieve can be done simply by this code:

<View style={{flexDirection:column}}>
  <View style={{flex:1, flexDirection:row}}>
    <View style={{flex:0.5,flexDirection:column}}>
      <Image source={{uri:"http://image.com/image1.jpg"}} style={{width:100,height:'auto'}} resizeMode={"cover"} />
      <Text>Picture 1</Text>
    </View>
    <View style={{flex:0.5,flexDirection:column}}>
      <Image source={{uri:"http://image.com/image1.jpg"}} style={{width:100,height:'auto'}} resizeMode={"cover"} />
      <Text>Picture 1</Text>
    </View>
  </View>
  <View style={{flex:1, flexDirection:row}}>
    <View style={{flex:0.5,flexDirection:column}}>
      <Image source={{uri:"http://image.com/image1.jpg"}} style={{width:100,height:'auto'}} resizeMode={"cover"} />
      <Text>Picture 1</Text>
    </View>
    <View style={{flex:0.5,flexDirection:column}}>
      <Image source={{uri:"http://image.com/image1.jpg"}} style={{width:100,height:'auto'}} resizeMode={"cover"} />
      <Text>Picture 1</Text>
    </View>
  </View>
</View>

score 0 · Answer 4 · answered Oct 10 '17 at 18:30

0

You have to give style={{flex:1}} to the main view and this might solve your problem.

answered Oct 10 '17 at 18:30

Sumanth U

144
8

DongYuwei · Answer 5 · 2019-10-17T07:35:10.460

MdBalal's strategy will not work. flex:0.5 in RN is not the same as in web standard, it will not work if you put more than 2 children components in container. A walk-around is group children to two components in one container. Eg:

Suppose we have 3 child components in Container,
**Before**:
<Container><Child/><Child/><Child/></Container>


**After**:
<Container><Child/><Child/></Container> and 
<Container><Child/><EmptyPlaceholder/></Container>

react native flex 50% causes errors

5 Answers5