This document provides an overview of navigation in React Native. It discusses why navigation is important, common use cases like those seen in Netflix, and intended audience. It then outlines the topics to be covered which include an overview of React Navigation, examples of its use, a demo, and summary. Key aspects of React Navigation are explained, such as its ease of use but also some limitations and tradeoffs. Examples shown include stack navigation and its usage to navigate between screens. The demo app presented is a speakers detail app to showcase navigation functions.
2. Why Navigation?
• To navigate between different screens or pages
• To understand tradeoffs made by developers when building projects
• To highlight current limitations and common problems that are encountered while
building projects in React Native
• Importance of good navigation structure
• Creating simpler UI/UX for the users
6. Overview
Module 1: React Navigation
Module 2: Some examples of React Navigation in React Native
Module 3: Demo (Hands-On)
Module 4: Summary
Module 5: Recap
7. React Navigation
RNNG Speakers Detail App App Home
Speaker Detail
About RNNG Speaker
Detail App
A
B
D
C
Demo App Chart
E
HomeStack
Navigator
8. React Navigation (continued)
• Easy (Over-the-Air) OTA updates
Optimizations Setbacks
• Debuggable
• Customizable
• Unintuitive API
• Does not directly use native
navigation APIs on iOS and Android
• Much logic for React Navigation runs
in JavaScript rather than in native
12. Summary
• createStackNavigator is required to employ stack navigation functions
• createAppContainer bundles stack navigation and passes it for display
• navigation.navigate(’screen’) ; Vs navigation.push(‘screen’ ); which to
use?• navigation.goBack(); returns current view to immediate screen
• navigation.navigate(’screen’ , item); used when passing data between
screens
13. Using digital technologies, we are enabling a new wave of agriculture for smallholder farmers with a
clear implication of environmental, social, and economic value.
https://verdant.ng
14. Access Navigation in React Native source code on
https://github.com/react-native-nigeria/Navigation-In-React-Native-Workshop/
&
https://github.com/aimamisa/react-navigation/tree/master/example
Follows us on
@ReactNativeNG
15. If ( Any Questions? ){
Please Ask
} else {
“Thank You”}