2024-01-18
3035
#react native
Emmanuel Yusufu
2994
Jan 18, 2024 â‹… 10 min read

React Native Navigation: Tutorial with examples

Emmanuel Yusufu Aspiring Product Designer | Frontend and JS Developer | Certified digital marketer

Recent posts:

react native's new architecture: sync and async rendering

React Native’s New Architecture: Sync and async rendering

React Native’s New Architecture offers significant performance advantages. In this article, you’ll explore synchronous and asynchronous rendering in React Native through practical use cases.

Emmanuel John
Dec 24, 2024 â‹… 8 min read
Building a Full-Featured Laravel Admin Dashboard with Filament

Building a full-featured Laravel admin dashboard with Filament

Build scalable admin dashboards with Filament and Laravel using Form Builder, Notifications, and Actions for clean, interactive panels.

Kayode Adeniyi
Dec 20, 2024 â‹… 5 min read
Working With URLs In JavaScript

Working with URLs in JavaScript

Break down the parts of a URL and explore APIs for working with them in JavaScript, parsing them, building query strings, checking their validity, etc.

Joe Attardi
Dec 19, 2024 â‹… 6 min read
Lazy Loading Vs. Eager Loading

Lazy loading vs. Eager loading

In this guide, explore lazy loading and error loading as two techniques for fetching data in React apps.

Njong Emy
Dec 18, 2024 â‹… 5 min read
View all posts

56 Replies to "React Native Navigation: Tutorial with examples"

  1. i have tried many time Using stack navigator to navigate between screen components but this is not working.

    1. Hello Rama, I’m sorry about that. Can you share a snippet of your code at emmayusufu [at] gmail.com ? It works for me.

  2. Hello m y friend, thanks for you explain, but i can run my project with expo and react navigation. But i want to run react navigation without expo and can’t, i have followed the indicates of the main page react native https://reactnavigation.org/docs/en/getting-started.html but dont work for me. Do you something about this ? is compatible react native with react navigation without expo ?
    Thank in advance.

    Regards
    Juan.

  3. Hi Juan, react-native apps can be routed with react navigation without expo. Maybe a more clearer description of the error you are facing will really aid in fixing the error

  4. Thanks for you answer, i think i didnt explain you well,
    I Proceed to explain you. how you know, there are two forms of work with react navigation, one it normal form(react-native init [Name o aplication]) and the another form is using EXPO(expo init [name of project])
    My purpose is use the react navigation libary but happens that I can use react navigation with expo very well, but when i try use the react navigation with the normal form i have trouble. I followed the steps of the official page (https://reactnavigation.org/docs/en/getting-started.html) without succes.
    The error that i have are:

    PS E:\AplicacionesReact\easyReactNavigation> react-native run-android
    error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
    – react-native-gesture-handler (to unlink run: “react-native unlink react-native-gesture-handler”)
    This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via “react-native unlink ” and it will be included in your app automatically. If a library isn’t compatible with autolinking, disregard this message and notify the library maintainers.
    Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
    info Running jetifier to migrate libraries to AndroidX. You can disable it using “–no-jetifier” flag.
    Jetifier found 913 file(s) to forward-jetify. Using 8 workers…
    info Starting JS server…
    info Installing the app…
    Starting a Gradle Daemon, 3 stopped Daemons could not be reused, use –status for details
    > Task :app:transformNativeLibsWithMergeJniLibsForDebug FAILED

    Deprecated Gradle features were used in this build, making it incompatible with Gradle 6.0.
    Use ‘–warning-mode all’ to show the individual deprecation warnings.
    See https://docs.gradle.org/5.5/userguide/command_line_interface.html#sec:command_line_warnings
    42 actionable tasks: 2 executed, 40 up-to-date

    FAILURE: Build failed with an exception.

    * What went wrong:
    Execution failed for task ‘:app:transformNativeLibsWithMergeJniLibsForDebug’.
    > Could not read path ‘E:\AplicacionesReact\easyReactNavigation\android\app\build\intermediates\transforms\mergeJniLibs\debug\0\lib\armeabi-v7a’.

    * Try:
    Run with –stacktrace option to get the stack trace. Run with –info or –debug option to get more log output. Run with –scan to get full insights.

    * Get more help at https://help.gradle.org

    BUILD FAILED in 26s

    error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with –verbose flag for more details.
    Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081

    FAILURE: Build failed with an exception.

    * What went wrong:
    Execution failed for task ‘:app:transformNativeLibsWithMergeJniLibsForDebug’.
    > Could not read path ‘E:\AplicacionesReact\easyReactNavigation\android\app\build\intermediates\transforms\mergeJniLibs\debug\0\lib\armeabi-v7a’.

    * Try:
    Run with –stacktrace option to get the stack trace. Run with –info or –debug option to get more log output. Run with –scan to get full insights.

    * Get more help at https://help.gradle.org

    BUILD FAILED in 26s

    at checkExecSyncError (child_process.js:623:11)
    at execFileSync (child_process.js:641:15)
    at runOnAllDevices (E:\AplicacionesReact\easyReactNavigation\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:94:39)
    at buildAndRun (E:\AplicacionesReact\easyReactNavigation\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\index.js:158:41)
    at E:\AplicacionesReact\easyReactNavigation\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\index.js:125:12
    at processTicksAndRejections (internal/process/task_queues.js:85:5)
    at async Command.handleAction (E:\AplicacionesReact\easyReactNavigation\node_modules\react-native\node_modules\@react-native-community\cli\build\index.js:164:9)
    PS E:\AplicacionesReact\easyReactNavigation>

    Please help me.
    Advance in thanks.

    Juan.

    1. Error message you’re encountering seems to be related to the configuration and setup of your React Native project… Make sure that you are using a compatible version of React Native with the React Navigation library

  5. hi, i need help with integrating screens. i tried so many things and my header is missing. i really hope you can help. thanks.

  6. Hello,
    Emmanuel Yusufu

    Very Good Article,

    Actually I am using React Native 0.58 and when I’m trying to switch between 2 pages but i am unable to see the switching button on the next page. So can you help me with this ??

  7. This article is an absolute gem! The way it delves into the subject matter is truly commendable. I’m grateful for the wealth of information presented here, which has expanded my knowledge and understanding significantly. Kudos to the author for their expertise and the clarity with which they conveyed complex concepts. This piece is a valuable resource that I’ll definitely revisit. Thank you for sharing such valuable insights!

  8. This is a wonderful article which has proved particularly useful for me, that is why I would like to thank the writer of this article.

    Thank You For Write This Content Emmanuel Yusufu.

    1. Yes brother this is a good blog post. I try to help myself by taking a lot of code related information from here, the full credit for which goes to this website.

  9. Awesome tutorial! Clear and concise explanations of stack and tab navigation in React Native. The examples are super helpful. Thanks for sharing!

  10. Hey guys, I used React Native Navigation a long time ago before switching to React Navigation 6. However, I found that React Navigation lacked performance as my app grew with many heavy components across 5 bottom tab screens. This became especially noticeable when quickly switching between tabs on low-end Android devices and iPhones older than the X, where the selected state took a long time to activate. As a result, I decided to go back to React Native Navigation, and the performance is smooth again. Based on my experience, I still think React Native Navigation offers the best performance for navigation in React Native apps.

  11. This React Native Navigation tutorial is exactly what I needed! 🚀📱 The step-by-step breakdown with clear examples made it so much easier to understand how to implement navigation in my app. I’ve been struggling with stack and tab navigators, but your explanation really helped clear things up. The examples were super practical and easy to follow. Thanks for making such a complex topic feel approachable—definitely bookmarking this for future reference!

Leave a Reply