feat(Avatar): Placeholder images (#1211)

* Add placeholderStyle & PlaceholderContent to docs

* Add placeholderStyle & PlaceholderContent props

* Add component to renderNode

* Remove react-native-touchable-scale

* rename PlaceholderContent to renderPlaceholderContent

* [node] render Text if string

* Fix SearchBar and renderNode icon conflict

* Fix tests

* Update comment

docs/avatar.md

@@ -123,6 +123,19 @@ title: Avatar
 />
 ```
 
+#### Avatar with title placeholder
+
+<img src="/react-native-elements/img/avatar_with_title_placeholder.gif" width="500" >
+
+```js
+<ListItem
+  leftAvatar={{ title: name[0], source: { uri: avatar_url } }}
+  title={name}
+  subtitle={role}
+  chevron
+/>
+```
+
 ### Props
 
 * [`activeOpacity`](#activeopacity)
@@ -140,6 +153,8 @@ title: Avatar
 * [`size`](#size)
 * [`title`](#title)
 * [`titleStyle`](#titlestyle)
+* [`placeholderStyle`](#placeholderstyle)
+* [`renderPlaceholderContent`](#renderplaceholdercontent)
 
 ---
 
@@ -262,6 +277,7 @@ Image source
 | object (style) |  none   |
 
 ---
+
 ### `size`
 
 Size of the avatar
@@ -274,7 +290,7 @@ Size of the avatar
 
 ### `title`
 
-Renders title in the avatar
+Renders title in the placeholder
 
 |  Type  | Default |
 | :----: | :-----: |
@@ -290,3 +306,22 @@ Style for the title
 | :------------: | :-----: |
 | object (style) |  none   |
 
+---
+
+### `placeholderStyle`
+
+Adds style to the placeholder wrapper
+
+|      Type      |             Default              |
+| :------------: | :------------------------------: |
+| object (style) | `{ backgroundColor: '#BDBDBD' }` |
+
+---
+
+### `renderPlaceholderContent`
+
+Custom placeholder element (by default, it's the title)
+
+|            Type            | Default |
+| :------------------------: | :-----: |
+| React component or element |  none   |

docs/listitem.md

@@ -206,14 +206,16 @@ Example badge usage
 <img src="/react-native-elements/img/listitem_with_gradient_scale.gif" width="500" >
 
 ```js
+import TouchableScale from 'react-native-touchable-scale' // https://github.com/kohver/react-native-touchable-scale
 import LinearGradient from 'react-native-linear-gradient' // Only if no expo
 
   <ListItem
-    scaleProps={{
-      friction: 90,
-      tension: 100,
-      activeScale: 0.95,
-    }}
+    component={TouchableScale}
+
+    friction={90} //
+    tension={100} // These props are passed to the parent component (here TouchableScale)
+    activeScale={0.95} //
+
     linearGradientProps={{
       colors: ['#FF9800', '#F44336'],
       start: [1, 0],
@@ -649,16 +651,6 @@ Add divider at the bottom of the list item
 
 ---
 
-### `scaleProps`
-
-Provide all props for scale feedback
-
-|                                    Type                                    | Default |
-| :------------------------------------------------------------------------: | :-----: |
-| {[...Scale props](https://github.com/kohver/react-native-touchable-scale)} |  none   |
-
----
-
 ### `ViewComponent`
 
 Container for linear gradient (for non-expo user)

package.json

@@ -36,8 +36,7 @@
     "lodash.isempty": "^4.4.0",
     "lodash.times": "^4.3.2",
     "opencollective": "^1.0.3",
-    "prop-types": "^15.5.8",
-    "react-native-touchable-scale": "2.0.0"
+    "prop-types": "^15.5.8"
   },
   "devDependencies": {
     "babel": "^6.23.0",