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 (
      <View style={styles.container}>
       <Text style={{ fontSize:22 }}>Only image clickable</Text>
       <TouchableHighlight style={ styles.imageContainer }>
            <Image style={ styles.image } source={{ uri: 'http://www.free-avatars.com/data/media/37/cat_avatar_0597.jpg' }} />
       </TouchableHighlight> 
       <Text style={{ fontSize:22 }}>Entire Row Clickable</Text>
       <TouchableHighlight style={ styles.imageContainer2 }>
            <Image style={ styles.image } source={{ uri: 'http://www.free-avatars.com/data/media/37/cat_avatar_0597.jpg' }} />
       </TouchableHighlight> 
      </View>  
    );
  }
}); 

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);

Answer 2

try this:

 <TouchableOpacity
   style={{
       borderWidth:1,
       borderColor:'rgba(0,0,0,0.2)',
       alignItems:'center',
       justifyContent:'center',
       width:100,
       height:100,
       backgroundColor:'#fff',
       borderRadius:50,
     }}
 >
   <Icon name={"chevron-right"}  size={30} color="#01a699" />
 </TouchableOpacity>