Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wix-incubator/react-native-custom-segmented-control
Custom version of the IOS SegmentedControl component
https://github.com/wix-incubator/react-native-custom-segmented-control
Last synced: 3 months ago
JSON representation
Custom version of the IOS SegmentedControl component
- Host: GitHub
- URL: https://github.com/wix-incubator/react-native-custom-segmented-control
- Owner: wix-incubator
- License: mit
- Created: 2016-05-15T12:03:53.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-20T07:42:24.000Z (over 1 year ago)
- Last Synced: 2024-04-23T02:36:45.791Z (7 months ago)
- Language: Objective-C
- Size: 390 KB
- Stars: 168
- Watchers: 206
- Forks: 24
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-custom-segmented-control ★132 - Native UI iOS component for Segmented Control with custom style (Components / UI)
README
# react-native-custom-segmented-control
Native UI component for Segmented Control with custom style
`animationType: 'middle-line'`
`selectedLineAlign: 'text'`
`selectedLineMode: 'full'`
`animationType: 'open-and-close'`
`selectedLineAlign: 'text'`
`selectedLineMode: 'text'`
`animationType: 'middle-line'`
`selectedLineAlign: 'bottom'`
`selectedLineMode: 'text'`
`animationType: 'middle-line'`
`selectedLineAlign: 'top'`
`selectedLineMode: 'full'`
`animationType: 'middle-line'`
`selectedLineAlign: 'top'`
`selectedLineMode: 'full'`
`animationType: 'middle-line'`
`selectedLineAlign: 'text'`
`selectedLineMode: 'text'`
## Installation
- Install using `npm`:
```
npm install react-native-custom-segmented-control --save
```
- Locate the module lib folder in your node modules:
`PROJECT_DIR/node_modules/react-native-custom-segmented-control/lib`.
- Drag the `CustomSegmentedControl.xcodeproj` project file into your project
- Add `libCustomSegmentedControl.a` to your target's **Linked Frameworks and Libraries**.
## How To Use
Require the native component:
```js
import {CustomSegmentedControl} from 'react-native-custom-segmented-control'
```
Now use it in your jsx inside your `View`:
```jsx
{
}}
onSelectedDidChange={(event)=> {
}}
/>
```
##Properties
Attribute | Description
-------- | -----------
textValues | [Array] Array of strings which will be presented on the segmented control
selected | [int] The selected segment
onSelectedWillChange | [function] callback function will be called **before** the selected animation will take place
onSelectedDidChange | [function] callback function will be called **after** the selected animation will take place
animation | [Object] see [Animation Properties](README.md#animation-properties)
segmentedStyle | [Object] see [Segmented Style Properties](README.md#segmented-style-properties)
##Segmented Style Properties
Attribute | Description
--------- | -----------
selectedLineHeight | [float] The selected line height. Default is 2
fontSize | [float] The segmented control text font size. Default is 14
segmentBackgroundColor | [Color] The segmented control background color. Default is `'black'`
segmentTextColor | [Color] The segmented control text color. Default is system default (blue)
selectedTextColor | [Color] The selected segment color
segmentHighlightTextColor | [Color] The segmnet highlight color. Default is black with alpha 0.5
segmentFontFamily | [Font/`'system-font-bold'`/`'system-font'`] The segmented control font. Default is `system-font` default
selectedLineColor | [Color] The selected line color. Default is 'black'
selectedLineAlign | [`'top'`/`'bottom'`/`'text'`] The selected line vertical alignment. Defualt is `'text'`
selectedLineMode | [`'full'`/`'text'`] The selected line mode. For determine if the line will be text width of full button width. Default is `'text'`
selectedLinePaddingWidth | [float] The selected line width padding. Default is 2
##Animation Properties
Attribute | Description
--------- | -----------
duration | [float] The animation duration. Default is 0.2 sec
damping | [float] The damping ratio for the spring animation. Default is 0 (no damping)
animationType | [`'default'`, `'middle-line'`, `'close-and-open'`] The transition animation type. Default is `'default'`
initialDampingVelocity | (float) The initial damping velocity. Default is 0