Expo, usePreventScreenCapture how can i use preventCapture in modal? (React native) - 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

Related

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

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.

Preventing re-rendering on tab changes with React Navigation

I made a screen component in my project with react native. And I'm using react navigation's material top tab navigator as a swiper. It's a questionable decision but whatever :)
Just imagine you making a screen and, at top you have a image and at bottom you have the top tab navigator as a swiper. It's actually working fine but, everytime when i switch the tabs in the component it's re-rendering the entire component.
And of course this is fires the componentDidMounts for the child components, which causes to make requests over and over.
Is there a way to avoid this?

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?

Why React native navigation loads all components at the same time?

I am using react native navigation v2 by wix. I have a welcome screen with login screen and register. I start the startAuth.js from App.js. There are two tabs with login and register.
But as soon as app starts the componentWillMount methods runs in the register screen but yet i am at login tab.
Why is this happening?
react-native-navigation's Tab does not support lazy loading. But there are two special lifecyle functions where you can put your logic when component appear or disappear on screen
componentDidAppear(): called each time this component appears on screen
componentDidDisappear(): called each time this component disappears from screen
https://wix.github.io/react-native-navigation/docs/screen-lifecycle
There is also a discussion about topic https://github.com/wix/react-native-navigation/issues/1250

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.