A fully customizable iOS like segmented control component for RN CLI projects powered by Reanimated 2/3
npm install @hadnet/react-native-segmented-controlA fully customizable iOS like segmented control component for RN CLI projects powered by Reanimated 2/3
``sh`
yarn add @hadnet/react-native-segmented-control
`tsx
import SegmentedControl, {Segment} from "@hadnet/react-native-segmented-control";
export default function App() {
return (
containerMargin={16}
segmentedControlWrapper={{
backgroundColor: '#1e1e1e',
width: 300,
borderRadius: 12,
}}
tileStyle={{
margin: 4,
backgroundColor: 'black',
// paddingVertical: 18
// borderRadius: 12,
}}
segments={[
inactiveTitleStyle={{color: '#9a999f'}}
activeTitleStyle={{color: 'white'}}
activeIconColor={'limegreen'}
icon={
// Accepts react-native-vector-icons
}
/>,
inactiveTitleStyle={{color: '#9a999f'}}
activeTitleStyle={{color: 'white'}}
activeIconColor={'#9978f2'}
icon={
/>,
]}
// badgeValues={[null, 2]}
onChange={index => setTabIndex(index)}
currentIndex={tabIndex}
/>
)
}
``
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
---