2022-12-01
2599
#react native
Emmanuel Yusufu
2994
Dec 1, 2022 ⋅ 9 min read

React Native Navigation: Tutorial with examples

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

Recent posts:

Using Defer In Angular 17 To Implement Lazy Loading

Using defer in Angular 17 to implement lazy loading

Angular’s new `defer` feature, introduced in Angular 17, can help us optimize the delivery of our apps to end users.

Lewis Cianci
Dec 4, 2023 ⋅ 10 min read

Using ElectricSQL to build a local-first application

ElectricSQL is a cool piece of software with immense potential. It gives developers the ability to build a true local-first application.

Rahul Padalkar
Dec 1, 2023 ⋅ 11 min read
Using Rust And Leptos To Build Beautiful Declarative User Interfaces

Using Rust and Leptos to build beautiful, declarative UIs

Leptos is an amazing Rust web frontend framework that makes it easier to build scalable, performant apps with beautiful, declarative UIs.

Eze Sunday
Nov 30, 2023 ⋅ 10 min read
5 Best JavaScript Multi-Dimensional Array Libraries

5 best JavaScript multidimensional array libraries

Learn more about the 5 best JavaScript libraries for dealing with multidimensional arrays, such as ndarray, math.js, and NumJs.

Pascal Akunne
Nov 30, 2023 ⋅ 4 min read
View all posts

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

Leave a Reply