billgloff / navbar-native

a fully customizable navbar component for React-Native

NavbarNative

A fully customizable Navbar component for React-Native.

It works for both iOS and Android!

Content

• Installation
• Exported components
• Getting started
• Images as title
• Container API
• Navbar API
• Demo

Installation

npm i navbar-native --save

Pay attention

This package depends on the beautiful Vector Icons for React Native.

After installing NavbarNative, in order to have icons working, please follow instructions about HOW TO INSTALL AND LINK VECTOR ICONS in your project.

Exported components

This package exports two main components:

• Container - a container component to use as the first component in a render() method. It accepts the "Navbar" component and the rest of the page content.
• Navbar - the components which generates the bar on top.

Getting started

Basically, the Navbar component accepts a title prop and left and/or right objects (or array of objects) which describe each button that the navbar has to render in the specific position.

Using icons

In order to use the correct set of icons, please use ios- prefix in icon prop name for iOS and md- prefix for Android.

The following chunk of code shows a typical iOS NavbarNative usage:

import React, { Component } from 'react';
import { View } from 'react-native';

import { Container, Navbar } from 'navbar-native';

class ReactNativeProject extends Component {
    render() {
        return (
            <Container>
                <Navbar
                    title={"Navbar Native"}
                    left={{
                        icon: "ios-arrow-back",
                        label: "Back",
                        onPress: () => {alert('Go back!')}
                    }}
                    right={[{
                        icon: "ios-search",
                        onPress: () => {alert('Search!')}
                    },{
                        icon: "ios-menu",
                        onPress: () => {alert('Toggle menu!')}
                    }]}
                />
                ... other stuff ...
            </Container>
        );
    }
}

Image as a title

You can also use a remote or local image instead of the text title:

class ReactNativeEmpty extends Component {
    render() {
        return (
            <Container type="list" data={["first", "second", "third"]}>
                <Navbar
                    user={true}
                    image={{
                        source:'https://facebook.github.io/react/img/logo_og.png',
                        type: 'remote',
                        resizeMode: 'cover'
                    }}
                    statusBar={{
                        style: "default",
                        hideAnimation: Navbar.FADE,
                        showAnimation: Navbar.SLIDE,
                    }}
                    left={{
                        icon: "ios-arrow-back",
                        label: "Back",
                        onPress: () => {alert('Go back!')}
                    }}
                    right={[{
                        icon: "ios-search",
                        onPress: () => {alert('Search!')}
                    },{
                        icon: "ios-menu",
                        onPress: () => {alert('Toggle menu!')}
                    }]}
                />
            </Container>
        );
    }
}

Image as background

Images can be used in background also:

class ReactNativeEmpty extends Component {
    render() {
        return (
            <Container type="list" data={["first", "second", "third"]}>
                <Navbar
                    user={true}
                    title={"Navbar Native"}
                    titleColor="white"
                    imageBackground={{
                        source:'https://facebook.github.io/react/img/logo_og.png',
                        type: 'remote',
                        resizeMode: 'cover'
                    }}
                    statusBar={{
                        style: "light-content",
                        hideAnimation: Navbar.FADE,
                        showAnimation: Navbar.SLIDE,
                    }}
                    left={{
                        icon: "ios-arrow-back",
                        iconColor: "white",
                        label: "Back",
                        onPress: () => {alert('Go back!')},
                        style:{color: 'white'}
                    }}
                    right={[{
                        icon: "ios-search",
                        iconColor: "white",
                        onPress: () => {alert('Search!')}
                    },{
                        icon: "ios-menu",
                        iconColor: "white",
                        onPress: () => {alert('Toggle menu!')}
                    }]}
                />
            </Container>
        );
    }
}

Container API

• data - (Array of strings or Array of Objects) - data source for ListView
• row - (React component opt.) - Component that renders single roe element in ListView
• style - (Object) - Custom styles for the container,
• type - ('scroll' or 'list' def. 'scroll') - How to render Container children content

Navbar API

• title - (String opt.) - The title string
• titleColor - (String opt.) - The title string color
• tintColor - (String def. '#ffffff') - NavigationBar's background tint color
• image - (Object opt.) - Local/remote image instead of the title
  • source - (String) - Local/remote image location
  • type - ('local' or 'remote' def. 'local') - Origin of the image
  • resizeMode - ('cover', 'contain', 'stretch', 'repeat', 'center' def. 'cover')
  • style - (Object opt.) - Additional styles for image title
• imageBackground - (Object opt.) - Local/remote image in navbar background
  • source - (String) - Local/remote image location
  • type - ('local' or 'remote' def. 'local') - Origin of the image
  • resizeMode - ('cover', 'contain', 'stretch', 'repeat', 'center' def. 'cover')
  • style - (Object opt.) - Additional styles for image background
• statusBar - (Object opt.):
  • style - ('light-content' or 'default') - Style of statusBar
  • hidden - (Boolean)
  • tintColor - (String) - Status bar tint color
  • hideAnimation - ('fade', 'slide', 'none') - Type of statusBar hide animation
  • showAnimation - ('fade', 'slide', 'none') - Type of statusBar show animation
• left / right - (Object or Array of Objects):
  • icon - (String opt.) - Vector Icon's icon name
  • iconFamily - (String def. Ionicons) - Vector Icon's icon library
  • iconPos - ('left' or 'right' def. left/right position) - Icon's position towards the label
  • iconSize - (Number def. 30 ios - 28 android) - Icon's size
  • iconColor - (String def. '#0076FF' ios - '#FFFFFF' android) - Icon's color
  • label - (String opt.) - Button's label
  • onPress - (Function) - onPress function handler
  • role - (String opt. - 'back' | 'close' | 'login' | 'menu') - Button's pre-defined aspect
  • style - (Object opt.) - Button's override styles
• style - (Object) - Custom styles for the navbar
• user - (Object, Bool) - Authenticated user

Demo

Check an advanced implementation HERE