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:

Solving The Node.js Console.Time Is Not A Function Error

Solving the Node.js console.time is not a function error

Explore the two variants of the `console.time is not a function` error, their possible causes, and how to debug.

Joseph Mawa
Nov 1, 2024 â‹… 6 min read
Why jQuery 4 Is A Good Reminder To Stop Using jQuery

Why jQuery 4 is a good reminder to stop using jQuery

jQuery 4 proves that jQuery’s time is over for web developers. Here are some ways to avoid jQuery and decrease your web bundle size.

Shalitha Suranga
Oct 31, 2024 â‹… 11 min read
How to Create a Multilevel Dropdown Menu in React

How to create a dropdown menu in React

See how to implement a single and multilevel dropdown menu in your React project to make your nav bars more dynamic and user-friendly.

Ibadehin Mojeed
Oct 30, 2024 â‹… 12 min read
Purple background with different connections between icons for an article about building Node.js modules with Rust and NAPI-RS.

Building Node.js modules in Rust with NAPI-RS

NAPI-RS is a great module-building tool for image resizing, cryptography, and more. Learn how to use it with Rust and Node.js.

Rahul Padalkar
Oct 30, 2024 â‹… 7 min read
View all posts

49 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!

Leave a Reply