Menu
I have a react-native application and I would like to execute a function every time a particular screen's state become "focused". Based on the documentation (link), useFocusEffect is what I should use, here's my code:
import {useFocusEffect} from '@react-navigation/native'
export default function ProfileScreen(props) {
const {loading} = props.store
const [deviceId, setDeviceId] = React.useState(null)
const [questionIndex, setQuestionIndex] = React.useState(0)
console.log(useFocusEffect)
useFocusEffect(
React.useCallback(() => {
console.log('here')
//AsyncStorage.getItem('deviceId', (err, result) => {
// if (result !== null) {
// setDeviceId(result)
// props.dispatch({type: "STOP_LOADER"})
// }
//})
}, [])
)
The problem is that when the app loads I get this error:
TypeError: (0, _native.useFocusEffect) is not a function.
The version I'm using is the this one: "@react-navigation/native": "^3.6.2",, how can I fix this?
EDIT: the problem was that the current version of react-navigation doesn't support hooks yet, waiting for the v5.0 release, I'm using this library as fallback: https://github.com/react-navigation/hooks
634
The useFocusEffect is analogous to React's useEffect hook. The only difference is that it only runs if the screen is currently focused. The effect will run whenever the dependencies passed to React.
x. useFocusEffect: Use to trigger any function or method with screen gets focused or unfocused. useIsFocused: Use to refresh UI components from the return method when the screen gets focused or unfocused.
use componentWillMount() method. This will execute automatically before render() method gets triggered. @Jaydip componentWillMount() will be called before the render method is invoked.
React Navigation provides a hook that returns a boolean indicating whether the screen is focused or not. The hook will return true when the screen is focused and false when our component is no longer focused. This enables us to render something conditionally based on whether the user is on the screen or not.
This enables us to render something conditionally based on whether the user is on the screen or not. The useIsFocused hook will cause our component to re-render when we focus and unfocus a screen.
There are multiple approaches available to us: Listening to the 'focus' event with an event listener. Using the useFocusEffect hook provided by react-navigation. Using the useIsFocused hook provided by react-navigation. We can also listen to the 'focus' event with an event listener.
Re-rendering screen with the useIsFocused hook React Navigation provides a hook that returns a boolean indicating whether the screen is focused or not. The hook will return true when the screen is focused and false when our component is no longer focused.
The useFocusEffect is analogous to React's useEffect hook. The only difference is that it only runs if the screen is currently focused. The effect will run whenever the dependencies passed to React.useCallback change, i.e. it'll run on initial render (if the screen is focused) as well as on subsequent renders if the dependencies have changed.
Do
npm install --save @react-navigation/[email protected]
3.6.2 is the latest stable version. You can find all versions of react-navigation here (under versions)
https://www.npmjs.com/package/@react-navigation/native
185
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
