React Navigation library supply me the blur event, that trigs when the focused screen is going to be unfocused. Great.
But what if I need to prevent the blur action itself by stopping the user to go away from this screen? The docs only mentions the 'beforeRemove' event, that is something else.
Is there a way to prevent a user to go away from a screen using the screen component logic?
Basically, blur event's callback function must navigate to this page
Related
I've got a problem with keyboard in react native. I have a component with TextInput inside of it. The problem is when I am touching it - keyboard is starting to show, but immediately hiding back. (Checked with event listeners of Keyboard - event keyboardWilHide triggers, but I don't know what triggered it).
My assumption that the core of the problem in my navigation architecture. I have materialBottomTabNavigator which has materialTopTabNavigator inside, which has StackNavigator inside, and my component is a screen in stack navigator. Probably some tabs properties are triggering Keyboard Hide event, but I did not found any.
(In terms of debug launched app with my component moved out of this type of navigation and everything works fine).
Would appreciate any help. Thanks in advance!
I have a screen with WebView (react-native-webview) which has scrollable content. If user continues scrolling after reaching the end of WebView, I want to take user to a different screen with a swipe up animation. With WebView's onScroll function property, I am able to determine if the user has reached end of content or not. But I am not able to take user to a different screen with an animation effect.
Since WebView acts different for android and ios platform (you can continue scrolling even after reaching end of content on ios), I had to use PanGestureHandler to identify if the user is performing swipe up action after reaching end of web content. But when I manually try to navigate user to a different screen, I am unable to create swipe up effect similar to one in GIF below.
I am using react-navigation v5 in my app.
I have already tried using react-native-swiper. It does not work well in Android because it internally uses Scrollable and WebView stop scrolling inside a Scrollable component.
I am using custom HTML content here, so replacing WebView is not really a choice. Is there a way to utilize Stack Navigator to create such an effect?
Thank you.
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
i am currently working on an App for Android and iOS - i am using react native.
Is there any way to hide the navigation bar dynamically in react-navigation or should i rather switch to react native router flux?
When the user changes to landscape i want to hide the navigation bar, when he goes back to Portrait, i want to show it again.
I know how to change it statically by using {header: null} in the navigation Options, but this does not help me in this case, at least i did not find a way to solve this.
Thanks in advance!
This is sort of a hack but I think you can replace the provided header component from React navigation with your own, then add a redux state that controls its visibility.
Either wrap your screens with a view that contains an onLayout event that will trigger redux action to set the visibility of your custom header.
After successfully login I want to reset my navigator to Home screen with a animation. This is very much possible with Navigator's resetTo method but I am using react-native-router-flux and this component do not have animation on reset action. Issue is already raised here.
I am looking for resetTo and immediatelyResetRouteStack functionalities in react-native-router-flux, if you have any solution to this let me know please. Thanks.