react-native-toolbar

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.