enter image description here
This is my current keyboard pad which is keyboardType="numeric". I want to change the symbol to '+' as I only want to allow my user to input either '+' or digits.
I've tried different keyboardType but could not find any method to modify the symbol. The only method I can think of is using normal keyboardType, then use regex to prevent user to input anything besides digits and '+'.
Please help if you know how to do it. Thanks a lot.
You can not change the button on keyboard. You are right, you can use regex
^[0-9 +]+$
So in your case below code can be used
const [number, setNumber] = React.useState<string>('');
const onChangeText = (text:string)=>{
setNumber(string.replace(/^[0-9 +]+$/g, ""))
}
<TextField onChangeText={onChangeText} />
Related
I use GiftedChat from react-native-gifted-chat and I use the InputToolbar component to style the input. My problem is that I can't change the "enter" button on the keyboard with that. Should I use TextInput and make a separated button for Send instead of InputToolbar?
I found the answer but I will not delete this question because it took me a while to find one.
You can add textInputProps in the InputToolbar component:
<InputToolbar
textInputProps={{returnKeyType: 'send'}}
/>
I am using an Input component with "decimal" keyboard. Unfortunately this keyboard has no button to dismiss itself.
My workaround is to show an icon on the right side with an appropriate action on it. However, this is of poor usability.
What is the best way to tackle this?
<Input
ref={purchasePriceInput}
placeholder="Enter purchase price"
returnKeyType={'next'}
keyboardType = 'decimal-pad'
onChangeText={value => setPurchasePrice(value)}
label={'Purchase Price'}
labelStyle={styles.label}
rightIcon={<Icon
name='check'
type='font-awesome-5'
color='gray'
onPress={()=>{purchasePriceInput.current.blur()}} //<-- my workaround
/>}
>
{purchasePrice.toLocaleString()}
</Input>
You only need to change returnKeyType="done"
returnKeyType determines how the return key should look.
The following values work across platforms:
done
go
next
search
send
These values are just appearance.
So in your case, next works but it looks like a right arrow.
as the doc says: ellipsizemode props defines how text will be truncated. in my case, i want to show a expand button instead of ellipsis glyph, and i could expand the text to show all of them by press the button.
so i want to figure out how numberOfLines actually works in Text component in react-native. then i could archive this, anyone could help?
It will show your content in <Text> component which is fitted in those numberOfLines.
With output you are expecting or want to perform, you can use dynamic numberOfLines using state.
Just have that state variable default value of lineNumbers and change it when pressing on button or any other component.
this.state = {
lineNumbers: 2
}
This indicates your numberOfLines will be default 2, and once user press on button or read more
this.setState({lineNumbers: null})
It will show whole content.
<Text numberOfLines={this.state.lineNumbers}>
I tried keyboardType='number-pad' and keyboardType='numeric' i get a keyboard without the character +
I want the user to enter the Phone Number with the country Code (i.e) '+' sign is required.
Please refer to the keyboard type:
http://facebook.github.io/react-native/docs/textinput#keyboardtype
You need to set the keyboardType to be a a 'phone-pad'
<TextInput keyboardType={'phone-pad'} />
I'm using react native TextInput field for save a password value, so I added the secureTextEntry to hide the value. So I type the password and everything is good but if I go to other field let say username and I go back to the password and I want to add a new character to the password that I put it before the input gets clear and take the new character as the new password. So for example if I type "cat" and then I want to add another letter for example "o" it does not add like this: "cato" instead just set the value to "o"
I'm using the onChangeText to handle the state but I dont know what is happening there..
This is the input:
<TextInput onChangeText = {(pass) => this.setState({pass})} value = {this.state.pass} secureTextEntry = {true} />
iOS by default clears the text in a secure text field.
See further discussion of this issue on the underlying UITextField at UITextField with secure entry, always getting cleared before editing