chore: update example code to include copy paste demo

naveenvignesh5 · Jul 30, 2023 · d762422 · d762422
1 parent 1bbcc64
commit d762422
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 10 deletions.
diff --git a/Example/App.tsx b/Example/App.tsx
@@ -11,6 +11,7 @@ import {
 } from 'react-native';
 
 import OTPTextView from 'react-native-otp-textinput';
+import Clipboard from '@react-native-clipboard/clipboard';
 
 const styles = StyleSheet.create({
   safeAreaView: {
@@ -73,13 +74,23 @@ const App: React.FC = () => {
 
   const showTextAlert = () => otpInput && Alert.alert(otpInput);
 
+  const handleCellTextChange = async (text: string, i: number) => {
+    if (i === 0) {
+      const clippedText = await Clipboard.getString();
+      if (clippedText.slice(0, 1) === text) {
+        input.current?.setValue(clippedText, true);
+      }
+    }
+  };
+
   return (
     <SafeAreaView style={styles.safeAreaView}>
       <ScrollView contentContainerStyle={styles.container}>
         <OTPTextView
           ref={input}
           containerStyle={styles.textInputContainer}
           handleTextChange={setOtpInput}
+          handleCellTextChange={handleCellTextChange}
           inputCount={4}
           keyboardType="numeric"
         />
@@ -116,7 +127,6 @@ const App: React.FC = () => {
         <OTPTextView
           handleTextChange={() => { }}
           containerStyle={styles.textInputContainer}
-          // textInputStyle={[styles.roundedTextInput, { borderRadius: 100 }]}
           tintColor="#000"
         />
         <TextInput />
@@ -133,7 +143,7 @@ const App: React.FC = () => {
         />
       </ScrollView>
     </SafeAreaView>
-  )
-}
+  );
+};
 
 export default App;
diff --git a/Example/ios/Podfile.lock b/Example/ios/Podfile.lock
@@ -484,6 +484,8 @@ PODS:
     - React-jsi (= 0.72.1)
     - React-logger (= 0.72.1)
     - React-perflogger (= 0.72.1)
+  - RNCClipboard (1.11.2):
+    - React-Core
   - SocketRocket (0.6.1)
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
@@ -552,6 +554,7 @@ DEPENDENCIES:
   - React-runtimescheduler (from `../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler`)
   - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -649,6 +652,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/react/utils"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNCClipboard:
+    :path: "../node_modules/@react-native-clipboard/clipboard"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -703,6 +708,7 @@ SPEC CHECKSUMS:
   React-runtimescheduler: 67707a955b9ecc628cc38bdc721fbc498910f0fd
   React-utils: 0a70ea97d4e2749f336b450c082905be1d389435
   ReactCommon: e593d19c9e271a6da4d0bd7f13b28cfeae5d164b
+  RNCClipboard: 3f0451a8100393908bea5c5c5b16f96d45f30bfc
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   Yoga: 65286bb6a07edce5e4fe8c90774da977ae8fc009
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

diff --git a/Example/package.json b/Example/package.json
@@ -10,9 +10,10 @@
     "test": "jest"
   },
   "dependencies": {
+    "@react-native-clipboard/clipboard": "^1.11.2",
     "react": "18.2.0",
     "react-native": "0.72.1",
-    "react-native-otp-textinput": "naveenvignesh5/react-native-otp-textinput#typescript"
+    "react-native-otp-textinput": "naveenvignesh5/react-native-otp-textinput"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

diff --git a/Example/tsconfig.json b/Example/tsconfig.json
@@ -1,3 +1,6 @@
 {
+  "compilerOptions": {
+    "jsx": "react-native"
+  },
   "extends": "@tsconfig/react-native/tsconfig.json"
 }
diff --git a/Example/yarn.lock b/Example/yarn.lock
@@ -1539,6 +1539,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@react-native-clipboard/clipboard@^1.11.2":
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/@react-native-clipboard/clipboard/-/clipboard-1.11.2.tgz#e826d0336b34e67294aaffa6878308900bc7d197"
+  integrity sha512-bHyZVW62TuleiZsXNHS1Pv16fWc0fh8O9WvBzl4h2fykqZRW9a+Pv/RGTH56E3X2PqzHP38K5go8zmCZUoIsoQ==
+
 "@react-native-community/cli-clean@11.3.3":
   version "11.3.3"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-clean/-/cli-clean-11.3.3.tgz#e3b2d5a374f1b35d158087c3be196b59e1757262"
@@ -5623,9 +5628,9 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-native-otp-textinput@naveenvignesh5/react-native-otp-textinput#typescript:
-  version "1.0.1"
-  resolved "https://codeload.github.com/naveenvignesh5/react-native-otp-textinput/tar.gz/252c649c4f50b8cb9b33fc5cd9ff3abaffa62869"
+react-native-otp-textinput@naveenvignesh5/react-native-otp-textinput:
+  version "1.1.0"
+  resolved "https://codeload.github.com/naveenvignesh5/react-native-otp-textinput/tar.gz/56cdf95500b077e7080db4b7b6cad5b60a61d36c"
   dependencies:
     react "^16.8.6"
 
@@ -5921,9 +5926,9 @@ scheduler@^0.23.0:
     loose-envify "^1.1.0"
 
 semver@^5.6.0:
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
-  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+  version "5.7.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
+  integrity "sha1-SNVdtzfDKHzUg14X+hP+rOHEHvg= sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g=="
 
 semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   version "6.3.0"