My app is wrapped in both Context and Navigation. The issue is that, everytime the context gets updated, the navigated component unmounts and remounts. This causes the keyboard to dismiss and other unwanted side effects.
Ah, the tutorial I used had me putting the imported file components inside a local function in my App class instead of linking them directly to the Stack.Screen. Working now.
Related
I am developing a library consisting of React Native components and this library is used by a React Native application. I have a problem where I want to avoid rendering WebViews during transitions since it is causing crashes on Android. My problem occurs when the application switches to a new screen and renders a component from this component library. The component adds listeners for transitionEnd and beforeRemove. And the problem is that the transitionEnd listener doesn't always seem to get initialised soon enough for me to be able to recognise that the transition has ended and I am not able to determine if I can safely render a WebView.
Do you see a solution that already exists in react-navigation or is this perhaps a feature that should exist?
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 put console log inside of my functional component file. In this file render whenever the API called. If I called API in some other file and the API not related to that file still got logs. I am not sure why. I have checked useEffect and usestate but no clue. Even search from google no clue.
I am using Usestate to store and useEffect to reloaded the the page when data change
I am using apisauce to call the API
React native navigation bottomtab to navigate the screen
Using React.memo but still page rendered.
Any one please help me to resolve this issue. because I am new to react native.
React components automatically re-render whenever there is a change in their state or props. A simple update of the state, from anywhere in the code, causes all the User Interface (UI) elements to be re-rendered automatically.
However, there may be cases where the render() method depends on some other data. After the initial mounting of components, a re-render will occur when:
A component’s setState() method is called.
A component’s forceUpdate() method is called.
Warning: You should normally try to avoid all uses of forceUpdate() and only read from this.props and this.state in render().
So in my app I have a main component which have switch navigator and then inside switch navigator I have a tab navigator which renders different screens. I have registered notification handler in top component.
Now the problem is that when notification is received, I want to make some changes on screens inside tab navigator.
I have read about redux which will provide common store so state could be updated but I dont want to use that.
I have also read about lifting state up but in my case i have more nested components so I dont want to do that as well.
So suggest me some way to do it?
I have solved the problem by using react context api. It is simple wrap your top level component with provider and define some veriable and access that variable in any component.
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