I've just updated from 0.4 to 0.4.1 and everything works fine, texts and images

Ok, weird.

0.4.0:

0.4.1:

No other changes done in the source code.

@PhilippKrone - just a shot in the dark, did you try restarting XCode?

@brentvatne did not before, but just did - no success. I'll try to create a minimal example, let's see whether my weird behaviour can be localized. :-)

@brentvatne ok, I was able to figure it out, atleast to elimate the error, although I dont know the reason yet.

Old stylesheet (working under 0.4.0 and not working under 0.4.1)

  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'stretch',
    backgroundColor: '#ffffff',
  },

New stylesheet (working under 0.4.0 and 0.4.1)

  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    backgroundColor: '#ffffff',
  },

So it seems the interpretation of alignItems has changed from 0.4.0 to 0.4.1 - I can now fix the layout again for my app, but the root cause would be of interest for me anyway.

Maybe this?

Mhh, I have to deep dive into this change - from a first look this might be what has caused my issue. Thanks for the hint!

Perhaps not, it looks like that was just some dead code removal (unless it produces some side effects).

Mhh, currently checking:

dd6f774

Anyway, priority is rather low as a solid "work around" / fix can be used.

@PhilippKrone - fair. Could you post the full code or something that will reproduce it so we can determine if the change was a fix or a regression? 😄

@brentvatne Sure thing! :)

1. Create a new RN project and add a static image in XCODE. I called it "Test" and added the following image: http://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/000080_Navy_Blue_Square.svg/2000px-000080_Navy_Blue_Square.svg.png

2. use the following source code:

/**
 * Test app
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var {
  Navigator,
  Text,
  Image,
  View,
  AlertIOS,
  NetInfo,
  TouchableHighlight,
  AppRegistry,
  StyleSheet,
} = React;

var TestProject = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
       <Image
         style={styles.backdrop}
         source={require('image!Test')}>
         <View style={styles.ClearBackground}>
           <View style={styles.backdropView}>
               <Text style={styles.appNameText}>
                  SMIPE
               </Text>
            </View>
          </View>
        </Image>
     </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    backgroundColor: '#ffffff',
  },
    backdrop: {
      flex: 1,
      marginTop: 0,
      alignItems: 'stretch',
    },
    backdropView: {
      backgroundColor: 'rgba(0,0,0,0)',
      alignItems: 'stretch',
      width: 250,
    },
    ClearBackground: {
      backgroundColor: 'rgba(0,0,0,0)',
      flex: 1,
      alignItems: 'center',
      marginTop: 130,
    },
    appNameText: {
      textAlign: 'center',
      fontSize: 48,
      fontFamily: 'Gill Sans',
      color: '#ffffff',
    },
});

AppRegistry.registerComponent('TestProject', () => TestProject);

3. Following behaviour:
   RN 0.4.0. for both, "alignItems: 'center'," and "alignItems: 'stretch'" in the container style, it is working
   RN 0.4.1. only for "alignItems: 'center'," it is working, for 'stretch', the text is not visible (I think it is moved somewhere out of the screen as the image has a higher width than the screen?)

It's actually related to require, you can test it by setting width and height on the image's style.

/cc @amasad

Might be a regression while we're working on #1043 cc @frantic

Indeed setting the width and height works. I just figured out a case in which I'm only setting the height of an image (and no width, as I want to have the same aspect ratio as the original image) and this is not working correctly as well. I'm now calculating the width as well by just multiplying the calculated height with the (known) aspect ratio and it's working again.

Thanks a lot for all your support!

We started to mix in image width/hight if they are not set on image style. Will probably have to reconsider this - use case when image is sized using flex is valid. @vjeux the layout guru, thoughts?

@frantic or when image is sized using the parent's align-items:'stretch' property, that is also valid imo, and changing it would break my current use case.

Erg yeah, I didn't think of this use case. As a workaround I think you can do style={{width: undefined}}

I'm not such a fan of auto injecting the dimensions but it's worth trying out and see how that works

Guys i have similar troubles, after update on 0.4.1 all my root View flow by width