npmpackage.info

react-native-big-tab-bar

You can update your tab bar as an image or number, you can use with the selected one. Big tab bar is a fully customizable :)

0.0.7

TypeScript

1,915 3.6

Installations

npm install react-native-big-tab-bar

Pull Requests

Open

3

Total

30

Closed

1

Merged

26

Issues

Open

0

Total

0

Closed

0

Releases

0.0.7 🤠

0.0.7

Published on 15 Jul 2023

Version: 0.0.5

0.0.5

Published on 13 Jan 2022

View all 2 releases

Developer

sevvaleygul0

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

Yes

Node Version

16.20.0

NPM Version

8.19.4 Statistics

8 Stars

75 Commits

1 Forks

1 Watching

4 Branches

1 Contributors

Updated on 26 Jul 2023

Languages

TypeScript (30.28%)

Java (30.09%)

JavaScript (16.05%)

Objective-C (9.67%)

Ruby (9.64%)

Objective-C++ (3.16%)

Shell (1.12%)

Total Downloads

Cumulative downloads

Total Downloads

1,915

Last day

Compared to previous day

Last week

-75%

Compared to previous week

Last month

1,156.3%

402

Compared to previous month

Last year

26.6%

590

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

Demo

Installation

Add the dependency:

1npm i react-native-big-tab-bar

Import

1import BigTabBar from "react-native-big-tab-bar";

Data Model

export type ITabBar = {
id: number;
text: string;
number?: number;
image?: any;
};

Example Data

1[
2  {
3    id: 0,
4    bottomText: "Monday",
5    innerText: "8",
6  },
7  {
8    id: 1,
9    bottomText: "Tuesday",
10    image: {
11      uri: "https://image.winudf.com/v2/image/Y29tLnNnbS5iZWFjaHdhbGxwYXBlcmhkX3NjcmVlbnNob3RzXzJfZjRhOGQ4MzQ/screen-2.jpg?fakeurl=1&type=.jpg",
12    },
13  },
14  {
15    id: 2,
16    bottomText: "Wednesday",
17    innerText: "14",
18  },
19  {
20    id: 3,
21    bottomText: "Thursday",
22    image: { uri: "https://images2.alphacoders.com/468/4682.jpg" },
23  },
24];

Example Usage

1<BigTabBar tabs={tabs} />

Configuration - Props

Property	Type	Default	Description
tabs	array		Set your tab bar items
itemStyle	style	default	set your custom item button style
height	number	120	set your custom item height value
width	number	72	set your custom item width value
bottomTextStyle	style	default	set your custom text style
selectedItem	number	0	set your initial item
innerContainerHeight	number	50	set the height of the inner container
innerContainerWeight	number	50	set the width of the inner container
activeBackgroundColor	string	"#F5C812"	set your active background color
inActiveBackgroundColor	string	"#faeed9"	set the background color when it is inactive
inActiveTextColor	string	"#6e685f"	set the text color when it is inactive
activeTextColor	string	"#fff"	set the text color when it is active
ImageComponent	Image	Image	set on your own Image Component
imageStyle	style	default	set your custom image style
innerActiveTextColor	string	"#F5C812"	if there are numbers in the inner container, you can change the color when it is active
innerInActiveTextColor	string	"#F5C812"	if there are numbers in the inner container, you can change the color when it is inactive
innerTextStyle	style	default	set your custom text style
onPress	function	undefined	set your own function when onPress
onChange	function	undefined	set your own function when onChange

Author

Sevval Eygul, sevvalleygull@gmail.com

License

React Native Big Tab Bar is available under the MIT license. See the LICENSE file for more info.

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

9

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

9

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

7

SAST

Determines if the project uses static code analysis.

4

Security-Policy

Determines if the project has published a security policy.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

License

Determines if the project has defined a license.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.6

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

react-native-big-tab-bar

Installations

Pull Requests

3

30

1

26

Issues

0

0

0

Releases

Developer

sevvaleygul0

Developer Guide

CommonJS

Yes

16.20.0

8.19.4

Statistics

Languages

Total Downloads

1,915

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Demo

Installation

Import

Data Model

Example Data

Example Usage

Configuration - Props

Author

License

10

9

9

7

4

0

0

0

0

0

0

0

0

3.6

/10