Update README.md with new NavBar and TabBar usage

99x · Apr 24, 2019 · 9cde3ee · 9cde3ee
1 parent 1f8d885
commit 9cde3ee
Showing 1 changed file with 21 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -676,19 +676,27 @@ The Navigation Header makes use of the `Text` and `Icon` atom.
 
 `NavBar` is the main container for the header. It makes use of the [View property](https://facebook.github.io/react-native/docs/view.html) and the following:
 
-| Prop                 | Description                                     | Default                                    |
-|----------------------|-------------------------------------------------|--------------------------------------------|
-| **`transparent`**    | If status bar above header is transparent       | _None_                                     |
-| **`statusBarColor`** | Background color of the `NavBar`. Android only. | _primary_ for Android, `'#F8F8F8'` for iOS |
+| Prop                 | Description                                                       | Default                                                 |
+|----------------------|-------------------------------------------------------------------|---------------------------------------------------------|
+| **`transparent`**    | If status bar above header is transparent                         | _None_                                                  |
+| **`statusBarColor`** | Background color of the `NavBar`.                                 | _primary_ for Android, `'#F8F8F8'` for iOS              |
+| **`statusBarColor`** | Content type of the `StatusBar`.('light-content', 'dark-content') | `'light-content'` for Android, `'dark-content'` for iOS |
 
-`NavBarBody` is a container that displays its children in the center of the header. It only accepts the title of the page within a Text tag. `NavBarLeft` displays its children on the left while, `NavBarRight` is displays its children on the right side of the header. 
+`NavBarBody` is a container that displays its children in the center of the header. It only accepts the title of the page within a Text tag. It makes use of the [View property](https://facebook.github.io/react-native/docs/view.html) and the following:
+
+| Prop        | Description               | Default                              |
+|-------------|---------------------------|--------------------------------------|
+| **`color`** | Color of the title`Text`. | _white_ for Android, _black_ for iOS |
+
+`NavBarLeft` displays its children on the left while, `NavBarRight` is displays its children on the right side of the header. 
 **All headers must contain these three tags, to render uniformly.**
 
 `NavBarButton` is the button element to be used within the `NavBar`. It will only accept the atoms `Text`, `Icon` and a `react-native Image`. It contains the same property as a [TouchableOpacity](https://facebook.github.io/react-native/docs/touchableopacity.html). It also comes with an inbuilt type for common features, which are `'drawer'`, `'back'` and `'search'`.
 
-| Prop       | Description                                                                 | Default |
-|------------|-----------------------------------------------------------------------------|---------|
-| **`type`** | Built in UI implementation of common `NavBar` button (drawer, back, search) | _None_  |
+| Prop        | Description                                                                 | Default                                  |
+|-------------|-----------------------------------------------------------------------------|------------------------------------------|
+| **`type`**  | Built in UI implementation of common `NavBar` button (drawer, back, search) | _None_                                   |
+| **`color`** | Text and Icon color of button.                                              | _white_ for Android, `'#0a60ff'` for iOS |
 
 #### TabBar
 The Navigation Footer makes use of the `Text` and `Icon` atom.
@@ -722,9 +730,11 @@ The Navigation Footer makes use of the `Text` and `Icon` atom.
 
 `TabBar` is the main container for the footer navigation. It makes use of the [View property](https://facebook.github.io/react-native/docs/view.html) and the following:
 
-| Prop        | Description                                     | Default                                    |
-|-------------|-------------------------------------------------|--------------------------------------------|
-| **`color`** | Background color of the `TabBar`. Android only. | _primary_ for Android, `'#F8F8F8'` for iOS |
+| Prop                | Description                          | Default                                                       |
+|---------------------|--------------------------------------|---------------------------------------------------------------|
+| **`color`**         | Background color of the `TabBar`.    | _primary_ for Android, `'#F8F8F8'` for iOS                    |
+| **`activeColor`**   | Text and Icon color of active tab.   | _white_ for Android, `'#0a60ff'` for iOS                      |
+| **`inactiveColor`** | Text and Icon color of inactive tab. | `'rgba(209, 216, 224, 0.8)'` for Android, `'#8e8e93'` for iOS |
 
 `TabItem` is the button element to be used within the `TabBar`. It will only accept the atoms `Text`, `Icon` and a `react-native Image`. It contains the same property as a [TouchableOpacity](https://facebook.github.io/react-native/docs/touchableopacity.html). In addition, it contains the following properties as well;