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});
Related
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 want to offset the menu that pops over my button. I would like the popup to not obstruct the button clicked.
I read the doc and attempted to add styling but couldn't find where and how to add the style. The doc mentions that some component of this library accept a customStyles prop, but it errors whenever I try to give it something, like <MenuOptions customStyles={{top: 10}}>.
I figured it out.
<MenuOptions customStyles={{optionsContainer: {marginTop: 30}}}>
I need clicking on one button to activate a click function on a different button. I expected to be able to use a ref prop on the button to achieve this but instead I get a 'Cannot read property '$refs' of null' console error.
<v-btn ref="modalButton" #click="modal">Open Modal</v-btn>
<v-btn #click="this.$refs.modalButton.click()">Click other button</v-btn>
Apparently this is because the component isn't created yet but I'm truly confused about what that means and how to solve the problem.
Please note the click has no '()'
<v-btn ref="modalButton" #click="modal">Open Modal</v-btn>
<v-btn #click="$refs.modalButton.$el.click">Click other button</v-btn>
Put "this.$refs.modalButton.click()" into a function - you can't refer to the modalButton that way in the HTML.
Although, if the visibility of your modal is tied to a data property, I don't know why you can't just change the data property directly with both buttons.
If you want to do something when another thing happens, try to use something called event bus. I solve a lot of problems implementing that.
Here is an example:
https://alligator.io/vuejs/global-event-bus/
Btw: If your problem is that the other component has not been created at the render moment, you can solve it calling a function on the #click event, then when you click it, you are going to call the function that is going to be called when everything in the DOM has been rendered. At least that is the way that I solve that kind of problems.
I'm a brand new junior dev working on a react-native app for the first time. I have been searching for quite a while for a way to add a link to the text of a react-native checkbox's value text. If anyone has a link to documentation that might explain what I want to do, I would be super appreciative since I haven't found anything helpful yet. I saw that you can not add html elements into native after I tried a number of variations of anchors. I've tried adding Link to variations and attempted to add an onPress function to the label. I'm grasping at straws here... is this even possible to do?
To be clear, I want a user to be able to press the words "Terms of Service" and have it link to the page that has the terms
{this.props.isUser &&
<CheckBox
containerStyle={styles.checkbox}
onChange={(event, checked) => this.updateAttr('terms', checked)}
value={this.props.program.terms}
label="I have read and understand the Terms of Service"
labelLines={2}
/>
}
Instead of adding the "I accept...." as a label to checkbox, put the Check box without any label and the text 'I have read' as separate Text elements inside a view element and align them accordingly. Then inside the view, put the terms and conditions part inside a touchable and use React Native Linking to link the touchable to open a URL when touched.
https://facebook.github.io/react-native/docs/linking.html
React-Native Open Url in default web browser
I have this simple text input with placeholder:
I need to add search icon before placeholder text.
I need add it exactly in placeholder.
If it possible, please help me with it.
Thank you.
Search bar
i think you can use library for that, i use native-base library, there are already icon textbox, you can modify for placeholder too, this is the reference :
https://github.com/halilb/react-native-textinput-effects
please tell me if you want an example, maybe can help you, thanks :)