I'm developing a mobile application in React Native. The application has the <TextInput/> for entering SMS codes:
const [pinCode, setPinCode] = useState('');
const pinCodeRef = useRef();
// crutch so that the user's keyboard opens automatically
useEffect(() => {
const timeout = setTimeout(() => {
pinCodeRef.current.focus();
}, 400);
return () => clearTimeout(timeout);
}, []);
...
<TextInput
placeholder="Enter pin-cpde"
placeholderTextColor={commonStyles.colors.label}
value={pinCode}
onChangeText={val => setPinCode(val)}
maxLength={6}
ref={pinCodeRef}
keyboardType="number-pad"
autoComplete="sms-otp"
textContentType="oneTimeCode"
/>
I use properties keyboardType="number-pad" autoComplete="sms-otp" textContentType="oneTimeCode" to have the keyboard prompt the user for an SMS code.
The problem is that 6-digit codes on IOS are not prompted, while 4-digit codes work correctly. On Android everything works correctly.
About app:
System:
OS: macOS 13.4
CPU: (8) arm64 Apple M1 Pro
Memory: 141.94 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 16.18.0 - ~/.nvm/versions/node/v16.18.0/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 8.19.2 - ~/.nvm/versions/node/v16.18.0/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.11.2 - /Users/alexander/.rvm/rubies/ruby-2.7.4/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: 2022.2 AI-222.4459.24.2221.10121639
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
Languages:
Java: 11.0.16.1 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.67.4 => 0.67.4
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found
Libraries (for example react-native-otp-auto-fill) did not cope with the code hint (on IOS and ob Android). Only the properties mentioned above helped me.
P.S. The SMS text is the same (only the code length differs)