React Native Navigation Hooks

A set of React hooks for React Native Navigation

Installation

• npm install react-native-navigation-hooks --save, or
• yarn add react-native-navigation-hooks

Usage

useNavigationComponentDidAppear

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>
  )
}

useNavigationComponentDidDisappear

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>
  )
}

useNavigationCommand

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>
  )
}

useNavigationCommandComplete

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>
  )
}

useNavigationModalDismiss

Invoked when modal dismissed. more info

import { useNavigationModalDismiss } from 'react-native-navigation-hooks'

const ScreenComponent = ({ componentId }) => {
  // Global listener
  useNavigationModalDismiss(e => {
    console.log(`Modals dismissed: ${modalsDismissed} on ${e.componentId}`)
  })

  // Listen events only for this screen (componentId)
  useNavigationModalDismiss(e => {
    console.log(`Modals dismissed: ${modalsDismissed}`)
  }, componentId)

  return (
    <View>
      <Text>Screen Component</Text>
    </View>
  )
}

useNavigationBottomTabSelect

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 ${unselectedTabIndex}, unselected tab id ${unselectedTabIndex}`)
  })

  return (
    <View>
      <Text>Screen Component</Text>
    </View>
  )
}

useNavigationButtonPress

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 ${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>
  )
}

useNavigationSearchBarUpdate (iOS 11+ only)

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 ${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>
  )
}

useNavigationSearchBarCancelPress (iOS 11+ only)

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 ${e.componentId}`)
  })

  // 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>
  )
}

useNavigationPreviewComplete (iOS 11.4+ only)

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 ${previewComponentId} shown on ${e.componentId}`)
  })

  // Listen events only for this screen (componentId)
  useNavigationPreviewComplete(e => {
    console.log(`Preview component ${previewComponentId} shown on this screen`)
  }, componentId)

  return (
    <View>
      <Text>Screen Component</Text>
    </View>
  )
}

Suggestions

Memoize your handlers

You can take advantage of the useCallback hook to memoize your handlers.

import { useNavigationPreviewComplete } from 'react-native-navigation-hooks'

const ScreenComponent = ({ componentId }) => {
  const handler = useCallback(
    e => {
      console.log(`Parameter: ${parameter}`)
    },
    [paramenter]
  )

  useNavigationButtonPress(handler, componentId, 'profileButton')
}