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.
Related
Sometimes my app is quite busy with other stuff so for a noticeable amount of time,
it becomes unresponsive to touch events bound to my TouchableOpacity components.
activeOpacity property makes the button changing its opacity with some delay (1-2 seconds) if that kind of heavy load being present so users do not feel that they actually press that button and keep pressing until they see a reaction. Of course it creates some frustration for them.
My understanding is that I think these opacity changing animation also requires some communication between JS and native side over the bridge. That's why it is affected by other bridge communication and becomes unresponsive for a while.
Is there any way to overcome this situation in React Native side and make the button immediately change its opacity?
Or can it be handled only by creating a new native button component for that purpose ?
Check out requestAnimationFrame https://reactnative.dev/docs/timers.
"requestAnimationFrame(fn) is not the same as setTimeout(fn, 0) - the former will fire after all the frame has flushed, whereas the latter will fire as quickly as possible (over 1000x per second on a iPhone 5S)."
Wrap your onPress logic in requestAnimationFrame so that the animation happens before the logic.
The goal is a simple and clean implementation to build a pop-up window similar to the search-filters from the YouTube-App, see picture. Tapping on the half-transparent border should close the pop-up. The same pop-up is supposed to be called from several screens (within nested navigation-structures) and just give back the choices to the respective screen.
I did quite some search and documentation reading, so I seem to have the following four options:
Use an Alert window and heavily modifying the alert message, but this option does not allow me to cancel by clicking on the transparent area.
Using some promising-looking component which is very beta like react-native-popupwindow is not really an option either.
Use a modal component which claims to be a simple way to present content above an enclosing view. According to How to dim a background in react native modal? and Tap outside of modal to close modal (react-native-modal)" this seems to be a possible option.
However, some people say that you should rather use Overlay and use Modal only as a last resort.
Please advice which of the solutions you tested in real life. What do you suggest? Maybe there is even an easier solution?
Related question(s) here on StackOverflow:
Transparent overlay in React Native
Modal is totally your way to go.
My personal choice would be https://github.com/react-native-community/react-native-modal which has the best performances and flexibility overall.
Firstly, apologies for the slightly open ended questions but I can't find the info I'm looking for in other questions.
I'm trying to understand the lifecycle of a RN app on both iOS and Android. I understand the app bootstraps when you first start it and stays running while the phone is alive, but what happens when the user switches to a different app and comes back, or their screen times out then they switch it back on? It would be really annoying if the app restarted just because they briefly switched to check their email.
My specific use case (not particularly important to this generic question but included for context) is that I'm trying to build a game with socket.io connections and I'm wondering if I can hook into events to see if the app has been in the background or if I even need to. I have found a way of forcing a restart which may be necessary at some points, but I'd rather just try to reconnect things that have disconnected if I can find out when that happens.
Any push in the right direction would be appreciated.
The app doesn't restart when it goes in the background as you describe. The app keeps its state and the user sees the last screen they visited.
You should have a look at react native's AppState
https://facebook.github.io/react-native/docs/appstate
Using AppState you can addEventListeners that capture the change of the app's state like when going to background.
Of course there are also some problems here...
You can't capture the "kill "event. You can only detect if the app is sent to the background but unfortunately you can't detect when the user chooses to "kill" the app
You can't run any code while your app is in the background. This might be serious in your case but you should evaluate it. For example if you have a timer and you sent the app to the background then the timer stops.
Using the react native's official Modal component
Is there any way to prevent the behavior when the modal is open, if i press the menu button of the mobile (built-in one) the modal flickers and closes temporary exposing the background view. Please see the attached url of the GIF for clarification . I am also not sure whether its a default behavior in react native or not.
https://imgur.com/LeTtNj5
Thanks in advance
This isn't so much a solution as much as it's guidance. You haven't really given enough detail to help you out properly. Best if you can share the code or setup a reduced test case at https://snack.expo.io that we can fiddle with.
That said, I'm not totally sure. This is an interesting problem, and I'm curious if you'll find a possible solution and it may depend on your implementation details. For instance, is the modal part of the navigation stack (react-navigation?) or is it an imported component? Either way, I would begin by playing with componentWillUnmount. Does it get called? If so, perhaps you can insert some black magic there to minimize the effect, but you'd first need to isolate what specifically is going on before you can hope to solve it.
How can I automatically scroll the view up when I focus in a TextInput box and a keyboard is shown such that the TextInput box is not hidden behind the keyboard?
This question has been asked on StackOverflow a few times and I implemented the solution here which is the general solution advised in most of the answers. This solution works fine in the iPhone simulator but doesn't work on the actual phone. Has anyone else experienced this problem that the solution doesn't work on the actual phone?
Second thing that I noticed after adding this solution is that now if I am focussing in a TextInput box and keyboard is shown, if I press a button or try to focus into a different TextInput box, the first touch is always consumed to hide the keyboard and the button is not pressed or the other TextInput box is not focussed. It is a little annoying for the user to have to do the operation twice. Has anyone else observed this problem?
Please let me know if you have any inputs on how to solve these problems?
I assume you are using this solution. I ran into the same problem and made some adjustments (see gist). I addressed both problems you describe. keyboardShouldPersistTaps solves your second problem.
I have not found the exact reason why the spacing works in Simulator but not on a real device. It has something to do with the timing. The original code sets a timeout on input focus and tries to scroll down after 50ms. Increasing this to for example 500ms makes it work on devices too, but I don't really like adding magic timeouts that I don't understand. I changed it, so onFocus I look up the element to scroll to and store a reference. When onKeyboardDidShow fires I use the reference.