React Native OTP Text Input

Author: mmusaib

.gitignore

@@ -0,0 +1 @@
+node_modules

babel.config.js

@@ -0,0 +1,9 @@
+module.exports = function (api) {
+ if (api) {
+ api.cache(false);
+ }
+ 
+ return {
+ presets: ['module:metro-react-native-babel-preset'],
+ };
+ };

dist/OtpInput.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+
+export interface OtpProps {
+ /**
+ * state variable from the parent screen 
+ *
+ */
+ otp: string;
+ /**
+ * setState method from the parent screen 
+ *
+ */
+ setOtp: React.Dispatch<React.SetStateAction<undefined>>;
+ /**
+ * Number of OTP digits to render 
+ *
+ */
+ digits: number;
+
+ /**
+ * To over-ride the default style of OTP input
+ *
+ */
+ style?: ViewStyle;
+
+ /**
+ * To over-ride the dfault text style of OTP input
+ *
+ */
+ fontStyle?: TextStyle;
+
+ /**
+ * To over-ride the default style of OTP input when it is focused
+ *
+ */
+ focusedStyle?: ViewStyle;
+}
+
+
+declare const OtpTextInput = React.FC<OtpProps>;
+
+export default OtpTextInput;