v1.0.0-beta6 react-native-elements#1193

flyingcircle · Oct 10, 2018 · f5455b9 · f5455b9
2 parents 665975f + d42ccb5
commit f5455b9
Show file tree

Hide file tree

Showing 148 changed files with 20,875 additions and 20,733 deletions.
diff --git a/.ci/setupTests.js b/.ci/setupTests.js
@@ -0,0 +1,4 @@
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });
diff --git a/.travis.yml b/.travis.yml
@@ -1,28 +1,27 @@
 language: node_js
 node_js:
-- 9.11.1
+  - 'node'
 cache:
   yarn: true
   directories:
-  - node_modules
-  - website/node_modules
+    - node_modules
+    - website/node_modules
 branches:
   only:
-  - master
-  - next
-  - v0.11.0
+    - master
+    - next
+    - v0.11.0
 install:
-- git fetch --unshallow --all
-- yarn global add codecov
-- yarn
+  - git fetch --unshallow --all
+  - yarn global add codecov
+  - yarn
 script:
-- yarn run test && codecov
-after_script:
-- ./.ci/expo-ci.sh
+  - yarn run test:ci && codecov
 after_success:
-- |
-  if [ "$TRAVIS_PULL_REQUEST" == "false" -a "$TRAVIS_BRANCH" == "master" ]; then
-    git config --global user.name "React Native Elements CI"
-    echo -e "machine github.com\n login react-native-elements-ci\n password $GITHUB_TOKEN" >> ~/.netrc
-    cd website && yarn && GIT_USER=react-native-elements-ci yarn run publish-gh-pages
-  fi
+  - ./.ci/expo-ci.sh
+  - |
+    if [ "$TRAVIS_PULL_REQUEST" == "false" -a "$TRAVIS_BRANCH" == "master" ]; then
+      git config --global user.name "React Native Elements CI"
+      echo -e "machine github.com\n login react-native-elements-ci\n password $GITHUB_TOKEN" >> ~/.netrc
+      cd website && yarn && GIT_USER=react-native-elements-ci yarn run publish-gh-pages
+    fi
diff --git a/README.md b/README.md
@@ -35,11 +35,14 @@
 
 ### Installation
 
