react-native-toolbar-controls

react native toolbar with controls components support android and IOS, you can pass the props and dataset you need to get the view as you want it. It works on diffrent devices screens from 4 inch mobile screens to 10 inch screens, the example on landscape screen

• react-native-vector-icons is required to view Icons in the toolbar

ScreenShots

Installation

npm install --save react-native-toolbar-controls

Components

Reference components used in react-native-toolbar-controls:

• SegmentControl
• Switch

Usage

import ToolBarControl from 'react-native-toolbar-controls';
 
          <View>
                        <ToolBarControl segmentControlDataSet={options}
                                 centerControl={"SegmentControl"}
                                 selectedOption={"Start"}
                                 onPressSegmentControl={(option, index)=>{ console.log(option, index)}}
                                 leftControl={"Icon"}
                                 rightControl={"Switch"}
                                 leftIconName={"menu"}
                                 switchActiveText={"TS"}
                                 switchInActiveText={"TM"}
                                 onSwitchValueChange={(value)=>{console.log(value)}}
                                 onPressRightIcon={()=>{ console.log("onPressRightIcon")}}
                                 onPressLeftIcon={()=>{ console.log("onPressLeftIcon")}}
                                 rightIconName={'menu'}
                                 rightText={"RIGHT"}
                                 centerText={this.state.password}/>
          </View>

Toolbar Props

Left Control

Prop name	Type	Description
leftControl	string	keyname default is "Icon" ("Icon"/"Text")
leftIconName	string	icon name default is "menu"
leftIconColor	string	icon color default is "#fff"
onPressLeftIcon	function	callback on press left Icon
leftText	string	Text view default is "Left Text"
leftControlTextContainerStyle	object styles	text container style
leftControlTextStyle	object styles	text style

Center Control

Prop name	Type	Description
centerControl	string	keyname default is "Icon" ("SegmentControl"/"Text")
centerText	string	text view default is "Center Text"
centerControlTextContainerStyle	object styles	text container style
centerControlTextStyle	object styles	text style
segmentControlDataSet	array	array of items like [ "Start", "Stop", "Recover"]
segmentControlSelectedOption	string	default value 'Start'
onPressSegmentControl	function	callback for (option, index) on segment control change
segmentControlHeight	number	default value 6*viewPortMax, resizable
segmentControlTabStyle	object styles	segmentControl container style
segmentControlActiveTabStyle	object styles	segmentControl active container style
segmentControlTabTextStyle	object styles	segmentControl text style
segmentControlActiveTabTextStyle	object styles	segmentControl active text style
segmentControlBorderRadius	number	default value 6.4 for border radius

Right Control

Prop name	Type	Description
rightControl	string	keyname default is "Switch" ("Switch"/"Text"/"Icon")
rightText	string	text view default is "Right Text"
rightControlTextContainerStyle	object styles	text container style
rightControlTextStyle	object styles	text style
rightIconName	string	default icon name is "map"
rightIconColor	string	default icon color is "purple"
onPressRightIcon	function	callback on press left Icon
switchActiveText	string	default icon name is "ON"
switchInActiveText	string	default icon name is "OFF"
onSwitchValueChange	function	callback on value change is boolean (True/False)
toolbarHeight	string	height size set in percentage (%) of screen size and default value ('12.3%')