DEV Community

Cover image for Using React Navigation with Functional Components

Using React Navigation with Functional Components

Harshil Agrawal on June 19, 2019

React Navigation is a popular library used with React Native for navigation. It helps us to build navigational apps. Here is a quick guide for impl...
Collapse
 
hbwebdev profile image
hb-webdev • • Edited

I don't understand: Is your Home Screen component in a separate .js file? If so, don't you need to import App from './App' so you can use the stack navigator exported from App.js??????????????? Why is this so impossible?? I simply want to navigate between .js files!!!

EDIT: Oh...you're navigating from App.js to Home.js...What if I want to navigate back from Home.js to App.js?? (What if I want the navigation stack accessible in different .js files???)

Collapse
 
rozzz333 profile image
rozzz333 •

should i install its dependencies?
when i try to install dependencies by this command :

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

i get error

Collapse
 
harshil1712 profile image
Harshil Agrawal •

Hey @rozzz333 ,
Are you trying to install it in a new project or in an existing one? Also it might help if you could share the error you're getting.

Collapse
 
hardikcc profile image
Hardik Shah •

How can we use class in react-navigation-5?

Collapse
 
harshil1712 profile image
Harshil Agrawal •

Hey Hardik,
Were you able to get it working? Do you want me to write a blog post for this? Please let me know how I can help you.

Collapse
 
hardikcc profile image
Hardik Shah •

Hi Harshil, I was able to make it work. But a detailed blog will help many developers as no material is available for navigation 5.0.

Collapse
 
tecants profile image
Techie •

yes please make a blog post of react navigation 5 using class components ....if already have blog ....please give link

Thread Thread
 
harshil1712 profile image
Harshil Agrawal •

Hey @Techie,
I started writing the blog for it, but later realized that it is similar to the way we did with the previous versions, except for a few minor changes ofcourse. If you need help with that, I'll try to complete is soon, and share the link with you.

Collapse
 
kiwipedro profile image
kiwipedro •

Thanks Harshil, that's really helpful. How would you handled setParams to make the header dynamic?

Collapse
 
corsal8 profile image
Corsal8 •

Hi! I'm not the OP, but I've made the header dynamic by passing to the Home.navigationOptions function the navigation parameter like so:

Home.navigationOptions = navigation => ({
  title: navigation.navigation.getParam('name', 'John Doe')
});

This should work based on the React Navigation doc (reactnavigation.org/docs/en/header...).

Last but not least, I'm completely new to React Native, so take my answer with a grain of salt :)

Collapse
 
kiwipedro profile image
kiwipedro •

Thanks @corsal8 , not quite what I meant: if you look on the same react-native doc it's the setParam function I'm trying to use. Not sure of the syntax when using it in a functional component compared to the class component that the docs exemplify :)

Collapse
 
harshil1712 profile image
Harshil Agrawal •

Hey kiwipedro I am glad that the article could help. To use the setParams() method the structure is similar to navigate() method as shown in the article above, navigation.setParams({...})

Collapse
 
indavidjool profile image
indavidjool •

Thanks mate! I just started converting a small app from class to function components, hit this very obstacle, and fortunately your post got me going again.

Collapse
 
harshil1712 profile image
Harshil Agrawal •

Thank you for reading it! I am happy that this could help you. 😄

Collapse
 
100rabhcsmc profile image
Saurabh Chavan • • Edited

This is super Thank You Bro.