title: how to centre the image inside a view in react native
body: <p>I have a grid view, inside each cell I have added a view and then an image , the image isn't centered the code is as follows </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;ImageBackground
                  source={require('./images/marble.jpg')}
                  style={styles.backgroundImage}&gt;
  
                  &lt;GridView
                      itemDimension={130}
                      items={items}
                      style={styles.gridView}
                      renderItem={item =&gt; (
                          &lt;View style={[styles.itemContainer, { backgroundColor: item.code }]}&gt;
                              &lt;View style={styles.CircleShapeView}&gt;
                              &lt;Image style={styles.iconItem} source={item.name}/&gt;
                              &lt;/View&gt;
                          &lt;/View&gt;
                      )}
                  /&gt;
  
              &lt;/ImageBackground&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and styles are </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>const styles = StyleSheet.create({
      backgroundImage: {
          flex: 1,
          resizeMode: 'cover', // or 'stretch'
      },
      CircleShapeView: {
          width: 100,
          height: 100,
          borderRadius: 100,
          backgroundColor: '#00BCD4'
      },
      gridView: {
          paddingTop: 50,
          flex: 1,
  
      },
      itemContainer: {
          justifyContent: 'center',
          alignItems:'center',
          height:130
      },
      iconItem: {
          alignItems:'center',
          justifyContent: 'center'
      }
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>the output looks like this </p>
  
  <p><a href="https://i.stack.imgur.com/VjV5b.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VjV5b.jpg" alt="enter image description here"></a></p>
  
  <p>Image should be at the centre of the circle, but its not.</p>