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
;;; const Scene = <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: 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' ; Component { return <View style= flex: 1 > <TopBarNav // routeStack and renderScene are required props routeStack=ROUTESTACK renderScene= { // This is a lot like the now deprecated Navigator component let Component = ROUTESroutetitle; return <Component index=i />; } // Below are optional props headerStyle=stylesheaderStyle paddingTop: 30 // probably want to add paddingTop if using TopBarNav for the entire height of screen to account for notches/status bars labelStyle=styleslabelStyle underlineStyle=stylesunderlineStyle imageStyle=stylesimageStyle sidePadding=40 // Can't set sidePadding in headerStyle because it's needed to calculate the width of the tabs inactiveOpacity=1 fadeLabels=true /> </View> ; } { // 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= { // This is a lot like the now deprecated Navigator component let Component = ROUTESroutetitle; 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;
Demo
Props
static propTypes = routeStack: PropTypesarrayisRequired initialIndex: PropTypesnumber renderScene: PropTypesfunc headerStyle: stylePropType textStyle: stylePropType imageStyle: stylePropType underlineStyle: stylePropType sidePadding: PropTypesnumber inactiveOpacity: PropTypesnumber fadeLabels: PropTypesbool scrollViewProps: PropTypesobject; static defaultProps = initialIndex: 0 sidePadding: 0 inactiveOpacity: 05 fadeLabels: false scrollViewProps: {};