How to add "edit" icon as a button to component in react-native

Question

I wanna add an "Edit" button with an icon in my <Image> component. following is my code for the <View> that contain the image.

<View style={{ flex: 1 }}>
    <View
        style={{
            justifyContent: 'space-evenly',
            alignItems: 'center',
            flexDirection: 'row',
            paddingVertical: 10
        }}
    >
        <Image
            source={{ uri: 'https://api.adorable.io/avatars/285/test@user.i.png' }}
            style={{
                marginLeft: 10, width: 100, height: 100, borderRadius: 50
            }}
        />
    </View>
</View>

it is much better if i can do this, without replacing <ListItem> with <Image>

score 3 · Accepted Answer · answered Mar 17 '19 at 13:23

You can try it like:

       <View>
        <Image
            source={{ uri: 'https://api.adorable.io/avatars/285/test@user.i.png' }}
            style={{
                marginLeft: 10, width: 100, height: 100, borderRadius: 50
            }}
        />
      <Icon name={'edit'} containerStyle={styles.icon} onPress={console.log('I was clicked')}/>
     </View>

Then the icon style like below: Note the absolute position attribute

icon: {
 backgroundColor: '#ccc',
 position: 'absolute',
 right: 0,
 bottom: 0
}

Tested with Icon from react-native-elements but I guess it should work with any other Icon.

score 2 · Answer 2 · answered Mar 17 '19 at 13:23

Try to use ImageBackground to wrap your icon inside it and for icon purpose use react-native-vector-icon library.

<ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    <Icon
    name="edit"
    size={18}
    onPress={this.edit}
  >
    Edit
</Icon>
</ImageBackground>

score 0 · Answer 3 · answered Mar 17 '19 at 12:40

You can use react-native-vector-icons to add an icon within the view which contains image. You can also add an icon button component using that library which will look something like this

<Icon.Button
    name="edit"
    backgroundColor="#3b5998"
    onPress={this.edit}
  >
    Edit
</Icon.Button>

How to add "edit" icon as a button to component in react-native

3 Answers3