title: React-native: Scale image evenly, overlay text
body: <p>I'm trying to learn to use react-native, and some even quite simple tasks seem to be extraordinarily complicated. For example, scaling an image evenly to a given percentage of the screen width (or, perhaps more precisely, of the width of the parent node). I can't find a simple way of doing this, that would work in all situations.</p>
  
  <p>If I'm creating a View with flexDirection:'row', I discovered that I can add an image that's scaled to eg. 15% of the View's width by using the styles { width:'15%', resizeMode:'contain', aspectRatio:1 }.</p>
  
  <p>However, if I'm adding the image to a View with flexDirection:'column', the above doesn't work (essentially, the width style has no effect). I couldn't figure out any other way of doing it than to add a sub-View that has flexDirection:'row', and contains an image with those styles. This seems to be an extraordinarily contrived way of doing it, and I might be missing something. One would think that there ought to be some kind of "scale" property to components, but I can't find any such thing.</p>
  
  <p>Now the actual problem I'm having is that now I need to overlay some text on top of such an image. An Image cannot contain child nodes anymore, and the recommended way is to use ImageBackground.</p>
  
  <p>The problem is that ImageBackground does not behave like Image in this situation. If I use the same styles as above, it does something strange: It seems to create a view with the correct width, eg. 15% or the parent's width, but then it crops the image itself from the left and the right so that only 15% of the center column is left (and left-aligns it in this view). So it kind of does scaling-down-to-15% twice: Once to create the view, and another to crop the image from the sides to another 15%. (The fact that it's doing exactly this can be corroborated by trying different percentages.)</p>
  
  <p>All this seems extraordinarily complicated and contrived for something that's just a couple of one-liners in almost any graphical engine. How exactly is this supposed to be done?</p>
  
  <p>All tutorials and answers to people's questions out there only talk about scaling images to some defined point size (like 150x150), not to a percentage of the screen width or height (which would be much more useful given that screen sizes and resolutions can vary a lot).</p>