Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Navigation in react native

•Download as PPTX, PDF•
•

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.

1 of 15

1

Navigation in React Native @ReactNativeNG

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

3

Use Cases (Netflix) Netflix (snippet)

4

Hello! • Senior Software Engineer at Verdant Agri-Tech • Technology and Digital Data Nomad • @awesome_nerrd on Twitter I’m Abdulrazaq

5

Intended Audience! …and those passionate about learning and sharing. Beginner to Intermediate

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

9

Examples of React Navigation in React Native

10

Stack Navigation App Home Speaker Detail Screen About Screen A B - C D - E

11

DEMO React Native NG (RNNG) Speakers Detail App

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”}

More Related Content

Navigation in react native

  • 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
  • 4. Hello! • Senior Software Engineer at Verdant Agri-Tech • Technology and Digital Data Nomad • @awesome_nerrd on Twitter I’m Abdulrazaq
  • 5. Intended Audience! …and those passionate about learning and sharing. Beginner to Intermediate
  • 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
  • 9. Examples of React Navigation in React Native
  • 10. Stack Navigation App Home Speaker Detail Screen About Screen A B - C D - E
  • 11. DEMO React Native NG (RNNG) Speakers Detail App
  • 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”}