Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added extra parameters #4

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Added extra parameters #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
80fc268
Added extra parameters
injas427 Jul 27, 2019
6cde224
Added containerBackgroundColor and itemMaskBackgroundColor prop
injas427 Jul 30, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 35 additions & 8 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,21 +33,48 @@ This component requires just 2 props. `onPress` function, that should handle ren

```JSX
<TabBar
onPress={(tabIndex) => { this._handlePress(tabIndex) }}
values={[
{ title: "News", icon: require("./assets/news.png") },
{ title: "Requests", icon: require("./assets/requests.png") },
{ title: "Events", icon: require("./assets/events.png") },
{ title: "Members", icon: require("./assets/members.png") },
{ title: "Account", icon: require("./assets/account.png") }
]}
iconStyle={{ width: 50, height: 50 }}
tintColor="blue"
onPress={(tabIndex) => {
console.warn(tabIndex);
}}
isRtl={ true }
values={[
{ title: "Home", icon: require("./home.png"), tintColor: curTab == 0 ? "red" : "blue", default: true },
{ title: "Home1", icon: require("./home.png"), tintColor: curTab == 1 ? "red" : "blue", },
{ title: "Home2", icon: require("./home.png"), tintColor: curTab == 2 ? "red" : "blue", },
{ title: "Home3", icon: require("./home.png"), tintColor: curTab == 3 ? "red" : "blue", },
{ title: "Home4", icon: require("./home.png"), tintColor: curTab == 4 ? "red" : "blue", },
]}
/>
```

## Customization

Optionally you can pass `tintColor` prop, to adjust styling to your app.

1. iconStyle => Now you can style your icon used in navigator without editing core module

2. isRtl => New feature for apps that requires rtl.

3. tintColor => tintColor in values let's you add specific color for each icon

4. default => Now you can setdefault tab by passing additional parameter in values object

5. containerBackgroundColor => Now you can change default container background color by passing color value to `containerBackgroundColor` prop

6. itemMaskBackgroundColor => Now you can change default mask color by passing color value to `itemMaskBackgroundColor` prop

### Extra paramters added
| Property | Type | Default | Description | Required |
| ------------- | ------------- | ------------- | ------------- | ------------- |
| iconStyle | ImageStyle | { width: 20, height: 20 } | iconStyle prop allows you to customize the icon used in bottom tab bar | false |
| isRtl | Boolean | false | If you have rtl in your app, set valueto true and the bottom tab bar will show in reverse order | false |
| tintColor | String | Black | You can assign custom color for each icon by passing tintColor prop along with title and icon. This can be used to assign unique color for active tab | true |
| default | Boolean | false | Now default tab can be set by passing default prop along with title and icon. This can be used to focus aspecific tab before any user interaction | true |
| containerBackgroundColor | String | white | Now you can change default container background color by passing color value to `containerBackgroundColor` prop. It accespts string and hex values | false |
| itemMaskBackgroundColor | String | white | Now you can change default mask color by passing color value to `itemMaskBackgroundColor` prop. It accespts string and hex values | false |

## Author

[Patryk Mierzejewski](https://github.com/pmierzejewski)
Expand Down
Loading