React native routing and deep linking with navigator

[MSghais]

Description

React native routing and deep linking with navigator. At this moment, the web React native redirect every time to the first screen in the navigator.

We want to have the possibilities to directly go this page like a Nostr profile or whatever.

Todo

• [ ] Fix deep linking in Router.tsx
• [ ] Fix navigator routing
• [ ] Clean navigators
• [ ] Fix screens

[ShantelPeters]

Hi @MSghais please I will like to work on this when OD hack begins tomorrow

[onlydustapp[bot]]

Hi @ShantelPeters! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[NueloSE]

@MSghais kindly assign me ETA 24hours

[onlydustapp[bot]]

Hi @NueloSE! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[onlydustapp[bot]]

Hi @NueloSE! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[martinvibes]

hello @MSghais i would love to work on this issue

[onlydustapp[bot]]

Hi @martinvibes! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[CollinsC1O]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello I'm a frontend and also a blockchain developer and I would love to jump on this issue

[petersdt]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

i am a frontend developer with experience using typescript for typesafety and js. kindly assign me

How I plan on tackling this issue

1. i currently understand how the navigator works
2. Enable Deep Linking: Configure deep linking by setting up the navigation system to handle URL patterns correctly. In React Native, deep linking allows users to directly navigate to specific pages via URL.
3. Fix Deep Linking in Router.tsx: Integrate deep linking with the React Native navigation system. Make sure that deep links route users directly to the appropriate screens (e.g., Nostr profile pages).
4. Fix Navigator Routing: Review the navigator logic to ensure that routing does not always default to the first screen. Check the initialRouteName configuration in your StackNavigator or TabNavigator to ensure it's dynamic based on the deep link or navigation state.
5. Clean Navigators: Refactor the navigation system to remove any unnecessary or redundant navigators.

6.Fix Screens: Check each screen to ensure that they are properly handling navigation params (e.g., for the Nostr profile page, ensure the profile ID is correctly parsed from the URL).

[ShantelPeters]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a frontend developer with vast experience using typescript for typesafety and javascript . kindly assign me i am available to work please

How I plan on tackling this issue

I would approach the problem by doing the following:

1. Deep Linking in Router.tsx: Ensure the deep linking setup correctly parses URLs and routes to the desired screen.
2. Navigator Routing: Check if the initial route is properly configured and if conditional logic forces navigation to the first screen.
3. Clean Navigators: Simplify navigator structure by removing redundant configurations.
4. Fix Screens: Ensure each screen's routing path is well-defined and accessible through deep links.

[MatiasAchucarro]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a passionate and results-driven web developer, currently deepening my knowledge in web3 technologies, Cairo, and open-source development through Dojo Coding. My skill set includes expertise in JavaScript, React, HTML, CSS, C# with .NET Entity Framework, and more. I also have experience with tools like Git, GitHub, SQL Server, and Postman. My focus has been on building solid web applications, from task lists to full-fledged CRUD systems, with front-end, back-end, and database integration.

I have already made a contribution to the open-source ecosystem, and I am eager to engage in more projects, particularly those involving Cairo.

How I plan on tackling this issue

To resolve routing and deep linking issues in React Native, first, configure deep linking correctly in Router.tsx, mapping URL routes to the app screens. Ensure the navigator is set up to handle these routes without redirecting to the main screen. Clean up the navigation logic to avoid unnecessary redirections and verify that each screen component is properly implemented and registered. Conduct tests with different deep links to ensure each one directs to the correct screen.

[Benjtalkshow]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

As a full-stack JavaScript developer with solid experience in using React and Expo, I'm well-prepared to handle the current navigation problems. My background in these technologies means I understand how to create smooth user experiences, and I can efficiently address the routing issue we’re facing.

How I plan on tackling this issue

First, I’ll focus on fixing the deep linking in Router.tsx. This will allow users to directly access specific pages, like a Nostr profile, instead of always going back to the first screen in the navigator. I will review how deep linking is currently set up to ensure the app routes correctly based on the links being used.

Next, I’ll improve the navigator routing to ensure that transitions between screens work properly. I’ll clean up any unnecessary navigators to make the navigation system simple and easy to follow.

Once I’ve fixed the routing, I’ll check all the screens to ensure they work well with the new setup. This includes making sure that each screen loads correctly when accessed via deep links and behaves as expected when navigating within the app.

After making these changes, I’ll thoroughly test the routing and deep linking to ensure everything works smoothly. This will involve checking how the app handles different deep links and how it navigates between pages. Finally, I’ll tidy up the code to make sure the navigator and router components are efficient and easy to maintain.

ETA: 2 Days

[martinvibes]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hello i am a frontend dev and blockchain developer please can i work on this issue :) and would love to be a contributor

How I plan on tackling this issue

Review Existing Code: Understand the current setup in Router.tsx to identify issues.

Fix Deep Linking: Update the deep linking configuration to ensure correct screen navigation from URLs.

Enhance Navigator Routing: Refactor the navigator configuration to handle routes and components properly.

Clean Up Navigators: Simplify the navigator structure for better readability and maintainability.

Verify Screens: Ensure all screens are correctly defined and accessible via the navigator.

Test Changes: Conduct thorough testing to confirm deep linking and navigation work as intended.

Update Documentation: Revise documentation to reflect any changes made for future reference.

[MSghais]

Someone have an ETA please?

[bhavyagosai]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hey, I am Bhavya, a seasoned frontend engineer with two years of professional experience. I have been working with react, react native, nextjs, typescript, shadcn, tailwindcss for a while now and am familiar with the code. Have worked previously on the Joyboy and AFK too!

How I plan on tackling this issue

The main task here would be to fix/update deep linking with the navigator so that the app would not specifically open only the first/default page and open custom page on render. Overall fixes/improvements would include:

• Replace the prefixes with actual URL schemes or domains
• Correct the screen configurations to ensure paths and parameters are properly defined and thus update the linking configuration.
  • A main stack can be used to nest screens under it
  • include parameter in path to capture dynamic parameter
• RootNavigator can be simplified to include only the necessary stacks based on authentication status.
  • Including MainStack and DegensStack when publicKey is not set may lead to unauthorized access and routing to unintended screens.
• Use consistent and descriptive names for navigators and screens.
• Ensure screen names match across navigators and the linking configuration.
• Use ternary operators to render components based on the device type.
• Update screen components to correctly extract and use route parameters.
• set initialRouteName to prevent unintended redirects.
• overall code cleanup.

ETA should be 2-3 days max

[onlydustapp[bot]]

The maintainer MSghais has assigned bhavyagosai to this issue via OnlyDust Platform. Good luck!

[Jemiiah]

I would love to work on this issue @MSghais with an ETA atmost - 72 hours

[lindsaymoralesb]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Lindsay - Software Engineer with almost 5 years of exp. Already contributed to this project several times.

How I plan on tackling this issue

Most of my exp is with react and react native, and I have also had the chance to work with Deep Linking (and solve some strange issues as this is). I'll start by using the urls examples shared and debugging the app, to see where exactly is the issue happening.