How to import navigation in WebView component? - reactjs

i stuck with one case in React Native. I have this components:
This is my App file..where my set i want to start with WebViewScreen, i still did not set useState etc.
My Navigation component:
And my WebView component:
So i have one question. How i can use navigation in WebViewScreen, when this component is outside of NavigationContainer. Some people will tell to import WebViewScreen as Stack.Screen .. okey but in my site where i have inputs and after click keyboard should up on Android when i click input keyboard up, refresh and hide..I need to use navigation, because with changeNavigationState i want to handle when user click on Login button, to redirect to my Native Login Screen. Thanks in advance :)

Theres is NO way you can use any navigation method from react-native-navigation outside of their own provider (NavigationProvider). If you want to use navigation on your WebviewScreen, you HAVE TO place it in a stack screen. Besides from that, anything else would be BAD PRACTICE. If this answer is not enough pls explain why you can't place the WebviewScreen in your NavigationContainer cause this is the real problem then.

Related

React Native bottom drawer navigation with sub menus?

I am looking for a bottom navigator react native component that will allow me to have sub menus pop out of it?
I'm thinking of something that looks like this:
React Native Navigator
I have a hard time believing this doesn't exist. Can anyone point me in the right direction? I would really appreciate it.
I would suggest using something like createBottomTabNavigator from React Navigation
That allows for bottom navigation but would also also you to create more than one row like your mock. See this link for more info: How to create a bottom tab navigator with multiple rows?

how to clear localStorage on browser window close not on tab close and not on Refresh in React JS?

I am using react-router-dom with Switch, Route, withRouter . How to implement in this scenario in React js.
Basically i used window.onbeforeunload but this is wokring on tab close but this is not my scenario. I want on browser window close not on tab close and not on Refresh clear the localStorage.
Perhaps instead of using localStorage you could use sessionStorage? This lasts for as long as the tab is open rather than the page (browser). A good link to view regarding this can be found at javascript.info and highlights the subtle differences between the two.

Force React Navigation go back without re-rendering

I am using DrawerNavigator from react-navigation with Redux for my React Native app (using Expo). My Home screen contains a map (using react-native-maps). From Home screen, I navigate to a new screen.
Whenever I click the Back button in this new screen to go back to Home screen: dispatch(NavigationActions.back(), the Home screen always re-render. Is there any way to go back without re-rendering my Home screen and keep all the states and props unchanged?
This is an open issue I think. Try using a stacknavigator inside the drawernavigator instead.

Close screen / unmount screen

I am using react-navigation to navigate the screen in my react native app. I have one question, is it possible that when I close screen or unmount screen, the rendered content are kept and not destroyed. So the next time when I call the screen again, the rendered content should not be reloaded again. Or maybe there is another way to achieve this. Thanks a lot
You should try redux and get your states from your reducers.

How should I use route&view

Background:
I am using backbone.js & Twitter Bootstrap in my client-end page.
On clicking the logout button on header, a confirmation dialog should open.
The question is that
should I use router such as /logout to change to logoutView ?
If click No in the dialog, how could I show the main content with data before the dialog is opened.
Thanks!
Yes, you can use a router and you should.
First thing to know, is you have to render application's layout before dispatching any route, because the layout is rendered and needed for every action, so it's independant, right ?
Second you create a "logout" route in your router and give it the "#logout" hash, then in your "logout" action you open the modal.
Don't use router for such thing. Just fire the modal directly because:
On changing the router, you are gonna push that to the History. Hitting the browser's back button shouldn't really open a modal window.
URLs should be crafted in a way to be bookmarked. You don't want a URL that would open a popup or a modal window!
It's much simpler just to start the modal than to create a variable to hold the previous view and to fall back to it when clicking No
I have build client-side apps using different MVC frameworks like AngularJS and Backbone.js. Every time I faced the same situation you are talking about and found that the easiest and most accurate way is to just show the modal.
UPDATE
Please watch this. This is Jeremy Ashkenas the author of backbone.js stating exactly your situation about how should URLs be used and weather if they should be used to open a pop up or not.

Resources