How to have two ImageViews appear side by side in Titanium

Question

I can't get two ImageViews to appear side by side in a Titanium iOS app.

My Alloy code looks like this:

<Alloy>	
	<Window class='container' statusBarStyle='Ti.UI.iPhone.StatusBar.LIGHT_CONTENT'>
		<View height='20' top='0' left='0' backgroundColor='#01B6AC'></View>
		<View id = 'savedContents' layout='vertical' top='20'>
		</View>
		<Require type='view' src='bottomBar' id='bottomBar'/>
		<Widget id="fa" src="com.mattmcfarland.fontawesome"/>
	</Window>	
</Alloy>

My Controller code looks like this:

row = Ti.UI.createView({
	width:'100%',
	height:150,
	layout:'horizontal'
});	

image1 = Ti.UI.createImageView({
	image:'http://www.outnow.io/assets/img/small511by309/'+venueDetails[0]["image1"],
	width:'50%',
	height:150,
	left:0,
	top:0
});	

image2 = Ti.UI.createImageView({
	image:'http://www.outnow.io/assets/img/small511by309/'+venueDetails[1]["image1"],
	width:'50%',
	height:150,
	left:0,
	top:0
});

row.add(image1);
row.add(image2);	
$.savedContents.add(row);

$.saved.open();

Only image1 appears. Both images are ok and if I comment out either one of the row.add() calls the remaining image appears fine. I am trying to get the two images to appear side by side taking up 50% of the width each.

Answer 1

The following works fine for me, try to strip any differences from your code:

<Alloy>
  <Window backgroundColor="white">
    <View layout="vertical" top="20">
      <View layout="horizontal" height="150">
        <View width="50%" left="0" backgroundColor="red" />
        <View width="50%" left="0" backgroundColor="green" />
      </View>
      <View layout="horizontal" height="150">
        <View width="50%" left="0" backgroundColor="blue" />
        <View width="50%" left="0" backgroundColor="yellow" />
      </View>
    </View>
  </Window>
</Alloy>