I have a <TextInput />. I am trying to simulate key press event on "submit" button where I added it below the TextInput. Here code:
<TextInput
style={styles.textInput}
onSubmitEditing={event => onSubmitEditButton(event.nativeEvent.text)}
/>
<TouchableHighlight onPress={"HERE I AM TRYING TO SIMULATE ENTER-KEY PRESS IN ORDER TO TRIGGER OnSubmitEditing EVENT"} style={{position:"absolute", top:50}}>
<Text>Submit</Text>
</TouchableHighlight
If you simply want onSubmitEditing to do the same thing on a button press, then just call onSubmitEditing in onPress of your button. But this would require storing the text within an input externally:
const [text, setText] = useState('')
const onSubmit = ()=>{
// do stuff with text in textinput
console.log(text)
Keyboard.dismiss()
}
return (
<TextInput
style={styles.textInput}
onChangeText={setText}
onSubmitEditing={onSubmit}
/>
<TouchableHighlight
onPress={onSubmit}
style={{position:"absolute", top:50}}
>
<Text>Submit</Text>
</TouchableHighlight>
)
Related
I am unsure how to trigger an event in my TouchableOpacity component that will target the TextInput component. I'd just like to be able to allow the user to type in a multiline area and click a button when they are finished, so that they are able to save their text (similar to how the iOS Notes app functions).
<View>
<View>
<Text>Notes</Text>
{typing &&
<TouchableOpacity
onPress={() => {
//blur() the textinput here
}}
>
<Text>Done</Text>
</TouchableOpacity>
}
</View>
<View>
<TextInput
multiline={true}
textAlignVertical='top'
value={text}
onChangeText={(text) => {
}}
onFocus={setTyping(true)}
/>
</View>
</View>
If you only need to access the text inside the same file, store your text in state in your component.
const [text, setText] = useState('');
...
<TouchableOpacity
// not sure what you want to do with the text here, but it'll be available in the `text` variable
onPress={() => saveNote(text)}
...
<TextInput
onChangeText={newText => setText(newText)
// or more simply
onChangeText={setText}
...
/>
The text input will automatically blur when you touch the Touchable.
If you need the text available in other files, have a look into React Context or look up state management libraries for React Native.
The question is simple, <TextInput /> inside <Animated.View /> is being trigered on every onChangeText event. I want it to exit the animation only if Submit button is pressed. Code is below:
const InputBox = () => { return(
<Animated.View style={styles.inputContainer}
entering={SlideInRight}
exiting={
SlideOutRight
}
>
<TextInput
style={styles.textInput}
onChangeText = {(text) => setTypedText(text)}
/>
<Pressable
onPress={onSubmit}>
<Text>Submit</Text>
</Pressable>
</Animated.View>
)
Any ideas?
Edit: I realized that, when I directly use this <Animated.View/> inside render seems not any problem, but when I create the component dynamically with const InputBox=()=>{} the problem occurs. So the question is why? And how can I use this component which is created by using const InputBox=()=>....
I have multiple Text elements as children of a TextInput for the purpose of styling. I would like the user to tap on them to activate a modal (unique to that Text element), however I'm unable to get the onPress event to work. Here is a simplified example:
<TextInput>
<Text onPress={() => console.log(1)}>touch me</Text>
</TextInput>
"touch me" is editable as you'd expect inside a TextInput, but onPress doesn't fire when it is tapped.
Is there a way I can make this setup work as I intend?
You can to wrap it inside a TouchableOpacity:
const [value, setValue] = useState('Press me');
return <TouchableOpacity onPress={() => alert("Hello world")}>
<TextInput
value={value}
/>
</TouchableOpacity>
I have a button and when it is pressed I would like it to open the keyboard and focus on a text input component.
For a minimal code example what I am trying to do is this-
<View>
<AddSomething
textChange={textInput => this.setState({ textInput })}
addNewItem={this.addItem.bind(this)}
textInput={this.state.textInput}
ref={not sure what goes here} //passing these as props to a text input
/>
<FloatingButton tapToAddHandler={this.onFloatingButtonPress.bind(this)} />
</View>
then some helper function where I handle the button press (this.onFloatingButtonPress)
First declare your AddSomething as below :
const AddSomething = React.forwardRef((props, ref) => (
<TextInput
ref={ref}
//your other code
/>
));
Now you can use ref and able to focus your AddSomething component as below:
<View>
<AddSomething
textChange={textInput => this.setState({ textInput })}
addNewItem={this.addItem.bind(this)}
textInput={this.state.textInput}
ref={(ref) => { this.textInputField = ref }}
/>
<FloatingButton tapToAddHandler={this.onFloatingButtonPress.bind(this)} />
</View>
Here is your onFloatingButtonPress method :
onFloatingButtonPress() {
this.textInputField.focus();
}
Proposal a react-hook version :
const inputRef = React.useRef()
return (
<TextInput ref={inputRef} />
<TouchableOpacity onPress={() => inputRef.current.focus()}>
<Text>Press</Text>
</TouchableOpacity>
)
I am developing an app on react native. I want to call a date picker when i press on a Text-Input and after selecting a date it should show on the Text-Input
Wrap TextInput into a view and set pointerEvents as none.
Now you can use Pressable component from react-native to listen to the onpress event.
<Pressable onPress={() => alert('Hi!')}>
<View pointerEvents="none">
<TextInput />
</View>
</Pressable>
You cannot explicitly call onPress for TextInput. You could only use. onFocus which will be called when you press the input box to get cursor over there. No need to focus on onBlur as your use case doesn't required.. Handle close within onFocus if possible.
onFocus = () => {
// do something
}
render() {
<TextInput onFocus={onFocus} />
}
What you have to do is use onFocus and onBlur of TextInput.
<TextInput
onFocus={this.onFocus}
onBlur={this.onBlur}
/>
onFocus = () => {
// Open date picker
}
onBlur = () => {
// Close date picker and add value to textinput
}
You can make text input field read only by providing
editable={false}
pointerEvents="none"
prop to TextInput.
Wrap TextInput inside View and set pointerEvents="none", wrap that view with TouchableOpacity or any other Touchable Component. Please see below example!
<TouchableOpacity
onPress={() => {
alert('hello');
}}>
<View pointerEvents="none">
<TextInput
onChange={() => {}}
value={''}
placeholder={waterMark}
editable={!isDisabled}
selectTextOnFocus={!isDisabled}
/>
</View>
</TouchableOpacity>