React-native-easy-breadcrumbs NPM

react-native-easy-breadcrumbs

Android / ios package to create customizable breadcrumbs to use in react native projects

No need to re-invent the wheel. Its already been done. Just use it and take advantage of open source projects.

Usefull for exemple, let's say we are using this library to create a breadcrumbs to navigate between folders

Install
Usage
API
Maintainers
Contributing
License

Install

Make sure you have node and instaled globaly. And just run this command

npm i react-native-easy-breadcrumbs

Usage

Import this module:

import { Crumb, EasyBreadcrumb } from 'react-native-easy-breadcrumbs'

Use as a component

// initial crumb items, he we set one item, feel free to initialize it with more itens
const [crumbs, setCrumbs] = useState([
    { id: 0, title: 'Root' }
])

// initial selected crumbs, must be one crumb item
const [selectedCrumb, setSelectedCrumb] = useState<Crumb>({
    id: 0,
    title: 'Root',
})

// on crumb press event handler
const __onCrumbPress = (crumb: Crumb) => {
    console.log(crumb.id)
    // console.log('Selected', `Crumb ${crumb.title} selected`)
}

// your crumbs component call
<EasyBreadcrumb
    crumbs={crumbs}
    setCrumbs={setCrumbs}
    selectedCrumb={selectedCrumb}
    setSelectedCrumb={setSelectedCrumb}
    onCrumbPress={(crumb) => __onCrumbPress(crumb)}
/>

for concrete example, please check the example folder

API

Here is the customization properties you may use in order to customize your breadcrumb. There is brief description of prop, type, option, and description

prop	type	description
flatlist	boolean	if to use flatlist to show crumbs. default to true
horizontal	boolean	if to use flatlist horizontally
crumbs	array	array of crumb items
onCrumbPress	function	callback when crumb is pressed
containerStyle	object	crumb container style
selectedCrumbTextStyle	object	selected cumb text style
selectedCrumbItemStyle	object	selected crumb container style
selectedCrumbStyle	object	outside crumb container style (applied to the touchable opacity component)
selectedCrumb	object	selected crumb
setCrumbs	function	function to update crumbs or set crumbs
setSelectedCrumb	function	function to set selected crumb
unselectedCrumbStyle	object	style to be applied to all not selected crumbs container
unselectedCrumbItemStyle	object	style to be applied to all not selected crumbs item container
unselectedCrumbTextStyle	object	style to be applied to all not selected crumbs text
contentContainerStyle	object	flatlist content style
flatlistProps	object	style to override over flatlist