A set of React hooks for React Native Navigation
npm install react-native-navigation-hooks --save
, oryarn add react-native-navigation-hooks
RN Navigation | >= 2.21.0 | >= 4.0.7 | >= 4.5.0 | >= 6.5.0 |
RN Navigation Hooks | <= 3.x.x | 4.x.x | 5.x.x | 6.x.x |
Called each time this component appears on screen (attached to the view hierarchy) more info
import { useNavigationComponentDidAppear } from 'react-native-navigation-hooks'
const ScreenComponent = ({ componentId }) => {
// Global listener
useNavigationComponentDidAppear(e => {
console.log(`${e.componentName} (${e.componentId}) appeared`)
})
// Listen events only for this screen (componentId)
useNavigationComponentDidAppear(e => {
console.log(`${e.componentName} appeared`)
}, componentId)
return (
<View>
<Text>Screen Component</Text>
</View>
)
}
Called each time this component disappears from screen (detached from the view heirarchy) more info
import { useNavigationComponentDidDisappear } from 'react-native-navigation-hooks'
const ScreenComponent = ({ componentId }) => {
// Global listener
useNavigationComponentDidDisappear(e => {
console.log(`${e.componentName} (${e.componentId}) disappeared`)
})
// Listen events only for this screen (componentId)
useNavigationComponentDidDisappear(e => {
console.log(`${e.componentName} disappeared`)
}, componentId)
return (
<View>
<Text>Screen Component</Text>
</View>
)
}
The commandListener is called whenever a Navigation command (i.e push, pop, showModal etc) is invoked. more info
import { useNavigationCommand } from 'react-native-navigation-hooks'
const ScreenComponent = ({ componentId }) => {
// Global listener
useNavigationCommand((commandName, { commandId, layout }) => {
console.log(`Command ${commandName} (${commandId}) invoked`)
})
return (
<View>
<Text>Screen Component</Text>
</View>
)
}
Invoked when a command finishes executing in native. If the command contains animations, for example pushed screen animation,) the listener is invoked after the animation ends. more info
import { useNavigationCommandComplete } from 'react-native-navigation-hooks'
const ScreenComponent = ({ componentId }) => {
// Global listener
useNavigationCommandComplete(({ commandId, commandName, completionTime, params }) => {
console.log(`Command ${name} (${commandId}) invocation finished`)
})
return (
<View>
<Text>Screen Component</Text>
</View>
)
}
Invoked only on iOS pageSheet modal when swipeToDismiss flag is set to true and modal swiped down to dismiss. more info
import { useNavigationModalAttemptedToDismiss } from 'react-native-navigation-hooks'
const ScreenComponent = ({ componentId }) => {
// Global listener
useNavigationModalAttemptedToDismiss(e => {
console.log(`Modal attempted dismissed on componentId: ${e.componentId}`)
})
// Listen events only for this screen (componentId)
useNavigationModalAttemptedToDismiss(e => {
console.log(`Modal attempted dismissed on componentId:${e.componentId}`)
}, componentId)
return (
<View>
<Text>Screen Component</Text>
</View>
)
}
Invoked when modal dismissed. more info
import { useNavigationModalDismiss } from 'react-native-navigation-hooks'
const ScreenComponent = ({ componentId }) => {
// Global listener
useNavigationModalDismiss(e => {
console.log(`Modals dismissed: ${e.modalsDismissed} on componentId: ${e.componentId}`)
})
// Listen events only for this screen (componentId)
useNavigationModalDismiss(e => {
console.log(`Modals dismissed: ${e.modalsDismissed}`)
}, componentId)
return (
<View>
<Text>Screen Component</Text>
</View>
)
}
Invoked when screen is popped. more info
import { useNavigationScreenPop } from 'react-native-navigation-hooks'
const ScreenComponent = ({ componentId }) => {
// Global listener
useNavigationScreenPop(e => {
console.log(`Screen was popped on componentId: ${e.componentId}`)
})
// Listen events only for this screen (componentId)
useNavigationScreenPop(e => {
console.log(`Screen was popped on componentId: ${e.componentId}`)
}, componentId)
return (
<View>
<Text>Screen Component</Text>
</View>
)
}
Invoked when a BottomTab is selected by the user. more info
import { useNavigationBottomTabSelect } from 'react-native-navigation-hooks'
const ScreenComponent = ({ componentId }) => {
// Global listener
useNavigationBottomTabSelect(e => {
console.log(`Selected tab id ${e.selectedTabIndex}, unselected tab id ${e.unselectedTabIndex}`)
})
return (
<View>
<Text>Screen Component</Text>
</View>
)
}
Invoked when a BottomTab is pressed by the user. more info
import { useNavigationBottomTabPress } from 'react-native-navigation-hooks'
const ScreenComponent = ({ componentId }) => {
// Global listener
useNavigationBottomTabPress(e => {
console.log(`Selected tab id ${e.tabIndex}`)
})
return (
<View>
<Text>Screen Component</Text>
</View>
)
}
Invoked when a BottomTab is long pressed by the user. more info
import { useNavigationBottomTabLongPress } from 'react-native-navigation-hooks'
const ScreenComponent = ({ componentId }) => {
// Global listener
useNavigationBottomTabLongPress(e => {
console.log(`Selected tab id ${e.selectedTabIndex}`)
})
return (
<View>
<Text>Screen Component</Text>
</View>
)
}
Emitted whenever a TopBar button is pressed by the user. more info
import { useNavigationButtonPress } from 'react-native-navigation-hooks'
const ScreenComponent = ({ componentId }) => {
// Global listener
useNavigationButtonPress(e => {
console.log(`Pressed ${e.buttonId} on componentId: ${e.componentId}`)
})
// Listen events only for this screen (componentId)
useNavigationButtonPress(e => {
console.log(`Pressed ${e.buttonId} on this screen`)
}, componentId)
// Listen events only for this screen (componentId) and specific buttonId (profileButton)
useNavigationButtonPress(
e => {
console.log('Pressed profile button on this screen!')
},
componentId,
'profileButton'
)
return (
<View>
<Text>Screen Component</Text>
</View>
)
}
Called when a SearchBar from NavigationBar gets updated. more info
import { useNavigationSearchBarUpdate } from 'react-native-navigation-hooks'
const ScreenComponent = ({ componentId }) => {
// Global listener
useNavigationSearchBarUpdate(e => {
console.log(
`Seach bar text changed to ${e.text}${e.focussed ? ' (focussed)' : ''} on componentId: ${e.componentId}`
)
})
// Listen events only for this screen (componentId)
useNavigationSearchBarUpdate(e => {
console.log(`Seach bar text changed to ${e.text}${e.focussed ? ' (focussed)' : ''} on this screen`)
}, componentId)
return (
<View>
<Text>Screen Component</Text>
</View>
)
}
Called when the cancel button on the SearchBar from NavigationBar gets pressed. more info
import { useNavigationSearchBarCancelPress } from 'react-native-navigation-hooks'
const ScreenComponent = ({ componentId }) => {
// Global listener
useNavigationSearchBarCancelPress(e => {
console.log(`Seach bar cancel button pressed on componentName: ${e.componentName}`)
})
// Listen events only for this screen (componentId)
useNavigationSearchBarCancelPress(e => {
console.log('Seach bar cancel button pressed on this screen')
}, componentId)
return (
<View>
<Text>Screen Component</Text>
</View>
)
}
Called when preview peek is completed. more info
import { useNavigationPreviewComplete } from 'react-native-navigation-hooks'
const ScreenComponent = ({ componentId }) => {
// Global listener
useNavigationPreviewComplete(e => {
console.log(`Preview component ${e.previewComponentId} shown on ${e.componentId}`)
})
// Listen events only for this screen (componentId)
useNavigationPreviewComplete(e => {
console.log(`Preview component ${e.previewComponentId} shown on this screen`)
}, componentId)
return (
<View>
<Text>Screen Component</Text>
</View>
)
}
You can take advantage of the useCallback hook to memoize your handlers.
import { useNavigationButtonPress } from 'react-native-navigation-hooks'
const ScreenComponent = ({ componentId }) => {
const handler = useCallback(
e => {
console.log(`Parameter: ${parameter}`)
},
[paramenter]
)
useNavigationButtonPress(handler, componentId, 'profileButton')
}