2.0.0 #2058

react-native-elements · Apr 29, 2020 · 30cc305 · 30cc305
2 parents 64981ae + 92774f9
commit 30cc305
Show file tree

Hide file tree

Showing 97 changed files with 9,021 additions and 2,995 deletions.
diff --git a/.github/CONTRIBUTING.MD b/.github/CONTRIBUTING.MD
@@ -26,7 +26,7 @@ If you wish to submit a pull request for a new feature or issue, you should star
 - `yarn install` OR `npm install`
 - `npm test`
 
-One you have done this, create a new branch with a name that loosely describes the issue on which you will be working. Once you think you have the addressed the issue in question, submit a pull request to the `next` branch.
+Now create a new branch with a name that loosely describes the issue on which you will be working. Once you think you have addressed the issue in question, submit a pull request to the `next` branch.
 
 ### Committing and Pushing Changes
 

diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -0,0 +1 @@
+open_collective: react-native-elements
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -3,20 +3,27 @@ name: Bug report
 about: Create a report to help us improve
 ---
 
-> Before filling out an issue, be sure to check the version of react-native-elements you are using and the docs for that version over [here](https://react-native-elements.github.io/react-native-elements/versions.html).
+<!--
+Before filling out an issue, be sure to check the version of react-native-elements you are using and the docs for that version over [here](https://react-native-elements.github.io/react-native-elements/versions.html).
+-->
 
 **Explain what you did**
-What you were trying to accomplish.
 
-**Expected behaviour**
-A clear and concise description of what you expected to happen.
+<!-- What you were trying to accomplish. -->
+
+**Expected behavior**
+
+<!-- A clear and concise description of what you expected to happen. -->
 
 **Describe the bug**
-A clear and concise description of what the bug is.
+
+<!--  A clear and concise description of what the bug is. -->
 
 **To Reproduce**
+
 We highly recommend that you re-create the bug on [Snack](https://snack.expo.io). If not, list the steps that a reviewer can take to reproduce the behaviour:
 
+<!--
 Example:
 
 ```bash
@@ -29,17 +36,15 @@ https://snack.expo.io/xxx
 3. Scroll down to '....'
 4. See error
 ```
-
-**Possible Solution**
-Can you suggest a possible fix that would address this issue?
+-->
 
 **Screenshots**
-If applicable, add screenshots to help explain your problem.
+
+<!-- If applicable, add screenshots to help explain your problem. -->
 
 **Your Environment (please complete the following information):**
 
 | software              | version |
 | --------------------- | ------- |
 | react-native-elements |         |
 | react-native          |         |
-| npm or yarn           |         |
diff --git a/.travis.yml b/.travis.yml
@@ -15,12 +15,12 @@ install:
   - yarn global add codecov
   - yarn
 script:
-  - yarn run lint
-  - yarn run test:ci && codecov
+  - yarn lint
+  - yarn test:ci && codecov
 after_success:
   - |
     if [ "$TRAVIS_PULL_REQUEST" == "false" ] && ["$TRAVIS_BRANCH" == "next" ]; 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
+      cd website && yarn && GIT_USER=react-native-elements-ci yarn publish-gh-pages
     fi
diff --git a/README.md b/README.md
@@ -4,25 +4,21 @@
   </a>
 </p>
 
-<h3 align="center">
-  React Native Elements
-</h3>
-
 <p align="center">
   Cross Platform <a href="https://facebook.github.io/react-native/">React Native</a> UI Toolkit
 </p>
 
 <p align="center">
   <a href="https://www.npmjs.com/package/react-native-elements"><img src="https://img.shields.io/npm/v/react-native-elements.svg?style=flat-square"></a>
   <a href="https://www.npmjs.com/package/react-native-elements"><img src="https://img.shields.io/npm/dm/react-native-elements.svg?style=flat-square"></a>
-  <a href="https://travis-ci.org/react-native-training/react-native-elements"><img src="https://img.shields.io/travis/react-native-training/react-native-elements/master.svg?style=flat-square"></a>
-  <a href="https://reactnativetraining.herokuapp.com/"><img src="https://reactnativetraining.herokuapp.com/badge.svg"></a>
+  <a href="https://travis-ci.org/react-native-elements/react-native-elements"><img src="https://img.shields.io/travis/react-native-elements/react-native-elements/master.svg?style=flat-square"></a>
+  <a href="https://react-native-elements-slack.herokuapp.com"><img src="https://react-native-elements-slack.herokuapp.com/badge.svg"></a>
 </p>
 
 <p align="center">
   <a href="#backers"><img src="https://opencollective.com/react-native-elements/backers/badge.svg"></a>
   <a href="#sponsors"><img src="https://opencollective.com/react-native-elements/sponsors/badge.svg"></a>
-  <a href="https://codecov.io/gh/react-native-training/react-native-elements"><img src="https://codecov.io/gh/react-native-training/react-native-elements/coverage.svg"></a>
+  <a href="https://codecov.io/gh/react-native-elements/react-native-elements"><img src="https://codecov.io/gh/react-native-elements/react-native-elements/coverage.svg"></a>
   <a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/styled_with-prettier-ff69b4.svg"></a>
   <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-blue.svg"></a>
 </p>
@@ -74,38 +70,13 @@ import { Button } from 'react-native-elements';
 - [x] [Tile](https://react-native-elements.github.io/react-native-elements/docs/tile.html)
 - [x] [Tooltip](https://react-native-elements.github.io/react-native-elements/docs/tooltip.html)
 
-## 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 💰💰💰.
-
-Here are some of the screens that our developers have created so far:
-
-<div style="display: flex; flex-direction: row; margin-bottom: 50px">
-  <img src="https://user-images.githubusercontent.com/7840686/32702785-b1d9114e-c7a0-11e7-9999-6c6a00d432ec.gif" width="280" />
-  <img src="https://user-images.githubusercontent.com/7840686/32702789-b6bbdce6-c7a0-11e7-8034-8144274fbdae.gif" width="280" />
-  <img src="https://user-images.githubusercontent.com/7840686/32702791-b947eedc-c7a0-11e7-8e8c-7dff1bd80564.gif" width="280" />
-</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.
-
-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)**.
-
 ## React Native Web support
 
 As a cross platform UI Toolkit, you can now use RNE on the web & share your codebase between your React Native + React web apps. RNE components are rendered perfectly on browser. You can achieve this to target iOS, Android and Web by collaborating RNE and [React Native for Web](https://github.com/necolas/react-native-web).
 
 Click [here](https://react-native-elements.github.io/react-native-elements/blog/2018/12/13/react-native-web.html) for a full walkthrough using React Native Elements + React Native Web.
 
-## Expo Demo App
+## Demo App
 
 Checkout the official
 [React Native Elements App](https://expo.io/@monte9/react-native-elements-app)
@@ -142,10 +113,16 @@ an
 or a
 [pull request](https://github.com/react-native-elements/react-native-elements/pulls).
 
+### Core Contributors
+
+We are currently looking for new core contributors that can help lead this project.
+
+[Learn more here](https://github.com/react-native-elements/react-native-elements/issues/2222)
+
 ### 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/).
+community, join our [Slack team](https://react-native-elements-slack.herokuapp.com).
 See you on the other side! 👋😃
 
 ## Backers

diff --git a/docs/avatar.md b/docs/avatar.md
@@ -20,8 +20,8 @@ commonly used to represent a user and can contain photos, icons, or even text.
     <figcaption>Icon</figcaption>
   </figure>
   <figure>
-    <img src="/react-native-elements/img/avatar/avatar--edit.jpg" alt="Standard Avatar with edit button" />
-    <figcaption>Standard with edit button</figcaption>
+    <img src="/react-native-elements/img/avatar/avatar--edit.jpg" alt="Standard Avatar with accessory" />
+    <figcaption>Standard with accessory</figcaption>
   </figure>
 </div>
 
@@ -45,13 +45,13 @@ import { Avatar } from 'react-native-elements';
 // Avatar with Icon
 <Avatar rounded icon={{ name: 'home' }} />
 
-// Standard Avatar with edit button
+// Standard Avatar with accessory
 <Avatar
   source={{
     uri:
       'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
   }}
-  showEditButton
+  showAccessory
 />
 ```
 
@@ -157,7 +157,7 @@ import { ListItem } from 'react-native-elements';
   leftAvatar={{
     title: name[0],
     source: { uri: avatar_url },
-    showEditButton: true,
+    showAccessory: true,
   }}
   title={name}
   subtitle={role}
@@ -169,21 +169,21 @@ import { ListItem } from 'react-native-elements';
 
 ## Props
 
+- [`accessory`](#accessory)
 - [`activeOpacity`](#activeopacity)
 - [`avatarStyle`](#avatarstyle)
 - [`containerStyle`](#containerstyle)
-- [`editButton`](#editbutton)
 - [`icon`](#icon)
 - [`iconStyle`](#iconstyle)
 - [`imageProps`](#imageprops)
-- [`onEditPress`](#oneditpress)
+- [`onAccessoryPress`](#onaccessorypress)
 - [`onLongPress`](#onlongpress)
 - [`onPress`](#onpress)
 - [`overlayContainerStyle`](#overlaycontainerstyle)
 - [`placeholderStyle`](#placeholderstyle)
 - [`rounded`](#rounded)
+- [`showAccessory`](#showaccessory)
 - [`size`](#size)
-- [`showEditButton`](#showeditbutton)
 - [`source`](#source)
 - [`title`](#title)
 - [`titleStyle`](#titlestyle)
@@ -195,6 +195,17 @@ import { ListItem } from 'react-native-elements';
 
 ## Reference
 
+### `accessory`
+
+Icon or Image used as small overlay.
+If a `source` key is used in the object, then an Image will be used.
+
+|                                  Type                                  |                                    Default                                    |
+| :--------------------------------------------------------------------: | :---------------------------------------------------------------------------: |
+| {[...Icon props](icon.md#props)} or {[...Image props](image.md#props)} | { name: 'mode-edit', type: 'material', color: '#fff', underlayColor: '#000' } |
+
+---
+
 ### `activeOpacity`
 
 Opacity when pressed
@@ -225,16 +236,6 @@ Styling for outer container
 
 ---
 
-### `editButton`
-
-Icon props to be user for edit button
-
-|               Type               |                                    Default                                    |
-| :------------------------------: | :---------------------------------------------------------------------------: |
-| {[...Icon props](icon.md#props)} | { name: 'mode-edit', type: 'material', color: '#fff', underlayColor: '#000' } |
-
----
-
 ### `icon`
 
 Displays an icon as the main content of the Avatar. **Cannot be used alongside
@@ -266,9 +267,9 @@ Optional properties to pass to the avatar e.g "resizeMode"
 
 ---
 
-### `onEditPress`
+### `onAccessoryPress`
 
-Callback function when pressing on the edit button
+Callback function when pressing on the accessory
 
 |   Type   | Default |
 | :------: | :-----: |
@@ -326,33 +327,33 @@ Makes the avatar circular
 
 ---
 
-### `size`
+### `showAccessory`
 
-Size of the avatar
+Shows an accessory over the avatar (optional)
 
-|                          Type                          | Default |
-| :----------------------------------------------------: | :-----: |
-| string(`small`, `medium`, `large`, `xlarge`) or number | `small` |
+|  Type   | Default |
+| :-----: | :-----: |
+| boolean |  false  |
 
 ---
 
-### `showEditButton`
+### `size`
 
-Shows an edit button over the avatar (optional)
+Size of the avatar
 
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
+|                          Type                          | Default |
+| :----------------------------------------------------: | :-----: |
+| string(`small`, `medium`, `large`, `xlarge`) or number | `small` |
 
 ---
 
 ### `source`
 
 Image source
 
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
+|                                Type                                | Default |
+| :----------------------------------------------------------------: | :-----: |
+| [ImageSource](https://facebook.github.io/react-native/docs/images) |  none   |
 
 ---
 

diff --git a/docs/button_group.md b/docs/button_group.md
@@ -83,7 +83,6 @@ render () {
 - [`buttonStyle`](#buttonstyle)
 - [`buttons`](#buttons)
 - [`Component`](#Component)
-- [`containerBorderRadius`](#containerborderradius)
 - [`containerStyle`](#containerstyle)
 - [`disabled`](#disabled)
 - [`disabledStyle`](#disabledstyle)
@@ -99,6 +98,7 @@ render () {
 - [`selectedTextStyle`](#selectedtextstyle)
 - [`textStyle`](#textstyle)
 - [`underlayColor`](#underlaycolor)
+- [`vertical`](#vertical)
 
 ---
 
@@ -135,16 +135,6 @@ Choose other button component such as TouchableOpacity (optional)
 
 ---
 
-### `containerBorderRadius`
-
-Set's the border radius for the first and last button in the button group
-
-|  Type  | Default |
-| :----: | :-----: |
-| number |    3    |
-
----
-
 ### `containerStyle`
 
 specify styling for main button container (optional)
@@ -293,3 +283,13 @@ specify underlayColor for TouchableHighlight (optional)
 |  Type  | Default |
 | :----: | :-----: |
 | string |  white  |
+
+---
+
+### `vertical`
+
+Display the ButtonGroup vertically
+
+|  Type   | Default |
+| :-----: | :-----: |
+| boolean |  false  |