I've been trying to make it so that my program does not allow you to input more than a certain amount of characters into a TextInput component, similar to how maxLength works for input. I haven't been able to find anything similar maxLength for textInput. Is there an easy way to set a maximum number of characters for the < TextInput /> component?
In the props for TextInput you can set a maxLength attribute.
From the documentation:
maxLength number
Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker. #platform ios
<TextInput value={this.state} maxLength={10} />
I wanted this functionality as well. The example app in react-native called UI Explorer has implemented TextInput with a maxLength property. However, I believe they made this change on July 22nd for v0.9.0rc. Here are the links -
https://github.com/facebook/react-native/commits/master/Examples/UIExplorer/TextInputExample.js
https://github.com/facebook/react-native/commit/961c1eb42904a4d5516fd7939ba14bc0625309d3
The first link is the history of commits for the TextInput example and the second is the actual commit that concerns you. Hope this helps. Cheers!
Related
I'm given a custom designed number pad in a React Native app and I need to implement text input functionality, just like the OS number pad/keyboard. The text input is a regular React Native TextInput with showSoftInputOnFocus={false} to prevent the real OS keyboard from appearing.
How can I create a key press event that will be handled correctly with the currently focused text input field, without recreating whole text input/handling logic from scratch?
I'm looking for something like (made up code):
function pressEvent(){
Keyboard.dispatchPressEvent(1); //such a method does not exist, made it up to demonstrate my needs
}
<Pressable onPress={pressEvent}><Text> 1 </Text></Pressable>
The closest I've found was Keyboard.emit for which almost no documentation exists.
I've ended up creating a controlled component where I've manipulated the business logic on parent and passed it to the text field.
Because my needs were simple (numeric entry, no caret position. much like a calculator) I was able to pull it off.
I need to build this OTP component.
At first it seems to be very simple in terms of design, we just have create 4 boxes and use 1 TextInput component for each.
But the issue with this approach is that user will have to tap every box and write the number.
So, I thought of another idea where we have to use only 1 TextInput component and cover it with a view such that 4 windows are formed through which text could be seen.
Although the approach seems to be fine but I don't understand how do I write code for this.
I use this package in my project https://www.npmjs.com/package/#twotalltotems/react-native-otp-input
I'm trying to create a TextInput component that is both editable and has clickable urls. According to the react native docs, the dataDetectorTypes prop is only supported when editable={false}.
Determines the types of data converted to clickable URLs in the text input. Only valid if multiline={true} and editable={false}.
Has anyone found a way around this limitation? It seems like it should be possible. The behavior I want is...
Tapping on the url should open it in a browser
Tapping anywhere else should start editing at that position
It's ok if the link is no longer clickable when the TextInput currently has focus
The only thing I can think of to get around this is to store the editable value in state and then upon clicking some Edit button will change the state from editable to true.
onBlur would switch this state back to false
I haven't tried this before though so just a suggestion on attempting workarounds or finding some middle ground between the two.
My suggestion is to place the input field with the url centered inside a bigger div.
Make the input field not much bigger the text inside it and when you click it trigger some function that redirects to the page on your state.
And when you click on the outer div you trigger a function to focus on the input field and edit its value.
How to set returnKeyType to all TextInput fields inside one application?
I'm currently using tcomb-form-native and have to define returnKeyType again for every field, I just want to define it once and should work in every component.
any ideas?
You have a couple good options
Create a custom text input component, and here you can create a stylised TextInput field for use across your entire application. You can then set returnKeyType=whatever in its props, and use this component for all your text input instead.
Use react-native-global-props, which seems to have been created for this exact purpose. Here is the link to the repository for more information / instruction
I have an inputfield and I want to get rid of the focus on it, after i click the submit button.
Any suggestions on how I would go about this?
You can add ref to your text input: <TextInput ref="input"> and then call this.refs.input.blur().
Keyboard.dismiss();
Keyboard.dismiss() will remove focus from all text input fields in view and hide keyboard.
and for specific field you can use the above mentioned method
<TextInput ref="input">
this.refs.input.blur()
It may not seem like the obvious answer, but you can try the static method Keyboard.dismiss() for this.
https://facebook.github.io/react-native/docs/keyboard
I needed to remove the focus when uncertain which input might have it. This did the trick.
In my use case I explicitly needed the input to lose focus (and require the user to touch it again with the intent to edit).
The kludge in this blog post was what worked for me the best:
this.refs.input.setNativeProps({'editable':false});
this.refs.input.setNativeProps({'editable':true});