react-native-segmented-control-tab

v4.0.0

A react native component with the same concept of react native's SegmantedControlIOS, Primarily built to support both IOS and Android. For more information about how to use this package see README

Latest version published 3 years ago

License: MIT

NPM

GitHub

Package Health Score

56 / 100

security
No known security issues
popularity
Recognized
maintenance
Inactive
community
Sustainable

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

All Versions

Version				Vulnerabilities	License Risk
4.0.0	\|	08/2021		0 C 0 H 0 M 0 L	0 H 0 M 0 L
3.4.1	\|	07/2019	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L
2.0.1	\|	10/2016		0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.0.3	\|	09/2016		0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Recognized

Weekly Downloads (19,109)

GitHub Stars: 610
Forks: 119
Contributors: 30

Direct Usage Popularity

The npm package react-native-segmented-control-tab receives a total of 19,109 downloads a week. As such, we scored react-native-segmented-control-tab popularity level to be Recognized.

Based on project statistics from the GitHub repository for the npm package react-native-segmented-control-tab, we found that it has been starred 610 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Sustainable

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 30
Funding: No

With more than 10 contributors for the react-native-segmented-control-tab repository, this is possibly a sign for a growing and inviting community.

We found a way for you to contribute to the project! Looks like react-native-segmented-control-tab is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Inactive

Commit Frequency

No Recent Commits

Open Issues: 5
Open PR: 14
Last Release: 3 years ago
Last Commit: 2 years ago

Further analysis of the maintenance status of react-native-segmented-control-tab based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Inactive.

An important project maintenance signal to consider for react-native-segmented-control-tab is that it hasn't seen any new versions released to npm in the past 12 months, and could be considered as a discontinued project, or that which receives low attention from its maintainers.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: not defined

Age: 8 years
Dependencies: 0 Direct
Versions: 16
Install Size: 32 kB
Dist-tags: 1
# of Files: 8
Maintainers: 1
TS Typings: No

react-native-segmented-control-tab has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

react-native-segmented-control-tab(for Android/iOS) 🚀

A react native component with the same concept of react native's SegmantedControlIOS, Primarily built to support both IOS and Android. 💡

ScreenShots

Android

Demo

iOS

Demo

Install

npm install react-native-segmented-control-tab --save

Usage

IMPORTANT

This has been made into a controlled component from 3.0. Those who are familiar with 2.0, read below for the updated usage.

import SegmentedControlTab from "react-native-segmented-control-tab";

class ConsumerComponent extends Component {
  constructor() {
    super();
    this.state = {
      selectedIndex: 0
    };
  }

  handleIndexChange = index =&gt; {
    this.setState({
      ...this.state,
      selectedIndex: index
    });
  };

  render() {
    return (
      
    );
  }
}

Props

Name	Description	Default	Type
values	titles of tabs	`['One', 'Two', 'Three']`	array
selectedIndex	index of tab item to be selected initially	[0]	number
selectedIndices	Array of indices of tab items to be selected initially - when multiple prop is true else it will take selectedIndex	[0]	arrayOf(PropTypes.number)
enabled	Boolean to enable or disable the component	true	bool
multiple	Boolean which enables the multiple selection option	false	bool
borderRadius	borderRadius of whole tab	5	number
tabsContainerStyle	external styles can be passed to override the default styles of the segmentedControl wrapper	base styles added in SegmentedControlTab.js	object(styles)
tabsContainerDisableStyle	Custom style that can be passed when `enable` is set to false	default style `opacity: 0.6`	object(styles)
tabStyle	external styles can be passed to override the default styles of the tabs	base styles added in SegmentedControlTab.js	object(styles)
firstTabStyle	external styles can be passed to override the default styles of the first tab	base styles added in SegmentedControlTab.js	object(styles)
lastTabStyle	external styles can be passed to override the default styles of the last tab	base styles added in SegmentedControlTab.js	object(styles)
tabTextStyle	external styles can be passed to override the default styles of the tab title	base styles added in SegmentedControlTab.js	object(styles)
activeTabStyle	external styles can be passed to override the default styles of the active tab	base styles added in SegmentedControlTab.js	object(styles)
activeTabTextStyle	external styles can be passed to override the default styles of the active tab text	base styles added in SegmentedControlTab.js	object(styles)
badges	badges values to display	`[1, 2, 3]`	array
tabBadgeContainerStyle	external style can be passed to override the default style of the badge container	base styles added in SegmentedControlTab.js	object(styles)
activeTabBadgeContainerStyle	external style can be passed to override the default style of the active badge container	base styles added in SegmentedControlTab.js	object(styles)
tabBadgeStyle	external style can be passed to override the default style of the badge text	base styles added in SegmentedControlTab.js	object(styles)
activeTabBadgeStyle	external style can be passed to override the default style of the active badge text	base styles added in SegmentedControlTab.js	object(styles)
onTabPress	call-back function when a tab is selected	() => {}	func
allowFontScaling	whether the segment & badge text should allow font scaling (default matches React Native default)	true	bool
accessible	enables accessibility for each tab	true	bool
accessibilityLabels	Reads out the given text on each tab press when voice over is enabled. If not set, uses the text passed in as values in props as a fallback	['Label 1', 'Label 2', 'Label 3']	array
activeTabOpacity	Opacity value to customize tab press	1	number

