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:

Using Aoi Js To Build A Bot For Discord

Using aoi.js to build a bot on Discord

Explore how the aoi.js library makes it easy to create Discord bots with useful functionalities for frontend applications.

Rahul Padalkar
Apr 17, 2024 ⋅ 9 min read
Web Components Adoption Guide: Overview, Examples, And Alternatives

Web Components adoption guide: Overview, examples, and alternatives

Evaluate Web Components, a set of standards that allow you to create custom HTML tags for more reusable, manageable code.

Elijah Asaolu
Apr 16, 2024 ⋅ 11 min read
Using Aws Lambda And Aws Cloudfront To Optimize Image Handling

Using AWS Lambda and CloudFront to optimize image handling

Leverage services like AWS Lambda, CloudFront, and S3 to handle images more effectively, optimizing performance and providing a better UX.

Nitish Sharma
Apr 12, 2024 ⋅ 12 min read
Building Web-Based Terminal Components With Termino.js

Building web-based terminal components with Termino.js

Explore Termino.js, an open source library for integrating web-based terminals into applications, in this introduction article.

Chibuike Nwachukwu
Apr 11, 2024 ⋅ 6 min read
View all posts

42 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.

Leave a Reply