diff --git a/README.md b/README.md index b058b40..adad82e 100644 --- a/README.md +++ b/README.md @@ -15,12 +15,17 @@ Supported version: `react-native >= 0.59.0` -### Expo is currently not supported as `Clipboard` is not included in Expo SDK - +~~### Expo is currently not supported as `Clipboard` is not included in Expo SDK~~ +bare react native: ```bash $ yarn add react-native-otp-inputs @react-native-clipboard/clipboard ``` +expo: +```bash +$ yarn add react-native-otp-inputs expo-clipboard +``` + ### After installation run: ```bash @@ -64,11 +69,23 @@ import React, { Component } from 'react'; import { View } from 'react-native'; import OtpInputs from 'react-native-otp-inputs'; +// expo +import * as ExpoClipboard from 'expo-clipboard'; +const Clipboard = { + setString: ExpoClipboard.setStringAsync, + getString: ExpoClipboard.getStringAsync +} + +// react-native +import Clipboard from '@react-native-clipboard/clipboard' + + export default class App extends Component { render() { return ( console.log(code)} numberOfInputs={6} /> diff --git a/package.json b/package.json index 69b973a..331929d 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,6 @@ "typescript": "4.7.4" }, "peerDependencies": { - "@react-native-clipboard/clipboard": "*", "react": "*", "react-native": "*" }, diff --git a/src/index.tsx b/src/index.tsx index 7fd9e45..7f4bf52 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,3 @@ -import Clipboard from '@react-native-clipboard/clipboard'; import React, { forwardRef, RefObject, @@ -30,6 +29,11 @@ import { OtpInputsRef, SupportedKeyboardType } from './types'; const supportAutofillFromClipboard = Platform.OS === 'android' || parseInt(Platform.Version as string, 10) < 14; +type ClipboardType = { + setString(string: string): void; + getString(): Promise; +} + type Props = TextInputProps & { autofillFromClipboard: boolean; autofillListenerIntervalMS?: number; @@ -43,6 +47,7 @@ type Props = TextInputProps & { isRTL?: boolean; numberOfInputs: number; testIDPrefix?: string; + Clipboard: ClipboardType; }; const styles = StyleSheet.create({ @@ -75,6 +80,7 @@ const OtpInputs = forwardRef( selectTextOnFocus = true, style, testIDPrefix = 'otpInput', + Clipboard, ...restProps }, ref,