Custom styling

 this.setState({ selected: index })}
/&gt;;

const styles = StyleSheet.create({
  tabsContainerStyle: {
    //custom styles
  },
  tabStyle: {
    //custom styles
  },
  firstTabStyle: {
    //custom styles
  },
  lastTabStyle: {
    //custom styles
  },
  tabTextStyle: {
    //custom styles
  },
  activeTabStyle: {
    //custom styles
  },
  activeTabTextStyle: {
    //custom styles
  },
  tabBadgeContainerStyle: {
    //custom styles
  },
  activeTabBadgeContainerStyle: {
    //custom styles
  },
  tabBadgeStyle: {
    //custom styles
  },
  activeTabBadgeStyle: {
    //custom styles
  }
});

P.S.

🙏 credits to all the other devs who had built the similar concept, had referred some of the their components on the github, to get a fair idea 💡 to build this.😊 If you have any idea in implementing this further, let me know or you can update it and raise a PR.😊🚀

License

MIT

react-native-segmented-control-tab development dependencies

babel-cli babel-eslint babel-jest babel-preset-flow babel-preset-react-native eslint eslint-config-airbnb eslint-plugin-babel eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react flow-bin jest jest-react-native react react-native react-test-renderer

FAQs

What is react-native-segmented-control-tab?

A react native component with the same concept of react native's SegmantedControlIOS, Primarily built to support both I... Visit Snyk Advisor to see a full health score report for react-native-segmented-control-tab, including popularity, security, maintenance & community analysis.

Is react-native-segmented-control-tab popular?

The npm package react-native-segmented-control-tab receives a total of 19,109 weekly downloads. As such, react-native-segmented-control-tab popularity was classified as a recognized. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is react-native-segmented-control-tab well maintained?

We found indications that react-native-segmented-control-tab is an Inactive project. See the full package health analysis to learn more about the package maintenance status.

Is react-native-segmented-control-tab safe to use?

The npm package react-native-segmented-control-tab was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 25 April-2024, at 17:20 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP

Package Health Score

Explore Similar Packages

Security and license risk for significant versions

Is your project affected by vulnerabilities?

Weekly Downloads (19,109)

Direct Usage Popularity

Embed Package Health Score Badge

Commit Frequency

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Readme

react-native-segmented-control-tab(for Android/iOS) 🚀

ScreenShots

Android

iOS

Install

Usage

IMPORTANT

Props

Custom styling

P.S.

License

react-native-segmented-control-tab development dependencies

FAQs

What is react-native-segmented-control-tab?

Is react-native-segmented-control-tab popular?

Is react-native-segmented-control-tab well maintained?

Is react-native-segmented-control-tab safe to use?

Build a secure application checklist

Select a recommended open source package

Scan your app for vulnerabilities

Source Code

Open Source

Container

Config

Fix identified vulnerabilities

Monitor for new issues