react-native-toolbar

Adaptive React Native Toolbar

Getting Started

To install: npm i react-native-toolbar --save

Icons

First of all, I have to say thank you to the people behind react-native-vector-icons. Which makes this library possible.

To install the react-native-vector-icons library, head over to the Github page, and follow those instructions there.

##Basics

import React, {Component} from 'react'
import {StyleSheet, View, Text, Image} from 'react-native';
import Toolbar from 'react-native-toolbar';

class Main extends Component {
    render() {
        return (
                <View style={styles.mainContainer}>
                        <Toolbar ref={(toolbar) => this.toolbar = toolbar}/>
                </View>
        );
    }
}

Componet Props

These are the props that are able to be pased though on the initial component view above:

 static propTypes = {
        backgroundColor: PropTypes.string,
        borderColor: PropTypes.string,
        shadowColor: PropTypes.string,
        shadowOpacity: PropTypes.number,
        shadowRadius: PropTypes.number,
        toolbarHeight: PropTypes.number,
        toolbarZIndex: PropTypes.number,
        hoverIndent: PropTypes.number,
        hover: PropTypes.bool,
        animate: PropTypes.bool,
        presets: PropTypes.object,
        initialKey: PropTypes.oneOfType([
            React.PropTypes.string,
            React.PropTypes.number,
        ]),
        keyboardType: PropTypes.string,
        autoCapitalize: PropTypes.string,
        returnKeyType: PropTypes.string,
        placeholderTextColor: PropTypes.string,
        inputTextSize: PropTypes.number,
        inputTextColor: PropTypes.string,
    };

These are the defaults for those props:

static defaultProps = {
        backgroundColor: WHITE,
        borderColor: null,
        shadowColor: BLACK,
        shadowOpacity: 0.4,
        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={(toolbar) => {this.toolbar = toolbar}} presets={{
                            toolbar1: {
                                hover: true,
                                rightButton: {
                                    icon: 'bars',
                                    iconStyle: {color: BLUE_LINK, fontSize: 25,},
                                    iconFontFamily: 'FontAwesome',
                                    onPress: () => {},
                                },
                                search: {
                                    placeholderText: 'Where to Next?',
                                    placeholderTextColor: BLUE_LINK,
                                    textStyle: {color: 'grey', fontSize: 14},
                                    onSubmit: () => {},
                                    onFocus: () => {this.onSearchFocused()},
                                    onTextChanged: (text) => {console.log(text)},
                                    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,},
                                    onPress: () => {},
                                },
                                rightButton: {
                                    icon: 'bars',
                                    iconStyle: {color: BLUE_LINK, fontSize: 25,},
                                    iconFontFamily: 'FontAwesome',
                                    onPress: () => {},
                                },
                            },
                        }}/>

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={(toolbar) => {this.toolbar = toolbar}}

Then to call the change from any where after the view has rendered, call:

this.toolbar.setKey(<YOUR TOOLBAR KEY>);

For the above code.

this.toolbar.setKey('toolbar1');

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 |

Docs are a work in progress, give me time.