react-navtive-segment-control v0.3.3

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

activeTab

index of array in segment

labelField

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

iconField

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

duration

duration animated

style

style container

activeStyle

style box active

textStyle

textStyle box

textActiveStyle

textActiveStyle box active

onPress

Press Segment

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

updateActive

updateActive of Ref segment

updateActive(index)

License

MIT

Made with create-react-native-library