react-native-toolbar v1.0.7

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.

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

Title

Search

IF YOU USER SEARCH IT OVERRIDES THE TITLE AND LEFTBUTTON. SO THEREFORE MEANING IT WILL MAKE THOSE PROPS NULL AND VOID.

Docs are a work in progress, give me time.