Stacknavigator & Typescript with Expo [2021]

In this video, we take a basic expo template and add a stack navigation system to it!
Command(s) used:
expo install @react-navigation/native
expo install @react-navigation/stack
expo install react-native-gesture-handler
Github: github.com/joe...
Video Info
Music by Tesko / prod. THXMOS:
/ @prod.thxmos6970
Support
Like this video? You can show your support by buying me a coffee ☕❤️: www.buymeacoff...
Socials
Github: github.com/joe...
Twitter: / thenerdycanuck
About The Channel
The knowledge that I share here is mostly from my personal experiences. I wouldn't say I'm a 20 year professional, rather I am just a DevOps / Software Engineer with a lot of experience who enjoys teaching what I know in my spare time. I believe that sharing some of my basic knowledge on this platform can help others get started. There are many ways to program something and the videos you see here are my take on the NodeJS / Typescript / and sometimes Unity world. If this channel helps you learn, or helps you think differently then my job is done 😊.
#reactnative #navigation #typescript

[@lluis9650]

Thanks for the tutorial, it's exactly what I needed and it was straight on point!

[@hadarpinto]

besides the use of logging, iv'e implemented as the video, and get a rendering error asking if i used navigation container.. any idea?

[@TheNerdyCanuck]

It's possible my solution is outdated. What seems to be the error

[@dennisgonzales9521]

Thanks! [EDIT]: Question at 5:40 what's the use of importing the 'react-native-gesture-handler'?

[@TheNerdyCanuck]

It's required by stack navigator, im assuming for phones that use movement as actions

[@dollnguyenstudio9528]

I am still not agree with the interface IRouterProps, hope someday you will figure out the similar interface of react navigation

[@TheNerdyCanuck]

Please let me know what else you would like me to cover :)

[@makspetrov4975]

Good! Thanks! )

[@bashenko]

Thanks for the video. But how do you edit header options? Like header, leftButton, bg, etc? How would you pass these options?

[@TheNerdyCanuck]

Good question, I can look into it but I did a quick google and it seemed straight forward. Let me know if you need a specific example.

[@bashenko]

​@@TheNerdyCanuck Thanks for the reply! Nah I mean I know how to do that, It's just how do you pass those params in your approach? Usually it is ```options: { ... ... }```. It's just... where shall I pass these options?

[@bashenko]

@@TheNerdyCanuck So yes, If I could please ask you to point me to the answer, It would help a lot! Thank you!

[@bashenko]

Ok the answer is simple. Just add: navigation.setOptions({ headerTitle: 'youTitle', }); Or whatever option you want in the component screen

[@TheNerdyCanuck]

@@bashenko Nice, I haven't looked at it yet but that seems right to me

[@FF-ux1co]

I would like to add an info button in the 'headerright' of the Home Screen, how and where can I add it to the code??

[@FF-ux1co]

const HomeScreen: React.FunctionComponent = (props) => { const [logging] = useLogging('Home Screen'); const { navigation, route } = props; useEffect(() => { logging.info({ navigation, route }); navigation.setOptions({ headerRight: () => navigation.navigate('Info')} /> }); }, [navigation, logging]); return ()

[@steven7936]

didnt' work in the end, I dont know why, I was hopign for something a lot more simple.

[@TheNerdyCanuck]

What was the error? I actually have an issue with this as well

[@usmanmughal5916]

Make a nextjs project with charts for data visualization and react query.

[@TheNerdyCanuck]

Charts js and Google charts would be good for that too!

[@usmanmughal5916]

@@TheNerdyCanuck Yea, but this project created by you will be great

[@wildhandb]

'Stack.Navigator' cannot be used as a JSX component.

[@TheNerdyCanuck]

Whats you react version?