title: Image resizing in React Native
body: <p>I am trying to resize an image (smaller to fit screen) in my react native app but am unable to do it as it is too big.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>'use strict';
  
  var React = require('react-native');
  var {
    StyleSheet,
    Text,
    TextInput,
    View,
    TouchableHighlight,
    ActivityIndicatorIOS,
    Image,
    Component
  } = React;
  
  var styles = StyleSheet.create({
    description: {
      marginBottom: 20,
      fontSize: 18,
      textAlign: 'center',
      color: '#656565'
    },
    container: {
      padding: 30,
      marginTop: 65,
      alignItems: 'center'
    },
    flowRight: {
      flexDirection: 'row',
      alignItems: 'center',
      alignSelf: 'stretch'
    },
    buttonText: {
      fontSize: 18,
      color: 'white',
      alignSelf: 'center'
    },
    button: {
      height: 36,
      flex: 1,
      flexDirection: 'row',
      backgroundColor: '#48BBEC',
      borderColor: '#48BBEC',
      borderWidth: 1,
      borderRadius: 8,
      marginBottom: 10,
      alignSelf: 'stretch',
      justifyContent: 'center'
    },
    searchInput: {
      height: 36,
      padding: 4,
      marginRight: 5,
      flex: 4,
      fontSize: 18,
      borderWidth: 1,
      borderColor: '#48BBEC',
      borderRadius: 8,
      color: '#48BBEC'
    },
    image: {
      width: 200,
      height: 220
    },
  });
  
  class SearchPage extends Component {
    render() {
      return (
        &lt;View style={styles.container}&gt;
  
          &lt;Image source={require('image!rclogo')} style={styles.image}/&gt;
  
          &lt;Text style={styles.description}&gt;
            Search for RCers!
          &lt;/Text&gt;
  
          &lt;Text style={styles.description}&gt;
            Search
          &lt;/Text&gt;
  
          &lt;View style={styles.flowRight}&gt;
            &lt;TextInput
              style={styles.searchInput}
              placeholder='Search by Batch, Name, Interest...'/&gt;
            &lt;TouchableHighlight style={styles.button}
                underlayColor='#99d9f4'&gt;
              &lt;Text style={styles.buttonText}&gt;Go&lt;/Text&gt;
            &lt;/TouchableHighlight&gt;
          &lt;/View&gt;
  
          &lt;TouchableHighlight style={styles.button}
              underlayColor='#99d9f4'&gt;
            &lt;Text style={styles.buttonText}&gt;Location&lt;/Text&gt;
          &lt;/TouchableHighlight&gt;
  
        &lt;/View&gt;
      );
    }
  } 
  </code></pre>
  
  <p>I tried to take it out of the container tag but cannot seem to understand why it will not render properly?</p>
  
  <p>Can this be done with flexbox resizeMode? How do you do it? I can't find any docs on it...</p>