My npx react-native info gives as below:

System:
OS: macOS Mojave 10.14.5
CPU: (4) x64 Intel(R) Core(TM) i5-8210Y CPU @ 1.60GHz
Memory: 23.68 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.14.0 - /usr/local/bin/node
npm: 6.13.4 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.6010548
Xcode: 11.2.1/11B500 - /usr/bin/xcodebuild
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.5 => 0.61.5

The OTP screen with keyboard of type numeric is expected but is not showing up.

<OTPInputView pinCount={OTP_LENGTH}
                                        style={{fontSize: 24, height: "60%", paddingHorizontal:2}}
                                        keyboardType="numeric"
                                        onCodeFilled={(code => this.updateOTPDetails(code, "OTPMessage"))} 
                                        codeInputFieldStyle={styles.underlineStyleBase}
                                        codeInputHighlightStyle={styles.underlineStyleHighLighted}
                                        autoFocusOnLoad={true}
                                        onCodeChanged={eachEntry => this.checkEachOTPInput(eachEntry)}
                                    />

Please help to get the same.

I have use this OTP screen.
When the screen load then the keyboard for OTP is showing.
then , if you press back button, then key board will hidden.. and not open again..
please fix this.

If the enetered otp is incorrect can't clear the the OTP Input View

Method to clear the input field

Describe the bug
I am using Kika keyboard for Xiaomi which is default keyboard for Redmi 6 Pro, and when I am pressing clear button on the keyboard the cursor is not moving back to the previous box.
I have tested a few other keyboards it seems fine but only for Kika keyboard your lib is not working.

To Reproduce
Steps to reproduce the behavior:
Use Kika keyboard for filling otp.

Screenshots
Check the video .
issue video.zip

Smartphone (please complete the following information):

• Device: [Redmi 6 pro]
• OS: [Android 9 (pie)]

Additional context
Add any other context about the problem here.

Hi
,i need to use it as for Password field how can I change it

Pin code have four numbers. I entered one or two numbers, got OTP and applied it (for example i entered 12 and got OTP = 9875 => result 9998 is incorrect).

To Reproduce
Steps to reproduce the behavior:

1. Pin code have four numbers.
2. enter one or two numbers (12)
3. apply OTP (for example 9876)
4. See error - result will be 9998

Smartphone (please complete the following information):

• Device: [iPhoneX Max]
• OS: [iOS13.4]
• Version [1.3.5"]

The OTPInput View not auto fill the input when SMS receive or new come.
Request SMS OTP Code from sendgrid, and receive SMS from sendgrid, but the input not autofill the form
It should auto fill the text input when SMS received from sendgrid

Tested on device:

• Device: [e.g. Xiaomi Mi 8 SE]
• OS: [e.g. Android 8]

Describe the bug
Clipboard has been extracted from react-native code module, use @react-native-community/clipboard for clipboard.

To Reproduce
Steps to reproduce the behavior:

1. Go to './dist/index.js'
2. Add module '@react-native-community/clipboard'
3. Change 'import { Clipboard } from "react-native"; to import Clipboard from "@react-native-community/clipboard";'

Not really sure what am I doing wrong. When the user enters code manually it works properly. But if I press on code from SM it is being put into the first cell.

• OS: iOS

Is your feature request related to a problem? Please describe.
codeInputFieldStyle should be of type StyleProp instead of just TextStyle. It will be more helpful for better theming support.

Automatic submission when copying code from sms.

onCodeFilled just works when i type the code

Describe the bug
componentWillReceiveProps is deprecating.

Screenshots

Describe the bug
autoFocusOnLoad (keyboard does not appear) does not work if the keyboard was active in the previous screen.

To Reproduce
Required environment: two screens.

1. On the first screen create input and button to navigate to the second screen.
2. On the second screen create

Steps to reproduce the behavior:

1. Click on the input, to show the keyboard.
2. Click on the button, to navigate to the second screen.

Expected behavior
After navigating to the second screen, the keyboard for OTPInputView should appear.

Smartphone (please complete the following information):

• Device: iPhone X
• OS: IOS 12.4

Additional context
If I don't have the keyboard open on the first screen, OTPInputView appears on the second screen.
It seems like this.focusField(focusIndex) called after some time would solve this issue.

Describe the bug
I am using version 1.3.5 and testing the app using Samsung Galaxy S8 and IPhone 11 Max, but for all the IOS devices I tested and it works fine whereAs for android it is not working. Keyboard doesn't comes up even after calling the function focusField().

To Reproduce
I am calling the functional component as:
<OTPInputView
autoFocusOnLoad={true}
codeInputFieldStyle={[
styles.codeInputField,
{
color: props.hasError ? theme.appRed : theme.appText,
borderColor: props.hasError ? theme.appRed : theme.appText,
},
]}
onCodeFilled={(code) => props.onFilled(code)}
pinCount={6}
ref={inputRef}
/>

Expected behavior
this should work same for both the devices but it doesn't open keyboard in android

Smartphone (please complete the following information):

• Samsung Galaxy S8
• Android 7.0 Nougat
• Version 1.3.5

Describe the bug
styles.js is exporting something that hasn't been defined

To Reproduce
Steps to reproduce the behavior:

1. Import component from library
2. Start application/load component that's importing the OTPInput

Expected behavior
N/A

Screenshots

Smartphone (please complete the following information):

• Device: Virtual/Simulated
• OS: os x 10.15.1
• Browser: Firefox
• Version: 73.0.1

Additional context
Using Expo 36.0.0 with some babel overrides:

/* eslint-disable @typescript-eslint/no-var-requires */
module.exports = function(api) {
  api.cache(true)
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ['babel-plugin-graphql-tag', { importName: 'graphql-tag-ts' }],
      '@babel/plugin-transform-modules-commonjs',
      [
        'babel-plugin-styled-components',
        {
          displayName: true
        }
      ]
    ],
    env: {
      production: {
        plugins: ['react-native-paper/babel']
      }
    }
  }
}

Describe the bug
Even with the code prop supplied, onCodeChanged is not firing, ever.

To Reproduce
Instantiate an OTPInputView as following :

    <OTPInputView
            style={OTPInputStyles.container}
            pinCount={6}
            autoFocusOnLoad
            codeInputFieldStyle={OTPInputStyles.underlineStyleBase}
            codeInputHighlightStyle={OTPInputStyles.underlineStyleHighLighted}
            code={otpCode}
            onCodeChanged={code => {
                 console.log(`Code changed : ${code}`);
                 setOTPCode(code);
            }}
            onCodeFilled={code => {
                console.log(`Code is ${code}`);
            }}
    />

where otpCode is an hook defined as const [otpCode, setOTPCode] = useState();

