tttstudios / react-native-otp-input

Tiny Javascript library which provides an elegant UI for user to input one time passcode.
MIT License
535 stars 241 forks source link

onCodeChanged is called twice with M1 macbook and iPhone 14 pro, while working fine in Android #226

Open imanshul opened 10 months ago

imanshul commented 10 months ago

Describe the bug When user type in iOS, the onCodeChanged method is being called twice for every letter, this is only happening for iOS and working fine in Android

To Reproduce Steps to reproduce the behavior:

  1. Run in iPhone 14 Pro
  2. Start typing and add console log to onCodeChanged method to replicate

Smartphone (please complete the following information):

shubham-kumar10 commented 10 months ago

Facing similar issue on all iOS simulators.

dprajapati1179 commented 9 months ago

You're right for a quick fix, you can use the debounce function from lodash

import debounce from 'lodash/debounce';
import OTPInputView from '@twotalltotems/react-native-otp-input';

export default function App() {

  const onCodeFilled = debounce((code) => {
    sendCode(code, navigation);
  }, 500)

  return (
    <OTPInputView
      pinCount={4}
      onCodeFilled={onCodeFilled}
    />
  );

}