CODEWITHSUNDEEP
react-nativereact-native-image
Ayesh Nipun
Ayesh Nipun

Reputation: 614

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

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/[email protected]' }}
            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>

Upvotes: 0

Views: 8187

Answers (3)

Paras Korat
Paras Korat

Reputation: 2065

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>

Upvotes: 2

Felix Too
Felix Too

Reputation: 11931

You can try it like:

       <View>
        <Image
            source={{ uri: 'https://api.adorable.io/avatars/285/[email protected]' }}
            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.

Upvotes: 3

Ehsan
Ehsan

Reputation: 161

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>

Upvotes: 0

Related Questions