1.0.4 • Published 6 months ago

rn-segmented-tab-controls v1.0.4

Weekly downloads
-
License
MIT
Repository
github
Last release
6 months ago

React Native Segmented and Tab control V.1.0.0

Installation

  1. Install library
    npm install rn-segmented-tab-controls

SegmentedControl Component

  1. Use components
import {SegmentedControl} from 'rn-segmented-tab-controls';

const App = () => {
  const [value, setValue] = useState('tab1');

  const values = [
    {key: 'Tab 1', value: 'tab1'},
    {key: 'Tab 2', value: 'tab2'},
  ];

  return (
    <SegmentedControl
      label="Segmented Control"
      values={values}
      onChange={value => setValue(value)}
    />
  );
};

Properties

PropDescriptionTypeRequiredDefault
valuesKey and value array to generate each tab.{key: string; value: string}[]YesNone
onChangeFunction that returns the selected value.(value: string) => voidYesNone_
labelThe label with which you want to identify the segmentedControl.stringNoNone
labelStyleStyles for label.StyleProp<TextStyle>NoNone
selectedIndexSelected initial value.numberNo0
backgroundColorSegmentedControl background color.stringNo'#CCCCCC'
tintColorTint color for the selected tab.stringNo'#FFFFFF'
textColorText color in the segmentedControl.stringNo'#000000'
selectedTextColorText color en the selected tab.stringNo'#000000'
styleStyles for the component container.StyleProp<ViewStyle>NoNone

TabControl Component

import {TabControl} from 'rn-segmented-tab-controls';
import {FormUser, Users} from './components';

const App = () => {
  const values = [
    {key: 'Add user', renderItem: FormUser},
    {key: 'Users', renderItem: Users},
  ];

  return <TabControl values={values} />;
};

Properties

PropDescriptionTypeRequiredDefault
valuesKey and renderItem array to generate each tab.{key: string; renderItem: JSX.Element}[]YesNone
labelThe label with which you want to identify the tabControl.stringNoNone
labelStyleStyles for label.StyleProp<TextStyle>NoNone
selectedIndexSelected initial value.numberNo0
backgroundTabColorTabControl background color.stringNo'#CCCCCC'
tabTintColorTint color for the selected tab.stringNo'#FFFFFF'
textColorText color in the TabControl.stringNo'#000000'
selectedTextColorText color en the selected tab.stringNo'#000000'
containerStyleStyles for the rendered component.StyleProp<ViewStyle>NoNone
styleStyles for the component container.StyleProp<ViewStyle>NoNone

License

This project is licenced under the MIT License.