react-navtive-segment-control

Segment Control RN

Installation

npm install react-navtive-segment-control

yarn add react-navtive-segment-control

Usage

• Import Component

import { SegmentControl } from'react-navtive-segment-control';

 <SegmentControl
    segments={data}
    activeTab={activeTab}
    onPress={(value) => {
      console.log(value);
    }}
  />

• Example:

import react, {useState}from 'react'
import { RefObject, SegmentControl } from 'react-navtive-segment-control';

const data = [
  {label : "Left", icon : "left"},
  {label : "Right", icon : "right"}
  ]

const App = ()=>{
  const [activeTab,setActiveTab] = useState(0)
  return (
    <SegmentControl
      segments={data}
      activeTab={activeTab}
      onPress={(value) => {
        // value is object active in data
        console.log(value);
      }}
    />
  )
}
export default App

Reference

Props

segments

an array of objects segments

| Type | Required | | ----- | -------- | | array | Yes |

activeTab

index of array in segment

| Type | Required | | ------ | -------- | | number | Yes |

labelField

key label you want to display (in the object of the segment array)

| Type | Required | default | | ------ | -------- | ------- | | string | No | title |

iconField

key icon you want to display (in the object of the segment array)

| Type | Required | default | | ------ | -------- | ------- | | string | No | icon |

duration

duration animated

| Type | Required | default | | ------ | -------- | ------- | | number | No | 300ms |

style

style container

| Type | Required | default | | ------ | -------- | ------- | | object | No | |

activeStyle

style box active

| Type | Required | default | | ------ | -------- | ------- | | object | No | |

textStyle

textStyle box

| Type | Required | default | | ------ | -------- | ------- | | object | No | |

textActiveStyle

textActiveStyle box active

| Type | Required | default | | ------ | -------- | ------- | | object | No | |

onPress

Press Segment

onPress((value,i)=>{})

| Type | Required | default | | -------- | -------- | ------- | | function | No | |

updateActive

updateActive of Ref segment

updateActive(index)

| Type | Required | default | | -------- | -------- | ------- | | function | No | |

License

MIT

Made with create-react-native-library