How to access naviagtion options from imported file in react-native

Question

I'm passing data through different pages down to the last page in my app, its been working fine.

But the issue is the last page has 2 components so the typical </ChatActivity navigation="{this.props.navigation}" />, here's what I mean:

I have an App.js

content of App.js

import ChatScreen from './chat'
    class ChatActivity extends Component {
      static navigationOptions = {
        ...
      }
      render() {
        return(
            <ChatScreen navigation={this.props.navigation} />
        )
      }
    }

I also have chat.js that contains the chat component. Chat.js itself, needs to import Fire from './fire.js'

so now, this.props.navigation was only passed to Chat.js...but I need to access it from fire.js as well.

I've read about import {useNavigation}, but from what i have tried it didn't work cause my fire.js doesn't even look like the example in the docs

this is my fire.js

class Fire extends React.Component{
  constructor (props) {
    super(props)

    this.init()
    this.checkAuth()
  }
  init = () => {
        firebase.initializeApp({

        })
  };

  checkAuth = () => {
    firebase.auth().onAuthStateChanged(user => {
      if (!user) {
        firebase.auth().signInAnonymously();
      }
    })
  } 
  send = messages  => {
    messages.forEach(item => {
      const message = {
        text: item.text,
        timestamp: firebase.database.ServerValue.TIMESTAMP,
       // image: item.image,
        //video: item.video,
        user: item.user
      }
      this.db.child(`NEED NAVIGATION PARAMS HERE`).push(message)

    })
  }  

  parse = message => {
    const {user, text, timestamp} = message.val();
    const {key, _id} = message
    const createdAt = new Date(timestamp)

    return {
      _id,
      createdAt,
      text,
      user
    }
  }

  get = callback => {
    this.db.child(`NEED NAVIGATION PARAMS HERE`).on('child_added', snapshot => callback(this.parse(snapshot)))
  }

  off() {
    this.db.off()
  }

  get db() {
    return firebase.database().ref(`NEED NAVIGATION PARAMS HERE`);
  }

  get uid(){
    return(firebase.auth().currentUser || {}).uid
  }
}

export default new Fire();

Since i couldn't access navigation params, I tried AsyncStorage, but thats probably not the best practice and it isn't working too well. Not sure if its the AsyncStorage or react-native-gifted-chat but when I load the chat page once, it shows the same messages for other chats till I restart the app which shouldn't be cause i'm fetching the data based on unique parameters.

Answer 1

You have just missed one step here...

Since you have passed the navigation as props by using the following approach:

<ChatScreen navigation={this.props.navigation} />

the chat screen gets to use navigation properties of ChatActivity.

For Fire.js to be able to use the navigation as well, that was provided to Chat.js by ChatActivity you will need to pass the navigation props received by Chat.js to Fire.js in the same way.

This is how your Chat.js should look like:

import Fire from './Fire'

class Chat extends Component {
    static navigationOptions = {
        ...
    }
    render() {
        return(
            <Fire navigation={this.props.navigation} />
        )
    }
}

That should solve the issue. Cheers!