Question 34143 in React native Question posted in
The official React Native documentation can be found here.

how to detect if user is typing in react native?

I have an application in react native where i’m developing a search feature like Instagram.
It is like if user stop typing show him his query result.
my current approach is messing up redux. And sometimes it returns same element multiple times or sometime random elements which are irrelevant of that query.
right now. I’m calling search api immediately as use start typing in searchbar.

here is code below of my component.

import { getSearchDataApi } from "../../api/search/search";
import { clearSearchData, setSearchData } from "../../redux/action/search";


const SearchScreen =(props)=>{
  const [autoFocus,setAutoFocus] = useState(true)
  const [keyWord,setKeyWord] = useState(null)
  const [isLoading,setIsLoading] = useState(false)
  const [isError,setIsError] = useState(false)
  const [pageNumber,setPageNumber] = useState(1)
  const [loadMore,setLoadMore] = useState(true)


  const loadMoreDataFunc =()=>{
      if (pageNumber <= props.totalSearchPage) {
          setPageNumber(pageNumber+1) 
      }
      else {
          setLoadMore(false)
      }
  }

 const searchData = async(keyWord)=>{
    console.log(keyWord,pageNumber)
    try {
      setIsLoading(true)
      var searchResponse = await getSearchDataApi(keyWord,pageNumber)
      props.setSearchData(searchResponse.data)
      setIsLoading(false)
    }
    catch (e) {
      setIsError(true)
      console.log("Error --- ", e.response.data.message)
      showMessage({
          message: e.response.data.message,
          type: "danger",
      });
      }
    }
 

  return (
    <View>
      
     ....
    </View>
)
}

const mapStateToProps = (state)=>({
  searchData: state.searchReducer.searchData,
  totalSearchPage: state.searchReducer.totalSearchPage,
})

export default connect(mapStateToProps,{setSearchData,clearSearchData})(SearchScreen);

I will really every thankful to someone how can help me in fixing. Appreciation in advance!

GOAL :
The goal that i want to achieve is when user stop typing then i call searchAPI with the keyword he/she entered in searchBar that’s all.

I have also tried setTimeOut but that made things more worse.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Well, I have put some effort to solve it with setTimeout once again and i have done it by following code of snippet.

     useEffect(()=>{
    setPageNumber(1)
    props.clearSearchData()
    const delayDebounceFn = setTimeout(() => {
      console.log(keyWord)
      if (keyWord) {
        searchData(keyWord)    
      }
    }, 500)
    return () => clearTimeout(delayDebounceFn)
  },[keyWord])

  2. 0

    You can use a setInterval to create a countDown starting from 2 to 0, or 3 to 0, put it a state.
    whenever user types, onChange is called, the from the callback you reset the countDown.

    using useEffect with the countDown as dependency, you can open the search result whenever the countdown reaches 0. (which means the user hasn’t typed anything since 2s ago)

    this might help for creating the countdown https://blog.greenroots.info/how-to-create-a-countdown-timer-using-react-hooks

    Login or Signup to reply.
  3. 0

    The best solution to your problem is to debounce the state variable that is responsible for the user input. This way, you can use the effect hook to watch for changes on the debounced variable, and call the search API if/when conditions for the search API variables are met.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search