Passing params to React Navigation Header in Functional Components

July 22, 2020

You set the param first with navigation.setParams. If it's gonna change often, you'll probably set it in useEffect()

code

import React, { useEffect, useState } from 'react'
import { useNavigation } from 'react-navigation-hooks'

export function Conversations() {
  const navigation = useNavigation()

  const [showArchived, setShowArchived] = useState(false)
  const [search, setSearch] = useState('')
  const [isSearching, setIsSearching] = useState(false)

  useEffect(() => {
    navigation.setParams({ showArchived })
    navigation.setParams({ setShowArchived })
    navigation.setParams({ isSearching })
    navigation.setParams({ setIsSearching })
    navigation.setParams({ search })
    navigation.setParams({ setSearch })
  }, [showArchived, isSearching, search])

return ()
}

Conversations.navigationOptions = ({
  navigation,
}: {
  navigation: NavigationStackProp<NavigationRoute>,
}): NavigationStackOptions => {
  const showArchived = navigation.getParam('showArchived', false)
  const setShowArchived = navigation.getParam('setShowArchived', false)
  const isSearching = navigation.getParam('isSearching', false)
  const setIsSearching = navigation.getParam('setIsSearching', false)
  const search = navigation.getParam('search', '')
  const setSearch = navigation.getParam('setSearch', '')

  return {}
}