React Native Segmented and Tab control V.1.0.0

Installation

1. Install library

   npm install rn-segmented-tab-controls

SegmentedControl Component

2. 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

| Prop | Description | Type | Required | Default | | ----------------------- | --------------------------------------------------------------- | -------------------------------- | -------- | ----------- | | values | Key and value array to generate each tab. | {key: string; value: string}[] | Yes | None | | onChange | Function that returns the selected value. | (value: string) => void | Yes | None_ | | label | The label with which you want to identify the segmentedControl. | string | No | None | | labelStyle | Styles for label. | StyleProp<TextStyle> | No | None | | selectedIndex | Selected initial value. | number | No | 0 | | backgroundColor | SegmentedControl background color. | string | No | '#CCCCCC' | | tintColor | Tint color for the selected tab. | string | No | '#FFFFFF' | | textColor | Text color in the segmentedControl. | string | No | '#000000' | | selectedTextColor | Text color en the selected tab. | string | No | '#000000' | | style | Styles for the component container. | StyleProp<ViewStyle> | No | None |

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

| Prop | Description | Type | Required | Default | | ------------------------ | --------------------------------------------------------- | ------------------------------------------ | -------- | ----------- | | values | Key and renderItem array to generate each tab. | {key: string; renderItem: JSX.Element}[] | Yes | None | | label | The label with which you want to identify the tabControl. | string | No | None | | labelStyle | Styles for label. | StyleProp<TextStyle> | No | None | | selectedIndex | Selected initial value. | number | No | 0 | | backgroundTabColor | TabControl background color. | string | No | '#CCCCCC' | | tabTintColor | Tint color for the selected tab. | string | No | '#FFFFFF' | | textColor | Text color in the TabControl. | string | No | '#000000' | | selectedTextColor | Text color en the selected tab. | string | No | '#000000' | | containerStyle | Styles for the rendered component. | StyleProp<ViewStyle> | No | None | | style | Styles for the component container. | StyleProp<ViewStyle> | No | None |

License

This project is licenced under the MIT License.