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?

erichio · Accepted Answer · 2020-05-17 21:42:34Z

7

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

answered May 17, 2020 at 21:42

erichio

811 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tim Over a year ago

You could check the answer, since it's the only one that works. And thanks for a solution :)

jdnichollsc Over a year ago

remember remove the listener when the component is unmounted

Sochetra Nov · Accepted Answer · 2020-05-18 03:04:08Z

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, 2020 at 3:04

Sochetra Nov

4653 silver badges7 bronze badges

1 Comment

erichio Over a year ago

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.

Waheed Akhtar · Accepted Answer · 2020-05-17 21:21:41Z

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, 2020 at 21:21

answered May 17, 2020 at 21:03

Waheed Akhtar

3,1973 gold badges18 silver badges32 bronze badges

Comments

Qasim Zubair · Accepted Answer · 2022-04-12 13:31:29Z

0

You can do something like this.

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

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

answered Apr 12, 2022 at 13:31

Qasim Zubair

1972 silver badges3 bronze badges

Collectives™ on Stack Overflow

How to access current state in react navigation listener?

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related