Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-native-custom-segmented-control

Package Overview
Dependencies
Maintainers
5
Versions
15
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-custom-segmented-control

Native iOS Custom segmented control for React Native

  • 3.1.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
4
increased by100%
Maintainers
5
Weekly downloads
 
Created
Source

react-native-custom-segmented-control

Native UI component for Segmented Control with custom style

animationType: 'middle-line' selectedLineAlign: 'text' selectedLineMode: 'full' Screenshots

animationType: 'open-and-close' selectedLineAlign: 'text' selectedLineMode: 'text' Screenshots

animationType: 'middle-line' selectedLineAlign: 'bottom' selectedLineMode: 'text' Screenshots

animationType: 'middle-line' selectedLineAlign: 'top' selectedLineMode: 'full' Screenshots

animationType: 'middle-line' selectedLineAlign: 'top' selectedLineMode: 'full' Screenshots

animationType: 'middle-line' selectedLineAlign: 'text' selectedLineMode: 'text' Screenshots

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:

import {CustomSegmentedControl} from 'react-native-custom-segmented-control'

Now use it in your jsx inside your View:

<CustomSegmentedControl 
	style={{
		flex:1,
		backgroundColor: 'white',	
		marginVertical: 8
	}}
	textValues={['ORDERS','PRODUCTS' ]}
	selected={0}
	segmentedStyle={{
		selectedLineHeight: 2,
		fontSize:17,
		fontWeight: 'bold', // bold, italic, regular (default)
		segmentBackgroundColor: 'transparent',
		segmentTextColor: '#7a92a5',
		segmentHighlightTextColor: '#7a92a599',
		selectedLineColor: '#00adf5',
		selectedLineAlign: 'bottom', // top/bottom/text
		selectedLineMode: 'text', // full/text
		selectedTextColor: 'black',                                                  
		selectedLinePaddingWidth: 30,
		segmentFontFamily: 'system-font-bold'
	}}
	animation={{
		duration: 0.7,
		damping: 0.5,
		animationType: 'middle-line',
		initialDampingVelocity: 0.4
	}}
	onSelectedWillChange={(event)=> {
	}}
	onSelectedDidChange={(event)=> {
	}}
/>

##Properties

AttributeDescription
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
segmentedStyle[Object] see Segmented Style Properties

##Segmented Style Properties

AttributeDescription
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

AttributeDescription
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

FAQs

Package last updated on 31 Oct 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc