How to realize a circle image button with react native

Question

There. When I was trying to make a circle shaped button component with React Native. I set the borderRadius of an Image half the value of its height and width to make it loo

Answer 1

You need to apply styling to the Touchable area as well as the image if you do not want the outside of the image to be touchable.

The first image has only the image Touchable, while the second only styles the image, leaving the entire rectangle touchable.

'use strict';

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

var SampleApp = React.createClass({
  render: function() {
    return (
      
       Only image clickable
       
            
        
       Entire Row Clickable
       
            
        
        
    );
  }
}); 

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:60
  },
  imageContainer: {
    height:128,
    width: 128,
    borderRadius: 64
  },
  image: {
    height:128,
    width: 128,
    borderRadius: 64
  },
  imageContainer2: {

  }
});

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