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!
Related
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
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?
I would like to have a small menu that closes if the user interacts with any other component. For example if the user tries to scroll or interact with any of the content in a scrollview behind the menu (see the image below for reference).
I have two ideas for how this might be achieved:
A transparent layer behind the menu with an absolute position and dimensions matching the device. If this layer registers a touch event the menu can be dismissed. The problem with this is that from the users perspective the touch event was totally ignored. So for this to work well I would need to be able to still pass the touch event through the absolute layer to the content behind it.
Add callbacks to every component that could be interacted with to notify the menu that it should close. This option seems like it would be very messy and because of the large number of components in my use case it is not practical to implement and maintain.
Is there an other proper way to solve this problem? Can any of the issues I raised with the ideas above be resolved or mitigated?
Wrap your view with a TouchableWithoutFeedback component and provide it a onPress callback that hides the menu if it's open. Depending on how top-level the 'expand' icon is, you may want to track the menu's visibility in redux and dispatch an action onPress to track globally.
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.