How to access current state in react navigation listener?

Question

I'm creating a react-native app using react-navigation 5.

Let's say I have a screen component like this:

import {View, Text} from 'react-native';

function TextScreen({navigation}) {
  const [text, setText] = useState(null);

  useEffect(() => {
    setText('Some text.');
    navigation.addListener('focus', () => {
      console.log('focus');
      console.log(text); // this is always null :/
    });
  }, []);

  return (
    <View>
      <Text>{text || 'No text'}</Text>
    </View>
  );
}

I have no idea why every console.log(text) displays null value on every focus. I expect text to be null only in the first focus but it happens all the time.

But when I changed this component into class component, everything worked as expected:

import {View, Text} from 'react-native';

class TextScreen extends React.Component {
  state = {
    text: null
  }

  componentDidMount() {
    this.setState({text: 'Some text'});
    this.props.navigation.addListener('focus', () => {
      console.log('focus');
      console.log(this.state.text); // this is null only in the first focus
    });
  }

  render() {
    return (
      <View>
        <Text>{this.state.text || 'No text'}</Text>
      </View>
    );
  }
}

Is there something I'm doing wrong in the first version?

score 7 · Accepted Answer · answered May 17 '20 at 21:42

OK, I found the solution using useRef hook: React useState hook event handler using initial state

So in my case should be:

import {View, Text} from 'react-native';

function TextScreen({navigation}) {
  const [text, _setText] = useState(null);
  const textRef = useRef(text);
  const setText = newText => {
    textRef.current = newText;
    _setText(newText);
  };

  useEffect(() => {
    setText('Some text.');
    navigation.addListener('focus', () => {
      console.log('focus');
      console.log(textRef.current);
    });
  }, []);

  return (
    <View>
      <Text>{text || 'No text'}</Text>
    </View>
  );
}

You could check the answer, since it's the only one that works. And thanks for a solution :) — Tim, Aug 12 '20 at 09:56
remember remove the listener when the component is unmounted — jdnichollsc, Nov 04 '20 at 18:44

score 2 · Answer 2 · answered May 18 '20 at 03:04

2

@erichio could you change from useEffect to useFocusEffect.

import { RouteProp, useFocusEffect } from '@react-navigation/native'

function TextScreen({navigation}) {

  ....

  useFocusEffect(() => {
    setText('Some text.');
    navigation.addListener('focus', () => {
      console.log('focus');
      console.log(text); // this is always null :/
    });

    return () => {
      navigation.removeEventListener('focus',() => /* YOUR_LOGIC */);
    };
  }, []);

  ...
}

answered May 18 '20 at 03:04

Sochetra Nov

335
2
7

No. The useFocusEffect exists indeed but it doesn't work in this way (you can check documentation). However I could write my own useFocusEffect to fix this. – erichio May 18 '20 at 22:58

Waheed Akhtar · Answer 3 · 2020-05-17T21:21:41.400

0

You can do in this way

  const onFocusScreen = useCallback(event => {

  console.log(text);

  }, []);

  useEffect(() => {
  navigation.addListener('focus', onFocusScreen);

  return () => {
  navigation.removeEventListener('focus', onFocusScreen);
  };
  }, [onFocusScreen]);

edited May 17 '20 at 21:21

answered May 17 '20 at 21:03

Waheed Akhtar

3,110
1
16
30

score 0 · Answer 4 · answered Apr 12 '22 at 13:31

0

You can do something like this.

import { useFocusEffect } from '@react-navigation/native';

useFocusEffect (
    React.useCallback(() =>
    {
        console.warn ("tabOrderStatus",text)
    }, [text])
);

answered Apr 12 '22 at 13:31

Qasim Zubair

177
2
3

How to access current state in react navigation listener?

4 Answers4