react native flex 50% causes errors - css

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.

Answer 1

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>
...

Answer 2

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
}
});

Answer 3

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>

Answer 4

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

Answer 5

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>