onChangeCode callback and defaultCode props added. Readme updated.

README.md

@@ -90,8 +90,10 @@ Prop       | Type    | Default    | Description
 `inactiveColor`     | string   | `rgba(255, 255, 255, 0.2)` | color of cells when inactive
 `ignoreCase`        | boolean  | `false`      | ignore case when checking code
 `autoFocus`         | boolean  | `true`       | auto focus on code input
+`defaultCode`       | string   |              | initial value for code inputs. Set `autoFocus` to `false` when using `defaultCode`
 `codeInputStyle`    | style object   |        | custom style for code input
 `containerStyle`    | style object   |        | custom style for code input container
+`onChangeCode`      | function |              | callback function called when any of the input value is changed. Always returns last `(code)` in callback.
 `onFulfill`         | function |              | callback function called when fulfilling code. If `compareWithCode` is null -> return `(code)` in callback, else return `(isValid, code)`. **Required**
 
 ## functions

components/ConfirmationCodeInput.js

@@ -1,8 +1,11 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import { View, TextInput, StyleSheet, Dimensions } from 'react-native';
+import { View, TextInput, StyleSheet, Dimensions, ViewPropTypes } from 'react-native';
 import _ from 'lodash';
 
+// if ViewPropTypes is not defined fall back to View.propType (to support RN < 0.44)
+const viewPropTypes = ViewPropTypes || View.propTypes;
+
 export default class ConfirmationCodeInput extends Component {
   static propTypes = {
     codeLength: PropTypes.number,
@@ -17,8 +20,10 @@ export default class ConfirmationCodeInput extends Component {
     ignoreCase: PropTypes.bool,
     autoFocus: PropTypes.bool,
     codeInputStyle: TextInput.propTypes.style,
-    containerStyle: View.propTypes.style,
+    containerStyle: viewPropTypes.style,
     onFulfill: PropTypes.func,
+    onChangeCode: PropTypes.func,
+    defaultCode: PropTypes.string,
   };
 
   static defaultProps = {
@@ -32,7 +37,8 @@ export default class ConfirmationCodeInput extends Component {
     inactiveColor: 'rgba(255, 255, 255, 0.2)',
     space: 8,
     compareWithCode: '',
-    ignoreCase: false
+    ignoreCase: false,
+    defaultCode: '',
   };
 
   constructor(props) {
@@ -47,14 +53,23 @@ export default class ConfirmationCodeInput extends Component {
   }
 
   componentDidMount() {
-    const { compareWithCode, codeLength, inputPosition } = this.props;
+    const { compareWithCode, codeLength, inputPosition, defaultCode } = this.props;
     if (compareWithCode && compareWithCode.length !== codeLength) {
       console.error("Invalid props: compareWith length is not equal to codeLength");
     }
 
     if (_.indexOf(['center', 'left', 'right', 'full-width'], inputPosition) === -1) {
       console.error('Invalid input position. Must be in: center, left, right, full');
     }
+
+    if (defaultCode && defaultCode.length !== codeLength) {
+      console.error("Invalid props: defaultCode length is not equal to codeLength");
+    }
+    else {
+      this.setState({
+        codeArr: _.split(defaultCode, '')
+      });
+    }
   }
 
   clear() {
@@ -74,6 +89,8 @@ export default class ConfirmationCodeInput extends Component {
   }
 
   _onFocus(index) {
+    const { onChangeCode } = this.props;
+
     let newCodeArr = _.clone(this.state.codeArr);
     const currentEmptyIndex = _.findIndex(newCodeArr, c => !c);
     if (currentEmptyIndex !== -1 && currentEmptyIndex < index) {
@@ -84,6 +101,10 @@ export default class ConfirmationCodeInput extends Component {
         newCodeArr[i] = '';
       }
     }
+
+    if (onChangeCode) {
+      onChangeCode(newCodeArr.join(''));
+    }
 
     this.setState({
       codeArr: newCodeArr,
@@ -199,7 +220,7 @@ export default class ConfirmationCodeInput extends Component {
   }
 
   _onInputCode(character, index) {
-    const { codeLength, onFulfill, compareWithCode, ignoreCase } = this.props;
+    const { codeLength, onFulfill, compareWithCode, ignoreCase, onChangeCode } = this.props;
     let newCodeArr = _.clone(this.state.codeArr);
     newCodeArr[index] = character;
 
@@ -214,6 +235,11 @@ export default class ConfirmationCodeInput extends Component {
         onFulfill(code);
       }
       this._blur(this.state.currentIndex);
+
+      if (onChangeCode) {
+        onChangeCode(code);
+      }
+
     } else {
       this._setFocus(this.state.currentIndex + 1);
     }
@@ -290,4 +316,4 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     padding: 0
   }
-});
+});

index.d.ts

@@ -17,9 +17,11 @@ declare module "react-native-confirmation-code-input" {
         activeColor?: string;
         inactiveColor?: string;
         ignoreCase?: boolean;
-        codeInputStyle?: any,
+        codeInputStyle?: any;
         containerStyle?: any;
         onFulfill: Function;
+        onChangeCode?: Function;
+        defaultCode?: string;
     }
 
     export default class CodeInput extends React.Component<CodeInputProps, any> { }