I have a component that is sometimes pushed as a regular screen on top of the stack, and sometimes shown as a modal.
When a specific event occurs, I need to get rid of the component. But I don't know if it's a modal or a regular screen, so I don't know if I need to call Navigation.pop(componentId) or Navigation.dismissModal(componentId). Is there a way to check before calling?
I tried just calling both in succession, but then one of them fails and throws an error.
I could wrap them both in a try/catch, but that seems like an anti-pattern. What is the recommended way to deal with this?
You can use a command listener and track when it's pushed or shown as a modal
Related
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'm getting the oddest behavior on code that I didn't write (inherited from a colleague). I have never seen this before.
In React Native, when I click on one component's box, sometimes it jumps to the top of the component (it's wrapped by a Scrollview). Other times the view stays put, as it's supposed to. What could be causing this?
Here's the problem: I have a React-Native/Redux app. I need to make sure I can lock the screen (display a modal, really) after X minutes of app inactivity (theoretically someone may have their screen "always on", so I can't rely on the screen turning itself off).
My proposed solution: I want to detect when any touch event happens. I don't want to interfere with them or do anything about it other than reset a setTimeout. But I just want to know when the screen is touched at all.
Displaying the modal itself isn't an issue and is already working. I also have it display the modal if the app leaves the foreground for any reason. I just need the timeout.
I've tried using a TouchableWthoutFeedback that wraps the whole UI and that sorta works, but it doesn't receive any event when a Touchable is farther down the component tree and handles the event. But I've also only used onPressIn and I'm unsure if anything else on it will work as needed. I've looked briefly at PanResponder but that looks a bit more complex than I might need? Not sure on that one, yet.
I'm open to other suggestions, but the only other thing I can think of is having literally every other action in the app (even ones I haven't created yet) send an dispatch up the redux flagpole, and that seems very heavy-handed and prone to error.
is this feasible? What are my options if it's not?
I found the solution. It's to add a onStartShouldSetResponderCapture callback as a prop on a containing View. I can return false in this callback but still notice all the touch events that come through. The Capture portion is important because it gives you access to the event before a "real" touchable can get to it.
Then, in the callback, I just clear and re-create the timer.
Currently, I read some state from AsyncStorage in componentWillMount. However, some screens modify what is in AsyncStorage, and it does not appear that componentWillMount is called when returning (this.props.navigation.goBack()) to a screen, so they don't receive the update.
What, if anything, is called? What are the component lifecyle functions that are called on the return to a screen? Are any of these only called once, when the screen is to be shown again?
componentDidFocus is currently in design not avaiable yet, see react-native open issue #51.
Try this alternative way react-navigation-addons.
i am stuck in a problem that is,
in my application one screen has a Tabbar component so i have used Tabnavigation from react-navigation.
so there is two tabs in that screen and both of that tabs have GET API for displaying data
so my main problem is when tab screen is open at that time both tabs file is calling API because of tabnavigator is in stack navigator.
So please help me to solve this issue.
i have to do like this::-
when i click on tab then after API will be call but here when the screen is arrive at that time both tabs call their API.
so please sort out this issue guys.
You can use TabNavigator's lazy prop.
lazy - Whether to lazily render tabs as needed as opposed to rendering them upfront.
This way your API call will happen only when you switch to that tab. The call will happen only on first switch though. You may need to add some logic to recall API on certain event or time to get the new data.