1.0.4 • Published 4 years ago

react-native-breadcrumb-navigation v1.0.4

Weekly downloads
2
License
ISC
Repository
github
Last release
4 years ago

react-native-breadcrumb-navigation npm version

A basic react-native breadcrumb component library for both Android and ios. The component accounts for any number of trails that you input as an array to 'trailData' prop. The component is also dynamic and can handle for custom background colour, fontSize, fontColour, container height, top position from status bar, textSpacing.

Basic Example:

A basic example where you can see the change in the breadcrumb trail. Source Code

React Navigation Example:

An example using react navigation. Clicking on each breadcrumb trail will navigate user to destination screens. Source Code

Installation

Installing with Npm:

npm i react-native-breadcrumb-navigation

Usage

import BreadCrumb from 'react-native-breadcrumb-navigation';

<BreadCrumb
    trailData={['Home', 'Explore', 'Message', 'Settings']}
    selectedIndex={0}
    onPress={updateSelection}
    backgroundColor={'#2196f3'}
    fontColor={'#000000'}
    fontSize={15}
    height={'10%'}
    top={'24%'}
    textSpacing={'4%'}
/>

Props

NameTypeDescription
trailDataArrayArray of destination trails for BreadCrumb
selectedIndexintindicates selected crumb where index starts from 0
onPressFunctionReturns selected crumb index
backgroundColorStringBackground colour of BreadCrumb where you may also set to 'transparent' if preferred
fontColorStringColour of font
fontSizeintSize of font
heightStringHeight of container for BreadCrumb
topStringPosition of BreadCrumb from Status Bar
textSpacingStringSpacing between each crumb text

License

react-native-breadcrumb-navigation is MIT Licensed