Feature: Able to copy paste to code input and responsive code input form based on width with flex

.npmignore

@@ -1,3 +1,4 @@
 .idea
 .npmignore
-example
+example
+node_modules/

README.md

@@ -21,14 +21,14 @@ A react-native confirmation code input for both IOS and Android
 ## Installation
 
 ```sh
-npm install react-native-confirmation-code-input --save
+yarn add @andreferi/react-native-confirmation-code-input --save
 ```
 
 ## Usage
 ### Basic
 Import this module:  
 ```javascript
-import CodeInput from 'react-native-confirmation-code-input';
+import CodeInput from '@andreferi/react-native-confirmation-code-input';
 ```
 Use as a component and style it:  
 ```javascript

components/ConfirmationCodeInput.js

@@ -1,6 +1,6 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { View, TextInput, StyleSheet, Dimensions, ViewPropTypes } from 'react-native';
+import { View, TextInput, StyleSheet, ViewPropTypes, Clipboard } from 'react-native';
 import _ from 'lodash';
 
 // if ViewPropTypes is not defined fall back to View.propType (to support RN < 0.44)
@@ -22,9 +22,8 @@ export default class ConfirmationCodeInput extends Component {
     codeInputStyle: TextInput.propTypes.style,
     containerStyle: viewPropTypes.style,
     onFulfill: PropTypes.func,
-    onCodeChange: PropTypes.func,
   };
-  
+
   static defaultProps = {
     codeLength: 5,
     inputPosition: 'center',
@@ -36,47 +35,48 @@ export default class ConfirmationCodeInput extends Component {
     inactiveColor: 'rgba(255, 255, 255, 0.2)',
     space: 8,
     compareWithCode: '',
-    ignoreCase: false,
+    ignoreCase: false
   };
-  
+
   constructor(props) {
     super(props);
-    
+
     this.state = {
       codeArr: new Array(this.props.codeLength).fill(''),
-      currentIndex: 0
+      currentIndex: 0,
+      isPasted: false
     };
-    
+
     this.codeInputRefs = [];
   }
-  
+
   componentDidMount() {
     const { compareWithCode, codeLength, inputPosition } = 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');
     }
   }
-  
+
   clear() {
     this.setState({
       codeArr: new Array(this.props.codeLength).fill(''),
       currentIndex: 0
     });
     this._setFocus(0);
   }
-  
+
   _setFocus(index) {
     this.codeInputRefs[index].focus();
   }
-  
+
   _blur(index) {
     this.codeInputRefs[index].blur();
   }
-  
+
   _onFocus(index) {
     let newCodeArr = _.clone(this.state.codeArr);
     const currentEmptyIndex = _.findIndex(newCodeArr, c => !c);
@@ -88,20 +88,20 @@ export default class ConfirmationCodeInput extends Component {
         newCodeArr[i] = '';
       }
     }
-    
+
     this.setState({
       codeArr: newCodeArr,
       currentIndex: index
     })
   }
-  
+
   _isMatchingCode(code, compareWithCode, ignoreCase = false) {
     if (ignoreCase) {
       return code.toLowerCase() == compareWithCode.toLowerCase();
     }
     return code == compareWithCode;
   }
-  
+
   _getContainerStyle(size, position) {
     switch (position) {
       case 'left':
@@ -126,7 +126,7 @@ export default class ConfirmationCodeInput extends Component {
         }
     }
   }
-  
+
   _getInputSpaceStyle(space) {
     const { inputPosition } = this.props;
     switch (inputPosition) {
@@ -136,8 +136,8 @@ export default class ConfirmationCodeInput extends Component {
         };
       case 'center':
         return {
-          marginRight: space/2,
-          marginLeft: space/2
+          marginRight: space / 2,
+          marginLeft: space / 2
         };
       case 'right':
         return {
@@ -150,14 +150,14 @@ export default class ConfirmationCodeInput extends Component {
         };
     }
   }
-  
+
   _getClassStyle(className, active) {
     const { cellBorderWidth, activeColor, inactiveColor, space } = this.props;
     let classStyle = {
       ...this._getInputSpaceStyle(space),
       color: activeColor
     };
-    
+
     switch (className) {
       case 'clear':
         return _.merge(classStyle, { borderWidth: 0 });
@@ -193,50 +193,73 @@ export default class ConfirmationCodeInput extends Component {
         return className;
     }
   }
-  
+
   _onKeyPress(e) {
     if (e.nativeEvent.key === 'Backspace') {
       const { currentIndex } = this.state;
-      let newCodeArr = _.clone(this.state.codeArr);
       const nextIndex = currentIndex > 0 ? currentIndex - 1 : 0;
-      for (const i in newCodeArr) {
-        if (i >= nextIndex) {
-          newCodeArr[i] = '';
-        }
-      }
-      this.props.onCodeChange(newCodeArr.join(''))
       this._setFocus(nextIndex);
     }
   }
-
-  _onInputCode(character, index) {
-    const { codeLength, onFulfill, compareWithCode, ignoreCase, onCodeChange } = this.props;
+
+  async _onInputCode(character, index) {
+    var copiedContent = await Clipboard.getString();
+    let pastedArr = copiedContent.split('')
     let newCodeArr = _.clone(this.state.codeArr);
-    newCodeArr[index] = character;
-
-    if (index == codeLength - 1) {
-      const code = newCodeArr.join('');
-
-      if (compareWithCode) {
-        const isMatching = this._isMatchingCode(code, compareWithCode, ignoreCase);
-        onFulfill(isMatching, code);
-        !isMatching && this.clear();
+    let isPasted = newCodeArr.includes(pastedArr[0])
+    const { codeLength, onFulfill, compareWithCode, ignoreCase } = this.props;
+    if (!isPasted && index == 0 && character.length > 1) {
+      for (let i in pastedArr) {
+        newCodeArr[i] = pastedArr[i]
+      }
+
+      if (copiedContent.length == codeLength) {
+        const code = newCodeArr.join('');
+
+        if (compareWithCode) {
+          const isMatching = this._isMatchingCode(code, compareWithCode, ignoreCase);
+          onFulfill(isMatching, code);
+          !isMatching && this.clear();
+        } else {
+          onFulfill(code);
+        }
+        this._blur(this.state.currentIndex);
       } else {
-        onFulfill(code);
+        this._setFocus(pastedArr.length)
       }
-      this._blur(this.state.currentIndex);
+
+      this.setState({
+        codeArr: newCodeArr,
+        currentIndex: pastedArr.length,
+        isPasted: true
+      })
     } else {
-      this._setFocus(this.state.currentIndex + 1);
-    }
-
-    this.setState(prevState => {
-      return {
+      const i = this.state.currentIndex
+      newCodeArr[i] = character
+
+      if (i == codeLength - 1) {
+        const code = newCodeArr.join('');
+
+        if (compareWithCode) {
+          const isMatching = this._isMatchingCode(code, compareWithCode, ignoreCase);
+          onFulfill(isMatching, code);
+          !isMatching && this.clear();
+        } else {
+          onFulfill(code);
+        }
+        this._blur(i);
+      } else {
+        this._setFocus(i + 1)
+      }
+
+      this.setState(prevState => ({
         codeArr: newCodeArr,
-        currentIndex: prevState.currentIndex + 1
-      };
-    }, () => { onCodeChange(newCodeArr.join('')) });
+        currentIndex: prevState.currentIndex + 1,
+        isPasted: true
+      }))
+    }
   }
-  
+
   render() {
     const {
       codeLength,
@@ -245,15 +268,13 @@ export default class ConfirmationCodeInput extends Component {
       inputPosition,
       autoFocus,
       className,
-      size,
-      activeColor
-    } = this.props;
-
+      size    } = this.props;
+
     const initialCodeInputStyle = {
       width: size,
       height: size
     };
-    
+
     let codeInputs = [];
     for (let i = 0; i < codeLength; i++) {
       const id = i;
@@ -262,26 +283,28 @@ export default class ConfirmationCodeInput extends Component {
           key={id}
           ref={ref => (this.codeInputRefs[id] = ref)}
           style={[
-            styles.codeInput, 
-            initialCodeInputStyle, 
+            styles.codeInput,
+            initialCodeInputStyle,
             this._getClassStyle(className, this.state.currentIndex == id),
-            codeInputStyle
+            codeInputStyle,
+            (className == 'border-circle' && this.state.codeArr[id]) && {
+              backgroundColor: '#e5e5e5'
+            }
           ]}
           underlineColorAndroid="transparent"
-          selectionColor={activeColor}
+          selectionColor={'white'}
           keyboardType={'name-phone-pad'}
           returnKeyType={'done'}
           {...this.props}
           autoFocus={autoFocus && id == 0}
           onFocus={() => this._onFocus(id)}
-          value={this.state.codeArr[id] ? this.state.codeArr[id].toString() : ''}
+          value={this.state.codeArr[id] && className !== 'border-circle' ? this.state.codeArr[id].toString() : ''}
           onChangeText={text => this._onInputCode(text, id)}
           onKeyPress={(e) => this._onKeyPress(e)}
-          maxLength={1}
         />
       )
     }
-    
+
     return (
       <View style={[styles.container, this._getContainerStyle(size, inputPosition), containerStyle]}>
         {codeInputs}

index.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as ReactNative from "react-native";
 
-declare module "react-native-confirmation-code-input" {
+declare module "@andreferi/react-native-confirmation-code-input" {
 
     type InputPositions = 'left' | 'right' | 'center' | 'full-width';
     type ClassNames = 'border-box' | 'border-circle' | 'border-b' | 'border-b-t' | 'border-l-r';