Skip to content

Commit

Permalink
Refactor Header (#1221)
Browse files Browse the repository at this point in the history 
* Refactor Header

* Fix header + add children feature

* Update docs

* Update test

* Update docs

* Revert "Update test"

This reverts commit af7192b.

* Fix space when placement is not centered

* Add padding when placement is not center

* Prioritize centerContainerStyle style

* Fix tests -ish

* (types) Add updated header props

* Fixing conflicts
  • Loading branch information
@martinezguillaume @iRoachie
martinezguillaume authored and iRoachie committed Sep 23, 2018
1 parent 6a574c2 commit d574d3b
Show file tree
Hide file tree
Showing 15 changed files with 539 additions and 330 deletions.
107 changes: 66 additions & 41 deletions docs/header.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,34 +78,49 @@ Components defined through props take precedence over components passed in as ch

### Header customisability

We wanted the Header to be as customisable as possible, so you are free to try different combinations of props. For example, if you want to change the left, center, or right component's layout, you can adjust the `innerContainerStyles`
We wanted the Header to be as customisable as possible, so you are free to try different combinations of props. For example, if you want to change the left, center, or right component's layout, you can adjust the `containerStyle`

```js
<Header
statusBarProps={{ barStyle: 'light-content' }}
barStyle="light-content" // or directly
leftComponent={<MyCustomLeftComponent />}
centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
outerContainerStyles={{ backgroundColor: '#3D6DCC' }}
innerContainerStyles={{ justifyContent: 'space-around' }}
containerStyle={{
backgroundColor: '#3D6DCC',
justifyContent: 'space-around',
}}
/>
```

### Props

* [`containerStyle`](#containerstyle)
* [`backgroundColor`](#backgroundcolor)
* [`leftComponent`](#leftcomponent)
* [`centerComponent`](#centercomponent)
* [`rightComponent`](#rightcomponent)
* [`leftContainerStyle`](#leftcontainerstyle)
* [`centerContainerStyle`](#centercontainerstyle)
* [`innerContainerStyles`](#innercontainerstyles)
* [`leftComponent`](#leftcomponent)
* [`outerContainerStyles`](#outercontainerstyles)
* [`rightContainerStyle`](#rightcontainerstyle)
* [`placement`](#placement)
* [`rightComponent`](#rightcomponent)
* [`barStyle`](#barstyle)
* [`statusBarProps`](#statusbarprops)

---

# Reference

### `containerstyle`

styling around the main container

| Type | Default |
| :---: | :-----: |
| style | none |

---

### `backgroundColor`

sets backgroundColor of the parent component
Expand All @@ -116,80 +131,90 @@ sets backgroundColor of the parent component

---

### `leftComponent`

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 |

---

### `centerComponent`

define your center component here

| Type | Default |
| :---------------------------------------------------------------------------------------------------------------------: | :-----: |
| configuration object for default component (text: string, ...props for React Native Text component) valid React Element | none |
| 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 |

---

### `centerContainerStyle`
### `rightComponent`

styling for container around the centerComponent
define your right component here

| Type | Default |
| :----: | :------------------------------------------------------------: |
| object | { flex: 1, marginHorizontal: Platform.OS === 'ios' ? 15 : 16 } |
| 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 |

---

### `innerContainerStyles`
### `leftContainerStyle`

styling for inner container
styling for container around the leftComponent

| Type | Default |
| :------------: | :---------------------------------------------------------------------------------------------------------------------------------------------: |
| object (style) | [source](https://github.com/react-native-training/react-native-elements/blob/1f06e20e7742b87be696cf3921979afdfdd87315/src/header/Header.js#L85) |
| Type | Default |
| :---: | :---------: |
| style | { flex: 1 } |

---

### `leftComponent`
### `centerContainerStyle`

define your left component here
styling for container around the centerComponent

| Type | Default |
| :-------------------------------------------------------------------------------------------------------------------------: | :-----: |
| configuration object for default component (icon: string, ...props for React Native Elements Icon) or a valid React Element | none |
| Type | Default |
| :---: | :---------: |
| style | { flex: 3 } |

---

### `outerContainerStyles`
### `rightContainerStyle`

styling for outer container
styling for container around the rightComponent

| Type | Default |
| :------------: | :---------------------------------------------------------------------------------------------------------------------------------------------: |
| object (style) | [source](https://github.com/react-native-training/react-native-elements/blob/1f06e20e7742b87be696cf3921979afdfdd87315/src/header/Header.js#L91) |
| Type | Default |
| :---: | :---------: |
| style | { flex: 1 } |

---

### `placement`

Alignment for title

| Type | Default |
| :-----: | :------: |
| boolean | 'center' |
| Type | Default |
| :-------------------------: | :------: |
| 'left', 'center' or 'right' | 'center' |

---

### `rightComponent`
### `barStyle`

define your right component here
Sets the color of the status bar text.

| Type | Default |
| :-----------------------------------------------------------------------------------------------------------------------------------: | :-----: |
| configuration object for default component (icon: string, ...props for React Native Elements Icon component) or a valid React Element | none |
| Type | Default |
| :----------------------------------------: | :----------------------------------------------------------------------------------------: |
| 'default', 'light-content', 'dark-content' | 'default' ([source](https://facebook.github.io/react-native/docs/statusbar.html#barstyle)) |

---

### `statusBarProps`

accepts all props for StatusBar

| Type | Default |
| :------------: | :-----: |
| object (props) | none |
| Type | Default |
| :-----------------------------------------------------------------------------------------: | :-----: |
| { [...StatusBar props](https://facebook.github.io/react-native/docs/statusbar.html#props) } | none |
1 change: 0 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@
"logo": "https://opencollective.com/react-native-elements/logo.txt"
},
"dependencies": {
"lodash.isempty": "^4.4.0",
"lodash.times": "^4.3.2",
"opencollective-postinstall": "^2.0.0",
"prop-types": "^15.5.8"
Expand Down
13 changes: 0 additions & 13 deletions src/header/DummyNavButton.js
View file

This file was deleted.

0 comments on commit d574d3b

Please sign in to comment.