| 1 | # React Native Badge Avatar
|
| 2 |
|
| 3 | [](https://www.npmjs.com/package/react-native-badge-avatar)
|
| 4 | [](https://www.npmjs.com/package/react-native-badge-avatar)
|
| 5 |
|
| 6 | A user avatar display with support:
|
| 7 | * default place holder
|
| 8 | * name as Avatar
|
| 9 | * url as Avatar
|
| 10 | * onPress event callback
|
| 11 | * Avatar border
|
| 12 | * Avatar border color
|
| 13 | * Avatar radius
|
| 14 | * Badge Number
|
| 15 | * Badge Icon
|
| 16 | * Auto Badge Size & Position
|
| 17 |
|
| 18 | Based on: https://github.com/Samoy/react-native-badge-view, https://github.com/avishayil/react-native-user-avatar
|
| 19 |
|
| 20 | ## ScreenShot
|
| 21 | 
|
| 22 |
|
| 23 | ## Installation
|
| 24 |
|
| 25 | `npm install --save react-native-badge-avatar` or `yarn add react-native-badge-avatar`
|
| 26 |
|
| 27 | ## Usage
|
| 28 |
|
| 29 | ```js
|
| 30 | <Avatar
|
| 31 | size="68"
|
| 32 | name="Dean Guo"
|
| 33 | style={{margin:6}}
|
| 34 | source={{url : "https://avatars3.githubusercontent.com/u/8385255?s=460&v=4" }}
|
| 35 | placeHolder={require('./images/badge_icon.png')}
|
| 36 | onPress={ () =>
|
| 37 | alert('click')
|
| 38 | }
|
| 39 | />
|
| 40 |
|
| 41 | <Avatar
|
| 42 | size="68"
|
| 43 | name="Dean Guo"
|
| 44 | style={{margin:6}}
|
| 45 | source={require('./images/badge_icon.png')}
|
| 46 | onPress={ () =>
|
| 47 | alert('click')
|
| 48 | }
|
| 49 | />
|
| 50 |
|
| 51 | <Avatar
|
| 52 | size="80"
|
| 53 | name="Dean Guo"
|
| 54 | source={{url : "https://avatars3.githubusercontent.com/u/8385255?s=460&v=4" }}
|
| 55 | badge="6"
|
| 56 | />
|
| 57 |
|
| 58 | <Avatar
|
| 59 | size="100"
|
| 60 | name="Dean Guo"
|
| 61 | radius={0.2}
|
| 62 | source={{url : "https://avatars3.githubusercontent.com/u/8385255?s=460&v=4" }}
|
| 63 | badge="6"
|
| 64 | badgeIcon={require('./images/badge_icon.png')}
|
| 65 | />
|
| 66 |
|
| 67 | <Avatar
|
| 68 | size="120"
|
| 69 | borderColor="black"
|
| 70 | borderWidth={3}
|
| 71 | name="Dean Guo"
|
| 72 | source={{url : "https://avatars3.githubusercontent.com/u/8385255?s=460&v=4" }}
|
| 73 | />
|
| 74 | ```
|
| 75 |
|
| 76 | ## Prop
|
| 77 | |Prop|Type|Required|Default|Comment|
|
| 78 | |:----:|:---:|:---:|:---:|:----:|
|
| 79 | |name|string|optional|""|if no url will show name as Avatar|
|
| 80 | |source|object|optional|null|Avatar Image object same like default use|
|
| 81 | |placeHolder|object|optional|null|Avatar Image placeholder object same like default use|
|
| 82 | |onPress()|function|optional|null|Press event callback|
|
| 83 | |size|string|optional|"48"|Size of Avatar, badge will be 1/4 of Avatar size|
|
| 84 | |radius|int|optional|1| range of 0-1, 0 is rect, 1 is full circular|
|
| 85 | |borderColor|string|optional|""|avatar border color|
|
| 86 | |borderWidth|int|optional|0|avatar border width|
|
| 87 | |badge|string|optional|""|badge number|
|
| 88 | |badgeIcon|string|optional|""|badge icon url|
|
| 89 | |badgeTextColor|string|optional|white|badge text color|
|
| 90 | |badgeBackgroundColor|string|optional|red|badge backgroud color|
|
| 91 | |style|object|optional|null|compontent style same like default use|
|
| 92 |
|