react-native-smooth-pincode-input icon indicating copy to clipboard operation
react-native-smooth-pincode-input copied to clipboard

Typescript definition file

Open tiagobnobrega opened this issue 5 years ago • 2 comments

I'm using typescript in my project. So I decided to share my type definition file for anyone interested:

//types.d.ts
declare module 'react-native-smooth-pincode-input'{
  import { ReactElement, Component } from 'react';
  import { StyleProp, ViewStyle,TextStyle,TextInputProps } from 'react-native';
  type SmoothPinCodeInputProps = {
    value?: string;
    codeLength?: number;
    cellSize?: number;
    cellSpacing?: number;
    placeholder?: string | ReactElement;
    mask?: string | ReactElement;
    maskDelay?: number;
    password?: boolean;
    autoFocus?: boolean;
    restrictToNumbers?: boolean;
    containerStyle?: StyleProp<ViewStyle>;
    cellStyle?: StyleProp<ViewStyle>;
    cellStyleFocused?: StyleProp<ViewStyle>;
    cellStyleFilled?: StyleProp<ViewStyle>;
    textStyle?: StyleProp<TextStyle>;
    textStyleFocused?: StyleProp<TextStyle>;
    animated?: boolean;
    animationFocused?: string | any;
    onFulfill?: (value:string)=>void;
    onChangeText?: TextInputProps['onChangeText'];
    onBackspace?: ()=>void;
    onTextChange?: TextInputProps['onChangeText'];
    testID?: any;
    onFocus?: TextInputProps['onFocus'],
    onBlur?: TextInputProps['onBlur'],
    keyboardType?: string;
    editable?: boolean;
    inputProps?: TextInputProps;
    }

  type SmoothInputSate = {
      maskDelay: boolean,
      focused: boolean,
    }

  export default class SmoothPinCodeInput extends Component<SmoothPinCodeInputProps, SmoothInputSate> {}
}
}

EDITED: Forgot to set props as optional

tiagobnobrega avatar Apr 03 '20 13:04 tiagobnobrega

Thanks a lot made. It really helped. It's people like you who make it easier for other developers. Thanks again.

harshitsinghai77 avatar Apr 03 '20 14:04 harshitsinghai77

@harshitsinghai77 @tiagobnobrega

Thanks for typings and you can also use better implementation with TS by default: https://github.com/retyui/react-native-confirmation-code-field

react-native-confirmation-code-field animated example react-native-confirmation-code-field mask example react-native-confirmation-code-field underline example react-native-confirmation-code-field basic example

retyui avatar Apr 28 '20 14:04 retyui