1.2.0 react-native-elements#1866

thandhla · Sep 5, 2019 · 5ea8dd1 · 5ea8dd1
2 parents 4c900a4 + 1a9f56d
commit 5ea8dd1
Show file tree

Hide file tree

Showing 106 changed files with 7,596 additions and 8,134 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1,2 @@
 website
+coverage
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,6 @@
+{
+  "extends": "@react-native-community",
+  "rules": {
+    "react-native/no-inline-styles": 0
+  }
+}
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,4 @@
+.ci/
+.github/
+docs/
+website/
diff --git a/.prettierignore b/.prettierignore
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5"
+}
diff --git a/.travis.yml b/.travis.yml
@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - '11.10.1'
+  - 'stable'
 cache:
   yarn: true
   directories:

diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+};
diff --git a/docs/avatar.md b/docs/avatar.md
@@ -229,9 +229,9 @@ Styling for outer container
 
 Icon props to be user for edit button
 
-|                                Type                                 |                                    Default                                    |
-| :-----------------------------------------------------------------: | :---------------------------------------------------------------------------: |
-| {[...Icon props](/react-native-elements/docs/icon.html#icon-props)} | { name: 'mode-edit', type: 'material', color: '#fff', underlayColor: '#000' } |
+|               Type               |                                    Default                                    |
+| :------------------------------: | :---------------------------------------------------------------------------: |
+| {[...Icon props](icon.md#props)} | { name: 'mode-edit', type: 'material', color: '#fff', underlayColor: '#000' } |
 
 ---
 
@@ -260,9 +260,9 @@ Extra styling for icon component (optional)
 
 Optional properties to pass to the avatar e.g "resizeMode"
 
-|           Type           | Default |
-| :----------------------: | :-----: |
-| object (imageProperties) |  none   |
+|                Type                | Default |
+| :--------------------------------: | :-----: |
+| {[...Image props](image.md#props)} |  none   |
 
 ---
 

diff --git a/docs/badge.md b/docs/badge.md
@@ -38,7 +38,7 @@ import { Avatar, Badge, Icon, withBadge } from 'react-native-elements'
 
 // Standard badge
 <Badge value="99+" status="error" />
-<Badge value={<Text>My Custom Badge</Text>}>
+<Badge value={<Text>My Custom Badge</Text>} />
 
 // Mini badge
 <Badge status="success" />

diff --git a/docs/button.md b/docs/button.md
@@ -170,9 +170,9 @@ style of the title when disabled
 displays a centered icon (when no title) or to the left (with text). (can be
 used along with iconRight as well). Can be an object or a custom component.
 
-|                                             Type                                              | Default |
-| :-------------------------------------------------------------------------------------------: | :-----: |
-| {[...Icon props](/react-native-elements/docs/icon.html#icon-props)}<br/>**OR**<br/> component |  none   |
+|                            Type                            | Default |
+| :--------------------------------------------------------: | :-----: |
+| {[...Icon props](icon.md#props)}<br/>**OR**<br/> component |  none   |
 
 ---
 

diff --git a/docs/card.md b/docs/card.md
@@ -67,7 +67,6 @@ import { Card, ListItem, Button, Icon } from 'react-native-elements'
   </Text>
   <Button
     icon={<Icon name='code' color='#ffffff' />}
-    backgroundColor='#03A9F4'
     buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0}}
     title='VIEW NOW' />
 </Card>
@@ -170,9 +169,9 @@ add an image as the heading with the image prop (optional)
 
 optional properties to pass to the image if provided e.g "resizeMode"
 
-|           Type           | Default |
-| :----------------------: | :-----: |
-| object (ImageProperties) |  none   |
+|                 Type                 | Default |
+| :----------------------------------: | :-----: |
+| {[...Image props](image.md#props)} ) |  none   |
 
 ---
 

diff --git a/docs/customization.md b/docs/customization.md
@@ -81,7 +81,7 @@ const App = () => {
 };
 ```
 
-The example above acheives the same goals as the first example — apply the same
+The example above achieves the same goals as the first example — apply the same
 styles to multiple instances of `Button` in the app. However this example
 applies the `raised` prop to every instance of `Button` inside the component
 tree under `ThemeProvider`. Both of these buttons will have the `raised` prop
@@ -229,23 +229,23 @@ const theme = {
 ### Using the theme in your own components
 
 You may want to make use of the theming utilities in your own components. For
-this you can use the `withTheme` HOC exported from this library. It adds two
-props to the component it wraps - `theme` and `updateTheme`.
+this you can use the `withTheme` HOC exported from this library. It adds three
+props to the component it wraps - `theme`, `updateTheme` and `replaceTheme`.
 
 ```jsx
 import React from 'react';
 import { Text } from 'react-native';
 import { withTheme } from 'react-native-elements';
 
 function MyComponent(props) {
-  const { theme, updateTheme } = props;
+  const { theme, updateTheme, replaceTheme } = props;
   return <Text style={{ color: theme.colors.primary }}>Yo!</Text>;
 }
 
 export default withTheme(MyComponent);
 ```
 
-The `updateTheme` merges the theme passed in with the current theme.
+The `updateTheme` function merges the theme passed in with the current theme.
 
 ```jsx
 const theme = {
@@ -258,6 +258,8 @@ const theme = {
 updateTheme({ colors: { primary: 'red' } });
 ```
 
+The `replaceTheme` function merges the theme passed in with the default theme.
+
 Don't want to wrap your components? You can use the `ThemeConsumer` component
 which uses render props!
 
@@ -275,6 +277,24 @@ const MyComponent = () => (
 )
 ```
 
+You can also use the ThemeContext directly if you use hooks.
+
+```jsx
+import React, { useContext } from 'react';
+import { Text } from 'react-native';
+import { ThemeContext } from 'react-native-elements';
+
+const MyComponent = () => {
+  const { theme } = useContext(ThemeContext);
+
+  return (
+    <View style={styles.container}>
+      <Text style={{ color: theme.colors.primary }}>Yo!</Text>
+    </View>
+  );
+};
+```
+
 ---
 
 ### Using the respective platform's native colors

diff --git a/docs/getting_started.md b/docs/getting_started.md
@@ -35,7 +35,7 @@ to do is install **react-native-elements**.
 ```
 yarn add react-native-elements
 # or with npm
-npm install --save react-native-elements
+npm install react-native-elements
 ```
 
 > **Note:** If you see the `UNMET PEER DEPENDENCY` warning for
@@ -63,6 +63,8 @@ npm i react-native-elements --save
 If you have already installed **react-native-vector-icons** as a dependency for
 your project you can skip this step. Otherwise run the following command:
 
+> _Manual linking of react-native-vector-icons is not necessary if you're using [email protected] or above since it is done automatically. This will throw an error though it won't prevent the application from running. To fix this you'll simply have to run `react-native unlink react-native-vector-icons` and the process will run as expected._
+
 ```
 # yarn
 yarn add react-native-vector-icons

diff --git a/docs/header.md b/docs/header.md
@@ -75,9 +75,7 @@ function that returns a React Element is valid too.
 
 ### Component precedence
 
-Components defined through props take precedence over components passed in as
-children, so in this case only the left component with icon set to home will be
-rendered.
+Components defined through children take precedence over components passed in as props, so in this case `<MyCustomLeftComponent>` will be rendered instead of `leftComponent={{ icon: 'menu' }}`.
 
 ```js
 <Header leftComponent={{ icon: 'menu' }}>
@@ -123,6 +121,8 @@ center, or right component's layout, you can adjust the `containerStyle`
 - [`placement`](#placement)
 - [`barStyle`](#barstyle)
 - [`statusBarProps`](#statusbarprops)
+- [`ViewComponent`](#viewcomponent)
+- [`linearGradientProps`](#lineargradientprops)
 
 ---
 
@@ -172,29 +172,29 @@ styling for backgroundImage in the main container
 
 define your left component here
 
-|                                                                                                                     Type                                                                                                                     | Default |
-| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: |
-| { text: string, [...Text props](https://facebook.github.io/react-native/docs/text.html#props)}<br/>**OR**<br/>{ icon: string, [...Icon props](/react-native-elements/docs/icon.html#icon-props)} <br/>**OR**<br/> React element or component |  none   |
+|                                                                                                   Type                                                                                                    | Default |
+| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: |
+| { text: string, [...Text props](https://facebook.github.io/react-native/docs/text.html#props)}<br/>**OR**<br/>{ icon: string, [...Icon props](icon.md#props)} <br/>**OR**<br/> React element or component |  none   |
 
 ---
 
 ### `centerComponent`
 
 define your center component here
 
-|                                                                                                                     Type                                                                                                                     | Default |
-| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: |
-| { text: string, [...Text props](https://facebook.github.io/react-native/docs/text.html#props)}<br/>**OR**<br/>{ icon: string, [...Icon props](/react-native-elements/docs/icon.html#icon-props)} <br/>**OR**<br/> React element or component |  none   |
+|                                                                                                   Type                                                                                                    | Default |
+| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: |
+| { text: string, [...Text props](https://facebook.github.io/react-native/docs/text.html#props)}<br/>**OR**<br/>{ icon: string, [...Icon props](icon.md#props)} <br/>**OR**<br/> React element or component |  none   |
 
 ---
 
 ### `rightComponent`
 
 define your right component here
 
-|                                                                                                                     Type                                                                                                                     | Default |
-| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: |
-| { text: string, [...Text props](https://facebook.github.io/react-native/docs/text.html#props)}<br/>**OR**<br/>{ icon: string, [...Icon props](/react-native-elements/docs/icon.html#icon-props)} <br/>**OR**<br/> React element or component |  none   |
+|                                                                                                   Type                                                                                                    | Default |
+| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: |
+| { text: string, [...Text props](https://facebook.github.io/react-native/docs/text.html#props)}<br/>**OR**<br/>{ icon: string, [...Icon props](icon.md#props)} <br/>**OR**<br/> React element or component |  none   |
 
 ---
 
@@ -255,3 +255,52 @@ accepts all props for StatusBar
 |                                            Type                                             | Default |
 | :-----------------------------------------------------------------------------------------: | :-----: |
 | { [...StatusBar props](https://facebook.github.io/react-native/docs/statusbar.html#props) } |  none   |
+
+---
+
+### `ViewComponent`
+
+component for container
+
+|          Type          |     Default     |
+| :--------------------: | :-------------: |
+| React Native Component | ImageBackground |
+
+---
+
+### `linearGradientProps`
+
+displays a linear gradient. See [usage](#lineargradient-usage).
+
+|                                                      Type                                                      | Default |
+| :------------------------------------------------------------------------------------------------------------: | :-----: |
+| {[...Gradient props](https://github.com/react-native-community/react-native-linear-gradient#additional-props)} |  none   |
+
+---
+
+## LinearGradient Usage
+
+Using LinearGradient in React Native Elements is supported through the
+[react-native-linear-gradient](https://github.com/react-native-community/react-native-linear-gradient)
+package. If you're using expo or create-react-native-app then you can use
+`linearGradientProps` prop right out the box with no additional setup.
+
+For react-native-cli users, make sure to follow the
+[installation instructions](https://github.com/react-native-community/react-native-linear-gradient#add-it-to-your-project)
+and use it like this:
+
+```jsx
+import { Header } from 'react-native-elements';
+import LinearGradient from 'react-native-linear-gradient';
+
+...
+
+<Header
+  ViewComponent={LinearGradient} // Don't forget this!
+  linearGradientProps={{
+    colors: ['red', 'pink'],
+    start: { x: 0, y: 0.5 },
+    end: { x: 1, y: 0.5 },
+  }}
+/>
+```
diff --git a/docs/image.md b/docs/image.md
@@ -36,7 +36,7 @@ import { Image } from 'react-native-elements';
 ## Props
 
 > Also receives all
-> [Image](https://facebook.github.io/react-native/docs/image#props) props
+> [React Native Image](https://facebook.github.io/react-native/docs/image#props) props
 
 - [`containerStyle`](#containerstyle)
 - [`placeholderStyle`](#placeholderstyle)