react-native-toolbar

Adaptive toolbar for React Native

Usage no npm install needed!

<script type="module">
  import reactNativeToolbar from 'https://cdn.skypack.dev/react-native-toolbar';
</script>

README

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.