I'm writing a timer app using react native on android in clojurescript (using reagent hopefully not important).
I have a TextInput
where I accept text from the user to name the timers. Whenever my timer ticks, the entire android application re-renders and I lose focus on the TextInput
. I am currently using onChangeText
to save the characters I am typing, is there a way to keep focus on the text input while the timer is ticking?.
Thanks.
When the TextInput is in focus the keyboard appears automatically and this prompts the user to type in. You can use autoFocus prop to make the textInput on focus in react native. When the autoFocus is made true the input get focused on componentDidMount lifecycle. The default value of autoFocus is false.
it is because you are rendering the form in a function inside render(). Every time your state/prop change, the function returns a new form. it caused you to lose focus.
To select the next TextInput after pressing the "next" keyboard button with React Native, we can assign refs to the TextInput s we want to set focus on. And then we call focus on the ref. current of the TextInput to set focus on the input.
What is onBlur event in React. React onBlur behaves just like the native JavaScript version of blur. Every time you get out of focus from the input field, the event will trigger. It doesn't matter if the value has changed or not, every time you get out of focus.
The simplest solution is to call this.refs.yourTextInput.focus()
inside of the componentDidUpdate
method. However, this will likely cause the keyboard to animate down, and then animate up again.
The root of the problem is that your timer value and your TextInput share the same scope, so when the state is updated, both the timer and TextInput are re-rendered via the render
function. Ideally, you can:
Put your timer text in a custom component, and add a method on that custom component to set its own state. This will cause only the custom component to re-render as long as the custom component's state is the one which is updating.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With