react-native-toolbar
Adaptive React Native Toolbar
Getting Started
npm i react-native-toolbar --save
To install: Icons
First of all, I have to say thank you to the people behind react-native-vector-icons. Which makes this library possible.
Github page, and follow those instructions there.
To install the react-native-vector-icons library, head over to theBasics
;; { return <View style=stylesmainContainer> <Toolbar ref= thistoolbar = toolbar/> </View> ; }
Componet Props
These are the props that are able to be pased though on the initial component view above:
static propTypes = backgroundColor: PropTypesstring borderColor: PropTypesstring shadowColor: PropTypesstring shadowOpacity: PropTypesnumber shadowRadius: PropTypesnumber toolbarHeight: PropTypesnumber toolbarZIndex: PropTypesnumber hoverIndent: PropTypesnumber hover: PropTypesbool animate: PropTypesbool presets: PropTypesobject initialKey: PropTypes keyboardType: PropTypesstring autoCapitalize: PropTypesstring returnKeyType: PropTypesstring placeholderTextColor: PropTypesstring inputTextSize: PropTypesnumber inputTextColor: PropTypesstring ;
These are the defaults for those props:
static defaultProps = backgroundColor: WHITE borderColor: null shadowColor: BLACK shadowOpacity: 04 shadowRadius: 2 toolbarHeight: 50 toolbarZIndex: 1 hoverIndent: 15 hover: false animate: true presets: null initialKey: null keyboardType: 'default' autoCapitalize: 'none' returnKeyType: 'search' placeholderTextColor: BLACK ;
Props for custom toolbars for scenes:
Below shows you how to add 2 different toolbars for 2 different keys.
The keys are linked to the key of the object, then the props for the toolbar go into that object.
Currently there are a limited number of props, but with given time there will be more.
Prop | Description | Default |
---|---|---|
hover |
Makes the toolbar have a consistant hover effect. | false |
animate |
Animated the transistions bewteen the changed in the toolbar. NOT YET IMPLEMENTED |
false |
rightButton |
Props object for the right button, the props that go in here can be found below | None |
leftButton |
Props object for the left button, the props that go in here can be found below | None |
title |
Props object for the title, the props that go in here can be found below | None |
search |
Props object for search input, the props that go in here can be found below | None |
So below the keys are toolbar1, and toolbar2. Which determines what props the toolbar has based on the inital key at the beginning and the curent key thoughout the render process.
<Toolbar ref= {thistoolbar = toolbar} presets= toolbar1: hover: true rightButton: icon: 'bars' iconStyle: color: BLUE_LINK fontSize: 25 iconFontFamily: 'FontAwesome' {} search: placeholderText: 'Where to Next?' placeholderTextColor: BLUE_LINK textStyle: color: 'grey' fontSize: 14 {} {this} {console} icon: 'search' iconStyle: color: BLUE_LINK fontSize: 18 iconFontFamily: 'FontAwesome' toolbar2: leftButton: icon: 'chevron-circle-left' iconStyle: color: BLUE_LINK fontSize: 25 iconFontFamily: 'FontAwesome' text: 'Back' textStyle: color: BLUE_LINK fontSize: 14 {} rightButton: icon: 'bars' iconStyle: color: BLUE_LINK fontSize: 25 iconFontFamily: 'FontAwesome' {} />
How to dynamically change the toolbar.
So where the keys are set above is what you need to call to change the toolbar.
What I would reccomend is to have a seperate file as constants for these key. You have to currently use the reference, to change the toolbar.
ref= {thistoolbar = toolbar}
Then to call the change from any where after the view has rendered, call:
thistoolbar;
For the above code.
thistoolbar;
Buttons
Prop | Description | Default |
---|---|---|
icon |
What icon to show | None |
iconStyle |
The icon style | None |
iconFontFamily |
What font family the icon is to show | None |
text |
What text to show | None |
textStyle |
The text style | None |
onPress |
On button press | None |
Title
Prop | Description | Default |
---|---|---|
text |
What text to show | None |
textStyle |
The text style | None |
onPress |
On button press | None |
Search
IF YOU USER SEARCH IT OVERRIDES THE TITLE AND LEFTBUTTON. SO THEREFORE MEANING IT WILL MAKE THOSE PROPS NULL AND VOID.
Prop | Description | Default |
---|---|---|
text |
What text to show | None |
textStyle |
The text style | None |
placeholder |
What placeholder to show | None |
placeholderColor |
Placeholder color, takes the props of font family and and size from the text style. | None |
onTextChanged(text) |
On text input changed | None |
onFocus |
On text input focused | None |
onSubmit |
On text input submited | None |
icon |
What icon to show | None |
iconStyle |
The icon style | None |
iconFontFamily |
What font family the icon is to show | None |