react-native-segmented-control-tab

WebJar for react-native-segmented-control-tab

License

License

MIT
Categories

Categories

React User Interface Web Frameworks Native Development Tools
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

react-native-segmented-control-tab
Last Version

Last Version

3.4.0
Release Date

Release Date

Type

Type

jar
Description

Description

react-native-segmented-control-tab
WebJar for react-native-segmented-control-tab
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/kirankalyan5/react-native-segmented-control-tab

Download react-native-segmented-control-tab

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/react-native-segmented-control-tab/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>react-native-segmented-control-tab</artifactId>
    <version>3.4.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/react-native-segmented-control-tab/
implementation 'org.webjars.npm:react-native-segmented-control-tab:3.4.0'
// https://jarcasting.com/artifacts/org.webjars.npm/react-native-segmented-control-tab/
implementation ("org.webjars.npm:react-native-segmented-control-tab:3.4.0")
'org.webjars.npm:react-native-segmented-control-tab:jar:3.4.0'
<dependency org="org.webjars.npm" name="react-native-segmented-control-tab" rev="3.4.0">
  <artifact name="react-native-segmented-control-tab" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='react-native-segmented-control-tab', version='3.4.0')
)
libraryDependencies += "org.webjars.npm" % "react-native-segmented-control-tab" % "3.4.0"
[org.webjars.npm/react-native-segmented-control-tab "3.4.0"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

react-native-segmented-control-tab(for Android/iOS) ๐Ÿš€

npm Build Status Monthly Downloads GitHub stars PRs Welcome

NPM

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 => {
    this.setState({
      ...this.state,
      selectedIndex: index
    });
  };

  render() {
    return (
      <View>
        <SegmentedControlTab
          values={["First", "Second", "Third"]}
          selectedIndex={this.state.selectedIndex}
          onTabPress={this.handleIndexChange}
        />
      </View>
    );
  }
}

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

<SegmentedControlTab
  tabsContainerStyle={styles.tabsContainerStyle}
  tabStyle={styles.tabStyle}
  firstTabStyle={styles.firstTabStyle}
  lastTabStyle={styles.lastTabStyle}
  tabTextStyle={styles.tabTextStyle}
  activeTabStyle={styles.activeTabStyle}
  activeTabTextStyle={styles.activeTabTextStyle}
  selectedIndex={1}
  allowFontScaling={false}
  values={["First", "Second", "Third"]}
  onTabPress={index => this.setState({ selected: index })}
/>;

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

Versions

Version
3.4.0