Input one or more digits, and you will notice that onCodeChanged is never fired (i.e., you won't see a single "Code changed:..." line in the console).

Expected behavior
onCodeChanged should fire every time the user input a digit

Smartphone (please complete the following information):

• Device: irrelevant
• OS: iOS 13.2.2

Thank you very much in advance for any insight !

onCodeFilled is not fired when copy code from message inbox in android.
Steps:
requested otp from app
got the otp
navigate to message inbox
copied code from inbox
back to app and automatically inputs filled with code
but onCodeFilled event is not fired.

const cellStyle = {
  width: 56,
  height: 56,
  borderWidth: 0,
  color: theme.colors.black,
  borderBottomWidth: 2,
  fontSize: 22,
  lineHeight: 24,
}

export const styleSheet = StyleSheet.create({
  cellBase: {
    ...cellStyle,
    borderBottomColor: theme.colors.black,
  },

  cellHighLighted: {
    backgroundColor: 'rgba(229, 0, 75, 0.05)',
    borderBottomColor: theme.colors.red,
  },

  cellError: {
    ...cellStyle,
    borderBottomColor: theme.colors.red,
  },
})

render () => {
  return (
      <OTPInputView
        pinCount={4}
        autoFocusOnLoad
        codeInputFieldStyle={error ? styleSheet.cellError : styleSheet.cellBase}
        codeInputHighlightStyle={styleSheet.cellHighLighted}
            onCodeChanged={setCode}
            code={code}
      />
  )
}

On the first run it produces

Describe the bug
To clear the inputs is not working. ClearInputs is not working

Code

isEmptyString = ()=>{
setCode("")
}
<OTPInputView
                            ref={updateRef}
                            autoFocusOnLoad
                            style={{ width: '100%', height: 100, }}
                            pinCount={6}
                            code={code}
                            codeInputFieldStyle={styles.underlineStyleBase}
                            codeInputHighlightStyle={styles.underlineStyleHighLighted}
                            onCodeFilled={(code => {
                                setCode(code)
                            })}
                        clearInputs={() => isEmptyString(code)}
                        />

Screenshots

Describe the bug
if im reset code to empty when otp in correct its still focus on last input instead of first input

Describe the bug
If We use 2 OTPInputView or more in the same screen, it will always focus into the second or the last OTPInputView.
I have use ref but nothing change.

This is my use effect, will focus into pinRef in component did mount

useEffect(() => {
    pinRef.focus
  }, [])

This is my form, with 2 component otp, the first one is pinRef and the second one is confirmPinRef

<View style={styles.containerPin}>
    <Text style={styles.textDescriptionGreyFont}>Set Pin (Required)</Text>
    <Pin
      ref={pinRef}
      testID={'inputPin'}
      autoFocusOnLoad={true}
      count={6}
      value={pin}
      setCode={(code) => setPinValue(code, 'pin')} />
    </View>
    <View style={styles.containerConfirmPin}>
       <Text style={styles.textDescriptionGreyFont}>Confirm Pin</Text>
       <Pin
          ref={confirmPinRef}
          testID={'inputConfirmPin'}
          autoFocusOnLoad={false}
          count={6}
          value={confirmPin}
          setCode={(code) => setPinValue(code, 'confirmPin')} />
</View>

this is my component OTPInputView

<View style={styles.container}>
    <OTPInputView
        ref={props.ref}
        style={[styles.subContainer, { width: props.count === 4 ? '70%' : '100%' }]}
        pinCount={props.count}
        code={props.value}
        onCodeChanged={code => props.setCode(code)}
        autoFocusOnLoad={props.autoFocusOnLoad}
        codeInputFieldStyle={styles.field}
        secureTextEntry={true}
      />
</View>

Expected behavior
A The first OTPInputView should focus every time open the screen

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Device: [e.g. Simulator Iphone Xr]

Not able to reduce the spacing between code entered and the blank.

When i used the library the spacing between the code entered and the blank is too much. So my query is how to reduce that gap.

To Reproduce
Just use the library in your code and the default spacing between the code entered and the blank is too much.

Expected behavior
It can be managed with the help of css

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Device: MI Max 2
• OS: Android 7.1.1

Additional context
I want to know how to manage the spacing between the filling blank and the code entered.

The OTP fields could use a placeholder prop. Since it is common for users to see a UI like the one below:

I will also submit a PR which will implement this Feature

Describe the bug
When I update the value in my component and pass the new value through code props, the inputs still show the previous values. (To clear the values when the inputed OTP is incorrect)

To Reproduce
Steps to reproduce the behavior:

1. Create a component with a code state
2. Pass code state to OTPInputView code prop
3. Update code state in created component
4. The inputs still shows the old values

Expected behavior
The inputs should update their values when code prop is updated

I want to store code value to the state;
then I will set that state to a variable which will be used for authentication.
[i want to use that code authenticate user]

please help me

When we set colour to input style, input text colour is not changing. Even selectionColor not working.

Checking in Android Emulator

Regards
vishnu

Describe the bug
I added clearInputs as true but it is not working properly.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Copied OTP codefrom message could not able to setState(code)

To Reproduce
Steps To produce:

1. Entered Contact no.
2. received OTP
3. Received OTP
4. on click Button Send OTP the OTP does not set in a state.

Expected behavior
On Send button I need OTP copied OTP on the state.

Smartphone (please complete the following information):
Android Devices

Code:

export default class Verification extends Component<Props> {
    constructor(props) {
        super(props)
        s = Strings()
        this.state = {
            loading: false,
            code : '',
        }
    }

render(){
<View>
  <OTPInputView
                                        style={{ width: '60%', height: 50, alignItems: 'center' }}
                                        pinCount={6}
                                        // code=""
                                  
                                        code={this.state.code} //You can supply this prop or not. The component will be used as a controlled / uncontrolled component respectively.
                                        onCodeChanged = {code => { this.setState({code},()=>alert(code))}}
                                        codeInputFieldStyle={styles.underlineStyleBase}
                                        codeInputHighlightStyle={styles.underlineStyleHighLighted}
                                        onCodeFilled={(code => {
                                            code => { this.setState({code})}
                                            alert('code Alert'+code)
                                            // alert(`Code is ${code}, you are good to go!`)
                                            // setTimeout(() => {
                                            //     // this.hitVerifyMobileApiCall(code);
                                            // }, 200);
                                        })}
                                    />
                                </View>
                            <View style={{ marginTop: (d.height*0.036), alignItems: 'center', }}>
                                <AppButton
                                    containerStyle={[styles.submit, { backgroundColor: c.cinnabar }]}
                                    textStyle={{fontSize: d.height < 600 ? 14 : 16, color: "white" }}
                                    value={s.send}
                                    onPress={()=>{
                                                 this.hitVerifyMobileApiCall(this.state.code);
                                       
                                    }}
                                    />
                            </View>
</View>
}

Describe the bug
Pressing backspace on actual device deletes more than 1 character.
Have tested with vanilla <OTPInputView /> with the same bug.
Android device is fine. Not able to replicate issue with iPhone 11 Pro Max simulator.
Upgraded to 13.4.1 with the same issue.

To Reproduce
Option 1. Run on iPhone 11 Pro Max with <OTPInputView /> with the same bug.

Option 2. Current code for ref. Should not be a problem if it works fine with Option 1:

const handleOnCodeChanged = otp => {
  if (otp.length <= 6) setOtp(otp);
  if (otp.length < 6) setCanVerify(false);
};

...
<StyledOTPInputView
  ref={otpInputRef}
  otp={otp}
  onCodeChanged={handleOnCodeChanged}
  onCodeFilled={handleOnCodeFilled}
/>

Run on device from Xcode.

Expected behavior
It should delete one character at a time.

Screenshots

This is what happens after deleting 1 character from the last input. 3 textboxes were cleared instead of 2.

Smartphone (please complete the following information):
iPhone 11 Pro Max
iOS: 13.3.1 and 13.4.1

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Code is
<OTPInputView
style={{width: '80%', height: 200}}
pinCount={6}
autoFocusOnLoad
codeInputFieldStyle={{
fontSize: 18,
width: 30,
height: 45,
borderWidth: 0,
borderBottomWidth: 1,
}}
codeInputHighlightStyle={{borderColor: "#03DAC6",}}
onCodeFilled = {(code) => this.verify(code)}
/>
i am using redmi node 6 pro and as per the solutions i found i changed version of library to 1.0.22
but keyboard is not shown on autoFocusOnLoad

I can't enter code on iphone X

`import React from "react";
import { StyleSheet, View, TouchableOpacity } from "react-native";
import {
Header,
Container,
Content,
Accordion,
Left,
Body,
Title,
Right,
Card,
CardItem,
Form,
Item,
Picker,
Icon,
Button,
Text,
Input,
Textarea
} from "native-base";
import axios from "axios";
// import Otp from "../components/Otp";
import Countdown from "react-countdown";
import OTPInputView from "@twotalltotems/react-native-otp-input";

class emailOtp extends React.Component {
constructor(props) {
super(props);
this.state = {
pageTitle: "Enter OTP ",
resendCode: "Resend Code",
countdownTimer: " ",
timerStop: " ",
countdown: 0, //TODO
email: "[email protected]",
pin_count: 6,
data: "",
showOtpPlaceholder: true,
content: true
};
}

componentDidMount() {
axios
.post(
"https://ixmhlhrubj.execute-api.ap-southeast-1.amazonaws.com/dev/sendmail",
{
email: this.state.email
}
)
.then(res => {
this.setState({
data: res.data.otp
});
})
.catch();
}

_getOTP = () => {};

resendTheOtp = () => {
axios
.post(
"https://ixmhlhrubj.execute-api.ap-southeast-1.amazonaws.com/dev/sendmail",
{
email: this.state.email
}
)
.then(res => {
alert("Your OTP has been resent");
this.setState({
data: res.data.otp
});
})
.catch();
};

// componentHideAndShow = () => {
// this.setState(previousState => ({ content: !previousState.content }));
// };

renderer = ({ seconds, completed }) => {
if (completed) {
// Render a completed state
// set a state to hide the input
// return this.props.navigation.navigate("Transfer");
return <Text style={{ color: "red" }}>Session Expired;
// return this.setState({
// showOtpPlaceholder: false
// });
} else {
// Render a countdown
return {seconds};
}
};

render() {
const countdown = ""; //TODO
const Completionist = () => alert("Session Expired"); // Session Expired;
const { navigate } = this.props.navigation;
const { pin_count } = this.state;
const { showOtpPlaceholder } = this.state;
// const renderer = ({ seconds, completed }) => {
// if (completed) {
// // Render a completed state
// // set a state to hide the input
// // return this.props.navigation.navigate("Transfer");
// // return <Text style={{ color: "red" }}>Session Expired;
// return this.setState({
// showOtpPlaceholder: false
// });
// } else {
// // Render a countdown
// return {seconds};
// }
// };

return (
  // <View style={styles.container}>
  <Container style={styles.container2}>
    {/* <Text style={{fontSize: 60}}>{this.state.pageTitle}</Text> */}
    <Header span style={styles.headerStyle}>
      <Left>
        <Button transparent>
          <Icon
            style={{ color: "white", marginLeft: 8 }}
            name="arrow-back"
          />
        </Button>
      </Left>
      <Title style={styles.headerTitleStyle}>
        {this.state.pageTitle}

        <Icon style={{ color: "white" }} name="lock" />
      </Title>
      <Right />
    </Header>
    {/* */}
    <Icon style={styles.userIconStyle} name="key" />
    <Text
      style={{
        fontSize: 28,
        marginHorizontal: 50,
        marginVertical: -25,
        marginLeft: 76
      }}
    >
      Verification Code
    </Text>
    <Text></Text>
    <Text
      style={{
        fontSize: 19,
        marginHorizontal: 30,
        marginVertical: 50
      }}
    >
      6 Digits OTP has been send to your email
    </Text>
    {/* */}
    {/* This section is for OTP Input */}
    <Content>
      {/* <Otp /> */}
      <OTPInputView
        style={{
          width: "80%",
          height: 200,
          alignItems: "center",
          justifyContent: "center"
        }}
        editable={this.state.isEditable}
        pinCount={pin_count}
        // code={this.state.code} //You can supply this prop or not. The component will be used as a controlled / uncontrolled component respectively.
        // onCodeChanged = {code => { this.setState({code})}}
        autoFocusOnLoad
        codeInputFieldStyle={styles.underlineStyleBase}
        codeInputHighlightStyle={styles.underlineStyleHighLighted}
        onCodeFilled={code => {
          console.log(`Your OTP Pin is ${code}, you are good to go!`);
          if (code !== this.state.data) {
            alert("Invalid Input");
            // this.setState({
            //   showOtpPlaceholder: false
            // })
            // this.props.navigation.navigate("Transfer");
            {
              /*TODO */
            }
          } else {
            alert("You are good to go");
            // this.props.navigation.push("TransferConfirm");
          }
          // alert("You are running out of time");
          // this.props.navigation.push("TransferConfirm");
        }}
        clearInputs
      />

      {/* <Button onPress={this._clickHandler.bind(this)}>
        <Text>{this.state.buttonLabel}</Text>
      </Button> */}

      <Text style={styles.timingStyle}>
        Time Remaining: {/* </Text>
        <Text> */}
        <Countdown
          date={Date.now() + 15000}
          renderer={this.renderer}
        />{" "}
        {/*seconds*/}
      </Text>
      {/* <Text>left</Text> */}

      <Text style={styles.resendCodeStyle}>Didn't receive the OTP?</Text>
      {/* <Button transparent> </Button> */}
      <TouchableOpacity
        style={{ marginHorizontal: 55, marginVertical: 15 }}
        onPress={this.resendTheOtp}
      >
        <View>
          <Text
            style={{
              fontSize: 17,
              fontWeight: "bold"
            }}
          >
            {" "}
            <Text></Text>
            <Text>Resend Code</Text>{" "}
            {/* Remember to put onPress here 👆 on TouchableOpacity for redirecting back */}
          </Text>
        </View>
      </TouchableOpacity>
      {/* </Text> */}
    </Content>

    {/* */}
  </Container>
  // </View>
);

}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center"
},
container2: {
backgroundColor: "#f7f7f7"
},
headerText: {
fontSize: 20,
textAlign: "center",
margin: 10,
fontWeight: "bold"
},
headerStyle: {
height: 100,
backgroundColor: "#c13b3e"
},
headerTitleStyle: {
height: 40,
alignItems: "center",
justifyContent: "center",
fontSize: 25,
flexWrap: "wrap",
color: "#fff",
marginVertical: 20,
fontWeight: "normal"
},
userIconStyle: {
color: "grey",
fontSize: 120,
marginHorizontal: 160,
width: 120,
marginVertical: 40
},
timingStyle: {
marginVertical: -120,
marginHorizontal: 55,
marginBottom: 50
},
resendCodeStyle: {
marginVertical: 10,
marginHorizontal: 55,
fontSize: 17
},
borderStyleBase: {
width: 30,
height: 45
},

borderStyleHighLighted: {
borderColor: "#03DAC6"
},

underlineStyleBase: {
width: 40,
height: 30,
borderWidth: 0,
borderBottomWidth: 4,
borderColor: "lightgrey",
alignItems: "center",
justifyContent: "center",
marginLeft: 24,
marginTop: -95,
fontSize: 25
},

underlineStyleHighLighted: {
borderColor: "#03DAC6"
},
theButtonSize: {
width: 200,
marginTop: 40,
alignItems: "center",
justifyContent: "center"
}
});

export default emailOtp;
`

Describe the bug
I got OTP for mobile verification but SMS notification does not show copy OTP.
would you like to tell me that is there any need of extra setting or what I have to do for that?

To Reproduce
Steps to reproduce the behavior:

1. Go to mobile verification
2. Click on verification
3. got OTP SMS with code
4. not show copy code on notification.

Device
android S7

here is my code
<OTPInputView style={{ width: '80%', height: 100 }} pinCount={4} autoFocusOnLoad codeInputFieldStyle={styles.underlineStyleBase} codeInputHighlightStyle={styles.underlineStyleHighLighted} onCodeFilled={(code => mobileVerificationSendCode(code))} />

code={this.state.code}
trying to preset code with setState but UI doesn't get updated, but code itself is returned correctly after keyboard is activated on any of fields

I use a controlled approach, so I store code in state and reset it in case of a verification error.

  const [code, setCode] = useState('') 
  const codeInputRef = useRef(null)

const onFulfill = (code) => {
  setCode('')
  codeInputRef.current.focusField(0)
}

render () {
  return (
      <OTPInputView
        ref={innerRef}
        autoFocusOnLoad
        onCodeFilled={onFulfill}
            onCodeChanged={setCode}
            code={code}
            innerRef={codeInputRef}
      />
  )
}

This seems to be working in the simulator, unfortunately it doesn't work on a real device.
Tested on iPhone 11 Pro

Is your feature request related to a problem? Please describe.
My Sms language is Turkish and sms is like:

Mobile uygulama aktivasyonu icin dogrulama kodunuz: 12345 B001

It's working on ios but it isn't on android.
When i use sms like "Code : 12345" it work on android. But i want to use it before i said.

Describe the solution you'd like
We can change code text with some specific text.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Is your feature request related to a problem? Please describe.
Based on the documentation tttstudios/react-native-otp-input on Parameters section. There is not prop for testID. So how to test react native otp input?

Describe the solution you'd like
Can you give me an example to test react native otp input?

Describe alternatives you've considered
Please let me know, if there is a posibility to test react native otp input component

Is your feature request related to a problem? Please describe.
Describe the solution you'd like

This is my screen. I would like to set returnKeyType to the keyboard:
returnKeyType='done'

So the user can set ok, hide the keyboard and be able to see the button below the input

I have the following code:

<OTPInputView
    style={{width: '100%', height: 200}}
    pinCount={4}
    code={this.state.pinNumber} //You can supply this prop or not. The component will be used as a controlled / uncontrolled component respectively.
    onCodeChanged = {pinNumber => { this.setState({pinNumber})}}
    autoFocusOnLoad
    codeInputFieldStyle={styles.underlineStyleBase}
    codeInputHighlightStyle={styles.underlineStyleHighLighted}
    onCodeFilled = {(pinNumber => {
        console.log(`pinNumber is ${pinNumber}, you are good to go!`)
        this.submitPinNumber();
    })}
/>

The input field appears and the onCodeFilled works. But, the keyboard isn't detecting the number from the text. A user still has to type it in manually. The message in sms is: "Hello there! Here is your pin: 8888". How do I get the keyboard on ios to detect the message? I am using ios 13.1 and react-native 0.61.5.

I am using OTPInputView for ios.

            <OTPInputView
                    style={{width: '80%', height: 200}}
                    pinCount={6}
                    codeInputFieldStyle={{
                        fontSize: 18,
                        width: 30,
                        height: 45,
                        borderWidth: 0,
                        borderBottomWidth: 1,
                    }}
                    codeInputHighlightStyle={{borderColor: "#03DAC6",}}
                    onCodeFilled = {(code) => this.verify(code)}
                />

When i click on keyboard clipboard to read otp, whole value is filled in first input field and only last two numbers are shown in the input field.
After some time it spread to whole 6 input fields.

This was working fine on iOS although.
After clicking on the OTP field, the field had blue/green border around it to show that it was active but the keyboard didn't show up.

I had to replace the _focusField function to make it work on android.

`
_focusField = index => {
this.fields[index].blur();

setTimeout(() => {
  this.fields[index].focus();
}, 100);

this.setState({
  selectedIndex: index
});

};
`

Also, textContentType= oneTimeCode is only for iOS 12+ and causes warning in other devices.

onCodeFilled works only when the UI is filled. I use this function store the code in state. If I delete the code and check the value the code is still present in the state which is not how it is supposed to work as it violates validation. There has to be another function which is triggered when the code is delete one-by-one or the current onCodeFilled has to trigger for every single input instead of it's current working.

Thanks.

Describe the bug
I have given the pinCount={4} to the react-native-otp-input component. If a user types the input slowly, then it works fine. but if the user types/enter the OTP very fast, it allows the user to enter the OTP more than the given pinCount.

As I have given the pinCount={4}, I am able to type more than 4 digits.

To Reproduce
Steps to reproduce the behavior:

1. Enter the OTP very fast
2. More than the given pinCount OTP digits will be returned from the onCodeFilled function

Expected behavior
User will not be able to enter the OTP code more than the given pinCount

Screenshots
//debugger output with slow and fast typing
https://prnt.sc/q8sxqd

//entered code
https://prnt.sc/q8sxeq

Smartphone (please complete the following information):

• Device: Google Pixel 2
• OS: Android Oreo
• react-native-otp-input: 1.1.2

Describe the bug
Second last otp autofill on unlocking the screen in android devices.

To Reproduce
Steps to reproduce the behavior:

1. Go to otp screen,
2. Lock the screen,
3. Unlock the screen.
4. Second last otp from messages filled.

Expected behavior
Latest otp should be auto fill.

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Device: [e.g. One plus5t]
• OS: [e.g. android 9]

Additional context
Add any other context about the problem here.