I have a text input component in React-native with which I am showing some text by default and user should not be able to edit it. He should keep continue to type in that. Like this:
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 have an Alert to show the user the payment value, like this:
Alert.alert('Payment Value', 'The payment value is $' + paymentValue);
I've been searching but can't find a way to make the value text bold or increase the font size, is it possible to do that? Or I'll have to create a custom alert?
Looking at the docs, https://reactnative.dev/docs/alert#options-android, it doesn't seem like there is a way to customize the font size or style. You'll most likely have to create a custom component using a Modal. If you don't want to go that far, there is the option of changing an Alert's Type or Style.
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.
I'm stuck tying figure out how to pass a TextInput value up from a React Navigation component to my main app. The following Expo Snack shows my code: https://snack.expo.io/#nativedetroiter/test-passing-state-to-screens-and-back
Desired behavior: When I run it, I want this.state.stateVar to take the value I enter into the TextInput box.
Observed behavior: Although the console log shows handleChangeText() gets fired every time I press a key in the TextInput box, but it also shows that this.state.stateVar is "undefined".
What you missed is you have to get the input value during onchage and then send it to the any component. I created a state to locally save the what the user typed and updated code is here snack.expo.io/HJksGPgNm
I don't know whether questions is understood or not. My problem I have a login screen and made validations for that if email.length === 0 now when I tap the submit button just showing an error message using setState.
Then Now, I want to show like a when I start to type the correct email address the error message is to disappear. In Android, we can handle this using android: visible or android: invisible property. But in react native I don't know how to solve this. Help me pls anyone.
If you show your message error like this
<Text> {this.state.msgError } <Text>
Then if you want to hide it when there is an email , you can simply put to the value of your state to an empty string :
this.setState({msgError:""});