-Follow [these instructions](https://react-native-training.github.io/react-native-elements/docs/getting_started.html) to install React Native Elements!
+Follow
+[these instructions](https://react-native-training.github.io/react-native-elements/docs/getting_started.html)
+to install React Native Elements!
 
 ### Usage
 
-Start using the components or try it on Snack [here](https://snack.expo.io/rJu6gJfBZ).
+Start using the components or try it on Snack
+[here](https://snack.expo.io/rJu6gJfBZ).
 
 ```js
 import { Button } from 'react-native-elements';
@@ -68,7 +71,10 @@ import { Button } from 'react-native-elements';
 
 ## RNE Ecosystem:
 
-React Native Elements also serves as a **platform** that connects **small teams/individuals** that needs help developing their RN app with **open source contributors** that are willing to **build complex UI screens & animated interactions** for 💰💰💰.
+React Native Elements also serves as a **platform** that connects **small
+teams/individuals** that needs help developing their RN app with **open source
+contributors** that are willing to **build complex UI screens & animated
+interactions** for 💰💰💰.
 
 Here are some of the screens that our developers have created so far:
 
@@ -79,31 +85,44 @@ Here are some of the screens that our developers have created so far:
 </div>
 <br /><br />
 
-If this sounds interesting and you would like to participate, kindly open a **new issue with the design & spec of the UI screen** that you need to be developed. One of our developers will respond to your issue with an estimate of time & cost.
+If this sounds interesting and you would like to participate, kindly open a
+**new issue with the design & spec of the UI screen** that you need to be
+developed. One of our developers will respond to your issue with an estimate of
+time & cost.
 
-It's built on top of **RNE & Open Collective**. If you have any feedback or would like to know more details about this kindly contact **[Monte Thakkar](https://github.com/Monte9)**.
+It's built on top of **RNE & Open Collective**. If you have any feedback or
+would like to know more details about this kindly contact
+**[Monte Thakkar](https://github.com/Monte9)**.
 
 ## Expo Demo App
 
-Checkout the official [React Native Elements App](https://expo.io/@monte9/react-native-elements-app) on Expo which uses all of the React Native Elements components.
+Checkout the official
+[React Native Elements App](https://expo.io/@monte9/react-native-elements-app)
+on Expo which uses all of the React Native Elements components.
 
-If you are looking to contribute to the React Native Elements App, click [here](https://github.com/react-native-training/react-native-elements-app) to view the implementation & run the RNE expo app locally.
+If you are looking to contribute to the React Native Elements App, click
+[here](https://github.com/react-native-training/react-native-elements-app) to
+view the implementation & run the RNE expo app locally.
 
 ## v1.0 Roadmap 🏃 🏎 🏇
 
-Current release: `1.0.0-beta5`
+Current release: `1.0.0-beta6`
 
 ### New Features:
 
 * [x] Button component **(re-write)** - @monte9
 * [x] Input component **(re-write)** - @monte9 & @xavier-villelegier
 * [x] Search component - **Platform specific (re-write)** - @xavier-villelegier
 * [x] Avatar component **(refactored)** - @monte9
-* [x] Production-ready screens 🔥 💯 🎸 - @monte9, @xavier-villelegier, @martinezguillaume
+* [x] Production-ready screens 🔥 💯 🎸 - @monte9, @xavier-villelegier,
+      @martinezguillaume
 * [x] **Launching RNE Ecosystem** ✨🚀✨ - @monte9
-* [x] ListItem component - **Platform specific (re-write)** - @martinezguillaume, @johot
-* [ ] Themes support - **NEW** - @iRoachie **WIP**
-* [ ] React Native Web support - **NEW** - @Gregor1971 **WIP** - [branch](https://github.com/react-native-training/react-native-elements/tree/rn-web) - [PR](https://github.com/react-native-training/react-native-elements/pull/867)
+* [x] ListItem component - **Platform specific (re-write)** -
+      @martinezguillaume, @johot
+* [x] Themes support - **NEW** - @iRoachie
+* [ ] React Native Web support - **NEW** - @Gregor1971 **WIP** -
+      [branch](https://github.com/react-native-training/react-native-elements/tree/rn-web) -
+      [PR](https://github.com/react-native-training/react-native-elements/pull/867)
 
 ### v1.0 TODO:
 
@@ -112,27 +131,47 @@ Current release: `1.0.0-beta5`
 * [x] Update docs for Search component
 * [x] Write detailed release notes with new features & breaking changes
 * [x] Update react, react-native & other dependencies
-* [x] Update docs for ListItem component - **[$20](https://opencollective.com/react-native-elements#budget)**
-* [ ] Write docs for Themes support **(Pending completion of theme support)** - **[$20](https://opencollective.com/react-native-elements#budget)**
-* [ ] Create a compelling demo/example app for RNE + RNW (Checkout [rn-web](https://github.com/react-native-training/react-native-elements/tree/rn-web) branch or [this PR comment](https://github.com/react-native-training/react-native-elements/pull/867#issuecomment-362312699) for context) - **[$50](https://opencollective.com/react-native-elements#budget)**
-* [ ] Write docs for React Native Web support (Checkout [rn-web](https://github.com/react-native-training/react-native-elements/tree/rn-web) branch or [this PR comment](https://github.com/react-native-training/react-native-elements/pull/867#issuecomment-362312699) for context) - **[$50](https://opencollective.com/react-native-elements#budget)**
-* [ ] Recreate Settings page on iOS & android (to show listItem + searchBar + themes components) - **WIP** - @martinezguillaume
-
-Feel free to reach out to us on our [Slack channel](https://reactnativetraining.herokuapp.com) if you have any questions about what to work on.
+* [x] Update docs for ListItem component -
+      **[$20](https://opencollective.com/react-native-elements#budget)**
+* [x] Write docs for Themes support -
+      **[$20](https://opencollective.com/react-native-elements#budget)**
+* [ ] Create a compelling demo/example app for RNE + RNW (Checkout
+      [rn-web](https://github.com/react-native-training/react-native-elements/tree/rn-web)
+      branch or
+      [this PR comment](https://github.com/react-native-training/react-native-elements/pull/867#issuecomment-362312699)
+      for context) -
+      **[$50](https://opencollective.com/react-native-elements#budget)**
+* [ ] Write docs for React Native Web support (Checkout
+      [rn-web](https://github.com/react-native-training/react-native-elements/tree/rn-web)
+      branch or
+      [this PR comment](https://github.com/react-native-training/react-native-elements/pull/867#issuecomment-362312699)
+      for context) -
+      **[$50](https://opencollective.com/react-native-elements#budget)**
+* [ ] Recreate Settings page on iOS & android (to show listItem + searchBar +
+      themes components) - **WIP** - @martinezguillaume
+
+Feel free to reach out to us on our
+[Slack channel](https://reactnativetraining.herokuapp.com) if you have any
+questions about what to work on.
 
 ### Release plan:
 
-Since this is a beta release, any new installation of react-native-elements will get `v0.19.1`. If you would like to try out our `v1.0.0` beta releases (we highly suggest you do), run the following command:
+Since this is a beta release, any new installation of react-native-elements will
+get `v0.19.1`. If you would like to try out our `v1.0.0` beta releases (we
+highly suggest you do), run the following command:
 
 `yarn add react-native-elements@beta`
 
-Since `v1` has a lot of API changes (many of which are breaking changes due to re-written components), the `v1.0.0` beta releases are meant to give our users a heads up and give them plenty of time to migrate their apps to `v1`.
+Since `v1` has a lot of API changes (many of which are breaking changes due to
+re-written components), the `v1.0.0` beta releases are meant to give our users a
+heads up and give them plenty of time to migrate their apps to `v1`.
 
 The official `v1.0.0` will be released around December 2018 🎉
 
 ### Test v1.0 components
 
-You can test new features of the `v1.0.0` beta releases on [Expo Snack](https://snack.expo.io/) by modifying the `package.json` file:
+You can test new features of the `v1.0.0` beta releases on
+[Expo Snack](https://snack.expo.io/) by modifying the `package.json` file:
 
 `"react-native-elements": "^1.0.0-beta"`
 
@@ -144,21 +183,33 @@ This will install the latest beta release of React Native Elements.
 
 ## Contributing
 
-Interested in contributing to this repo? Check out our [Contributing Guide](https://react-native-training.github.io/react-native-elements/docs/contributing.html) and submit a PR for a new feature/bug fix.
+Interested in contributing to this repo? Check out our
+[Contributing Guide](https://react-native-training.github.io/react-native-elements/docs/contributing.html)
+and submit a PR for a new feature/bug fix.
 
 ### First Contributors
 
-We encourage everyone to contribute & submit PR's especially first-time contributors. Look for the label `👶 Good First Issue` on the issues. Click [here](https://github.com/react-native-training/react-native-elements/issues?q=is%3Aissue+is%3Aopen+label%3A%22%F0%9F%91%B6+Good+First+Issue%22) to see them.
+We encourage everyone to contribute & submit PR's especially first-time
+contributors. Look for the label `👶 Good First Issue` on the issues. Click
+[here](https://github.com/react-native-training/react-native-elements/issues?q=is%3Aissue+is%3Aopen+label%3A%22%F0%9F%91%B6+Good+First+Issue%22)
+to see them.
 
-If there is something you's like to see or request a new feature, please submit an [issue](https://github.com/react-native-training/react-native-elements/issues/new) or a [pull request](https://github.com/react-native-training/react-native-elements/pulls).
+If there is something you's like to see or request a new feature, please submit
+an
+[issue](https://github.com/react-native-training/react-native-elements/issues/new)
+or a
+[pull request](https://github.com/react-native-training/react-native-elements/pulls).
 
 ### Slack Community
 
-In case you have any other question or would like to come say **Hi!** to the RNE community, join our [Slack team](https://reactnativetraining.herokuapp.com/). See you on the other side! 👋😃
+In case you have any other question or would like to come say **Hi!** to the RNE
+community, join our [Slack team](https://reactnativetraining.herokuapp.com/).
+See you on the other side! 👋😃
 
 ## Backers
 
-Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/react-native-elements#backer)]
+Support us with a monthly donation and help us continue our activities.
+[[Become a backer](https://opencollective.com/react-native-elements#backer)]
 
 <a href="https://opencollective.com/react-native-elements/backer/0/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/0/avatar.svg"></a>
 <a href="https://opencollective.com/react-native-elements/backer/1/website" target="_blank"><img src="https://opencollective.com/react-native-elements/backer/1/avatar.svg"></a>
@@ -193,7 +244,9 @@ Support us with a monthly donation and help us continue our activities. [[Become
 
 ## Sponsors
 
-Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/react-native-elements#sponsor)]
+Become a sponsor and get your logo on our README on Github with a link to your
+site.
+[[Become a sponsor](https://opencollective.com/react-native-elements#sponsor)]
 
 <a href="https://opencollective.com/react-native-elements/sponsor/0/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/0/avatar.svg"></a>
 <a href="https://opencollective.com/react-native-elements/sponsor/1/website" target="_blank"><img src="https://opencollective.com/react-native-elements/sponsor/1/avatar.svg"></a>

diff --git a/docs/avatar.md b/docs/avatar.md
@@ -76,30 +76,30 @@ title: Avatar
 ```js
 <Avatar
   rounded
-  icon={{name: 'user'}}
+  icon={{name: 'user', type: 'font-awesome'}}
   onPress={() => console.log("Works!")}
   activeOpacity={0.7}
   containerStyle={{flex: 2, marginLeft: 20, marginTop: 115}}
 />
 <Avatar
   size="small"
   rounded
-  icon={{name: 'user'}}
+  icon={{name: 'user', type: 'font-awesome'}}
   onPress={() => console.log("Works!")}
   activeOpacity={0.7}
   containerStyle={{flex: 2, marginLeft: 20, marginTop: 115}}
 />
 <Avatar
   size="medium"
   overlayContainerStyle={{backgroundColor: 'blue'}}
-  icon={{name: 'meetup', color: 'red'}}
+  icon={{name: 'meetup', color: 'red', type: 'font-awesome'}}
   onPress={() => console.log("Works!")}
   activeOpacity={0.7}
   containerStyle={{flex: 3, marginTop: 100}}
 />
 <Avatar
   size="large"
-  icon={{name: 'rocket', color: 'orange'}}
+  icon={{name: 'rocket', color: 'orange', type: 'font-awesome'}}
   overlayContainerStyle={{backgroundColor: 'white'}}
   onPress={() => console.log("Works!")}
   activeOpacity={0.7}
@@ -108,21 +108,34 @@ title: Avatar
 <Avatar
   size="xlarge"
   rounded
-  icon={{name: 'home'}}
+  icon={{name: 'home', type: 'font-awesome'}}
   onPress={() => console.log("Works!")}
   activeOpacity={0.7}
   containerStyle={{flex: 5, marginRight: 60}}
 />
 <Avatar
   size={200}
   rounded
-  icon={{name: 'user'}}
+  icon={{name: 'user', type: 'font-awesome'}}
   onPress={() => console.log("Works!")}
   activeOpacity={0.7}
   containerStyle={{flex: 2, marginLeft: 20, marginTop: 115}}
 />
 ```
 
+#### 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,9 @@ title: Avatar
 * [`size`](#size)
 * [`title`](#title)
 * [`titleStyle`](#titlestyle)
+* [`placeholderStyle`](#placeholderstyle)
+* [`renderPlaceholderContent`](#renderplaceholdercontent)
+* [`ImageComponent`](#ImageComponent)
 
 ---
 
@@ -262,6 +278,7 @@ Image source
 | object (style) |  none   |
 
 ---
+
 ### `size`
 
 Size of the avatar
@@ -274,7 +291,7 @@ Size of the avatar
 
 ### `title`
 
-Renders title in the avatar
+Renders title in the placeholder
 
 |  Type  | Default |
 | :----: | :-----: |
@@ -290,3 +307,32 @@ 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   |
+
+---
+
+### `ImageComponent`
+
+Custom ImageComponent for Avatar
+
+|            Type            | Default |
+| :------------------------: | :-----: |
+| React component or element |  Image   |
diff --git a/docs/card.md b/docs/card.md
@@ -62,7 +62,6 @@ import { Card, ListItem, Button, Icon } from 'react-native-elements'
   <Button
     icon={<Icon name='code' color='#ffffff' />}
     backgroundColor='#03A9F4'
-    fontFamily='Lato'
     buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0}}
     title='VIEW NOW' />
 </Card>