title: Center an image in a React Native component
body: <p>I have started playing with React Native and I'm trying to create a simple image button component just to get used to the language.
  Here is what I have:</p>
  
  <pre><code>'use strict';
  
  const React = require('React');
  const PropTypes = require('prop-types');
  
  import {
      Platform, TouchableOpacity,
      StyleSheet, Dimensions,
      Text, Image,
      View
    } from 'react-native';
  const TouchableNativeFeedback = require('TouchableNativeFeedback');
  
  
  const MyBrown = '#89664C';
  const styles = StyleSheet.create({
      button: Platform.select({
          ios: {
          },
          android: {
              elevation: 4,
              backgroundColor: MyBrown,
              borderRadius: 2
          }
      }),
      text: Platform.select({
          ios: {
              color: 'white',
              textAlign: 'center',
              padding: 8,
              fontSize: 18
          },
          android: {
              color: 'white',
              textAlign: 'center',
              padding: 8,
              fontWeight: '500',
          }
      }),
      icon: {
          width: 60,
          height: 60,
      }
  });
  
  export default class MyButton extends React.Component{
  
      render(){            
          return(
              &lt;View style={styles.button}&gt;
                  &lt;TouchableOpacity&gt;                    
                      &lt;Image source={this.props.src} style={styles.icon} /&gt;
                      &lt;Text style={styles.text}&gt;{this.props.text}&lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
              &lt;/View&gt;
              )
      }
  }
  </code></pre>
  
  <p>This renders as I'd expect when I run the app, but the image is left aligned whilst the text is centered.
  Now I thought I could use Flexbox and add <strong>{flex:1}</strong> to the parent View or TouchOpacity elements, but as soon as I do this the control no longer renders in my app.</p>
  
  <p>Two questions on this:</p>
  
  <ol>
  <li>What is the recommended way of centering the image in React
  Native? </li>
  <li>Why, when I add the flex:1 to ether of the parent
  controls does it no longer render at all?</li>
  </ol>
  
  <p>Thank you</p>