how to use rxjs debounceTime in react native textInput

user_6496238 0
Viewed 322

I am trying to replicate the debounceTime functionality from rxjs. I saw this example from Angular:

    fromEvent(this.input.nativeElement, 'keyup')
      .pipe(
        map(event => event.target.value),
        debounceTime(400),
        distinctUntilChanged(),
      )
      .subscribe(val => console.log(val));

My replication in react native:

export default function SearchScreen() {
  const [text, setText] = useState('');
  function onChangeHandler(event) {
    of(event)
      .pipe(
        map(event => event.nativeEvent.text),
        debounceTime(400),
      )
      .subscribe(val => console.log(val));
  }
  return (
    <View>
      <View>
        <TextInput
          value={text}
          onChangeText={text => setText(text)}
          onChange={onChangeHandler}
        />
      </View>
    </View>
  );
}

But I could not find a way to use fromEvent. Instead I used the of. But the debounceTime is not working.

rxjs angularjs react-native javascript
1 Answers

Try replace changeHandler with a Subject and remove onChangeText and value attributes

export default function SearchScreen() {
  const [text, setText] = useState('');
  const changeHandler=new Subject()
  changeHandler.asObservable()
      .pipe(
        map(event => event.nativeEvent.text),
        debounceTime(400),
      )
      .subscribe(val => console.log(val));
  
  return (
    <View>
      <View>
        <TextInput
          onChange={evt=>changeHandler.next(evt)}
        />
      </View>
    </View>
  );
}
user_86183500
Related