React navigation modals on react native web - Prevent url path update - react-native

I have a react native app that we are implementing the react native web version using: React native web, the app uses the latests react native navigation library.
So far, mostly everything is working except for modals, the problem that i have is that when i open a modal, the URL path on web updates (I.E: from /signup if i open a modal it switch to /legalAgreementModal?QUERY_PARAMS....), so if i refresh the page the modal works but i can't close the modal anymore. I thought about adding a conditional on the modal to goBack if there is anything to go back to, but the problem is that i have too many modals that can go back to different screens so it will be a huge change if i have to add that logic to every modal.
My question is, is there a way to avoid modals to update my path? So if user refresh they lost the modal but they are on the original screen? Perhaps another workaround that you guys may know could help also!.
Thanks!
I tried adding a conditional on modal close action, adding empty string as the modal path.

Related

Expo, usePreventScreenCapture how can i use preventCapture in modal? (React native)

I wanted to prevent screen shots in my app, similar to how Netflix uses PreventScreenCapture. I found the Expo package 'expo-screen-capture' and tried using the usePreventScreenCapture hook, but it only works for the current screen. This is a problem because I have a modal in my app, and it is not considered part of the current screen. Is there a way I can prevent screen shots from being taken of the entire app, even when the modal is displayed? I tried declaring the usePreventScreenCapture hook in the main component (which is at the top of the routes), but it doesn't seem to work for the modal.
*: I try declare inside the modal component too

React-Native WebView doesn't update after going away and back to the WebView

I use react-native-navigation with community web-view component.
My problem is - the screen is called WebLinkScreen and it opens different weblinks inside my app.
If I go away from that screen with let's say opened https://example.com. Then open a different page that passes an argument with URL https://sample.com, I still see example page being opened.
What am I doing wrong? Who is caching the screen/page? Is it a WebView component or react-native-navigation stackNavigator?

How to show which page is currently opened in sidebar using React Navigation?

I want to show which page is currently opened by the user in the sidebar in a React Native app, which incorporates React Navigation (v1.5).
I want to implement something like this image in my application.
I've tried doing this using this.props.navigation.state (reference) which shows current states/routes in the app, but that didn't worked out for me.
Someone suggested to use global variable in React Native but that was again disappointing.
Kindly help me with that.

cread custom splash / launch screen using an animated svg

I am trying to add an animated SVG as an application loader in a React native app. Their docs don't offer any solution on how I could approach this.
Back when I was working on a react native project, we had used a simple method to achieve splash screen effect.
We had called setTimeout() in componentDidMount() to navigate to the home-screen after 2 seconds. Also, we used to check whether the user is logged-in. If so, we'd navigate straight to the home screen skipping the annoying splash screen altogether.

How to access UINavigationController in react native?

I have created a View where the NavigationBar comes from Obj-c(Native code) and the rest of the view comes from React Native.
Now in the react native view, i have a link which should show the content in a new screen with the navigation experience. I am able to show the content but unable to find a way to change navBar title and show back button on the navBar.
Can you please let me know how we can get access to NavigationBar(Obj-c) in ReactNative?
I don't believe React Native supports this. You cannot take an object created in one language and access it in another. It would be a better idea to create your navigation bar in your JS and use it throughout your app. That even allows you to propagate that UI to your android apps.