Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Typescript definition file #57

Open
tiagobnobrega opened this issue Apr 3, 2020 · 2 comments
Open

Typescript definition file #57

tiagobnobrega opened this issue Apr 3, 2020 · 2 comments

Comments

@tiagobnobrega
Copy link

tiagobnobrega commented Apr 3, 2020

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

@harshitsinghai77
Copy link

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

@retyui
Copy link

retyui commented Apr 28, 2020

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants