top-bar-nav

A top bar navigator for React Native that is super light, simple, and customizable.

Install

npm install --save top-bar-nav

Import

import TopBarNav from 'top-bar-nav';

Usage

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import TopBarNav from './TopBarNav';
 
const Scene = ({ index }) => (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ fontSize: 20 }}>{index}</Text>
    </View>
);
 
const ROUTES = {
    Scene
    // ideally you would have a ROUTES object with multiple React component scenes
};
 
// There are three types of labels (image, text, and element)
const ROUTESTACK = [
    { image: require('./search.png'), title: 'Scene' },
    { text: 'Hello', title: 'Scene' }, // title is just the name of the Component being rendered.  See the renderScene property below
    { element: <Text>World</Text>, title: 'Scene' }
];
 
export default class Example extends React.Component {
    render() {
        return (
            <View style={{ flex: 1 }}>
                <TopBarNav
                    // routeStack and renderScene are required props
                    routeStack={ROUTESTACK}
                    renderScene={(route, i) => {
                        // This is a lot like the now deprecated Navigator component
                        let Component = ROUTES[route.title];
                        return <Component index={i} />;
                    }}
                    // Below are optional props
                    headerStyle={[styles.headerStyle, { paddingTop: 30 }]} // probably want to add paddingTop if using TopBarNav for the  entire height of screen to account for notches/status bars
                    labelStyle={styles.labelStyle}
                    underlineStyle={styles.underlineStyle}
                    imageStyle={styles.imageStyle}
                    sidePadding={40} // Can't set sidePadding in headerStyle because it's needed to calculate the width of the tabs
                    inactiveOpacity={1}
                    fadeLabels={true}
                />
            </View>
        );
    }
 
    anotherRender() {
        // if rendering the nav bar at the bottom is your thing
        return (
            <View style={{ flex: 1 }}>
                <View style={{ flex: 1, transform: [{ scaleY: -1 }] }}>
                    <TopBarNav
                        // routeStack and renderScene are required props
                        routeStack={ROUTESTACK}
                        renderScene={(route, i) => {
                            // This is a lot like the now deprecated Navigator component
                            let Component = ROUTES[route.title];
                            return (
                                <View style={{ flex: 1, transform: [{ scaleY: -1 }] }}>
                                    <Component index={i} />
                                </View>
                            );
                        }}
                        // Below are optional props
                        headerStyle={{ paddingTop: 20, transform: [{ scaleY: -1 }] }} // probably want to add paddingTop: 20 if using TopBarNav for the  entire height of screen on iOS
                        underlineStyle={{ height: 3 }}
                    />
                </View>
            </View>
        );
    }
}
 
const styles = StyleSheet.create({
    headerStyle: {
        borderBottomWidth: 1,
        borderColor: '#e6faff',
        backgroundColor: '#3385ff'
    },
    labelStyle: {
        fontSize: 15,
        fontWeight: '500',
        color: '#fff'
    },
    imageStyle: {
        height: 20,
        width: 20,
        tintColor: '#e6faff'
    },
    underlineStyle: {
        height: 3.6,
        backgroundColor: '#e6faff',
        width: 40
    }
});

Demo

Props

static propTypes = {
    routeStack: PropTypes.array.isRequired,
    initialIndex: PropTypes.number,
    renderScene: PropTypes.func,
    headerStyle: stylePropType,
    textStyle: stylePropType,
    imageStyle: stylePropType,
    underlineStyle: stylePropType,
    sidePadding: PropTypes.number,
    inactiveOpacity: PropTypes.number,
    fadeLabels: PropTypes.bool,
    scrollViewProps: PropTypes.object
};
 
static defaultProps = {
    initialIndex: 0,
    sidePadding: 0,
    inactiveOpacity: 0.5,
    fadeLabels: false,
    scrollViewProps: {}
};