How to call function on 'Enter' press in TextInput - React Native

user_15447879 0
Viewed 2358

I am trying to make Search Bar. I want user to type something in TextInput and when user press 'Enter' I want to call my function.

<TextInput
//here when user press enter call function()
style={styles.searchStyle}
allowFontScaling={false}
placeholder="Search" 
onChangeText={(val) => {setSearch(val)}}
/>

I tried onSubmitEditing but it doesn't work.

react-native-ios react-native node.js javascript
2 Answers
import React, { Component } from 'react' import {TextInput} from 'react-native'

const Trial =()=>{
    const onSubmitted=()=>{
        console.log('Submitted')
      }
return(
    <TextInput
//here when user press enter call function()
// style={styles.searchStyle}
allowFontScaling={false}
placeholder="Search" 
onSubmitEditing={()=>onSubmitted()}

/>
)
}

export default Trial

onSubmitEditing it works fine, I hope it would be helpful for you

user_137906620

if you are using mutiline={true} in TextInput like <TextInput multiline={true} /> onSubmitEditing will not work, instead it will move to nextLine.

I am doing a workaround, so basically I check if user entered next line, if so, call submit function and dismiss keyboard, you can import {Keyboard} from react-native

<TextInput onChangeText={(txt) => {
        if (/\n/.test(txt)) {
         //call submit function here
          Keyboard.dismiss()
          return
        } else {
          //do something here
        }
        
      }} />
user_32934810
Related