TextArea/index.d.ts references removed `autoCompleteType` prop

[srmagura]

Description

The TypeScript definitions for TextArea still reference the autoCompleteType prop which was removed from React Native recently.

CodeSandbox/Snack link

N/A

Steps to reproduce

1. Install native-base 3.4.1 into any project.
2. Look at node_modules/native-base/lib/typescript/components/primitives/TextArea/index.d.ts.

Expected behavior: The .d.ts file does not contain any reference to autoCompleteType, which was removed from React Native in this commit, which was published as part of react-native 0.68.1.

Actual behavior: The .d.ts file references autoCompleteType. This is causing a TypeScript error in my project.

NativeBase Version

3.4.1

Platform

• [ ] Android
• [ ] CRA
• [ ] Expo
• [ ] iOS
• [ ] Next

Other Platform

TypeScript issue which applies to all platforms

Additional Information

Here is a prettified version of the .d.ts file for your convenience

```ts import React from "react"; import type { InterfaceInputProps } from "../Input/types"; import type { PlatformProps } from "../../../components/types"; export interface ITextAreaProps extends Omit< InterfaceInputProps, "_web" | "_android" | "_ios" | "_light" | "_dark" | "_important" >, PlatformProps { /** * Maps to react-native TextInput's numberOfLines. */ totalLines?: number; } declare const _default: React.MemoExoticComponent< React.ForwardRefExoticComponent< Pick< ITextAreaProps, | "value" | "p" | "style" | "margin" | "m" | "marginTop" | "mt" | "marginRight" | "mr" | "marginBottom" | "mb" | "marginLeft" | "ml" | "marginX" | "mx" | "marginY" | "my" | "padding" | "paddingTop" | "pt" | "paddingRight" | "pr" | "paddingBottom" | "pb" | "paddingLeft" | "pl" | "paddingX" | "px" | "paddingY" | "py" | "borderWidth" | "borderStyle" | "borderColor" | "borderRadius" | "borderTopWidth" | "borderTopStyle" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderRightWidth" | "borderRightStyle" | "borderRightColor" | "borderBottomWidth" | "borderBottomStyle" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderLeftWidth" | "borderLeftStyle" | "borderLeftColor" | "borderX" | "borderY" | "width" | "w" | "height" | "h" | "display" | "minWidth" | "minW" | "minH" | "minHeight" | "maxWidth" | "maxW" | "maxHeight" | "maxH" | "size" | "overflow" | "overflowX" | "overflowY" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "alignSelf" | "position" | "zIndex" | "top" | "right" | "bottom" | "left" | "bg" | "backgroundColor" | "bgColor" | "isDisabled" | "opacity" | "variant" | "focusOutlineColor" | "inValidOutlineColor" | "shadow" | "color" | "tintColor" | "textDecorationColor" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textDecorationLine" | "textAlign" | "fontStyle" | "textTransform" | "textDecoration" | "txtDecor" | "borderTopRadius" | "borderLeftRadius" | "borderRightRadius" | "rounded" | "roundedTopLeft" | "roundedTopRight" | "roundedBottomLeft" | "roundedBottomRight" | "roundedTop" | "borderBottomRadius" | "roundedBottom" | "roundedLeft" | "roundedRight" | "flexDir" | "boxSize" | "background" | "pointerEvents" | "testID" | "textAlignVertical" | "type" | "isReadOnly" | "isInvalid" | "isFocused" | "isHovered" | "_web" | "_ios" | "_android" | "_light" | "_dark" | "_readOnly" | "_invalid" | "_focus" | "_hover" | "_disabled" | "_important" | "defaultValue" | "onChange" | "allowFontScaling" | "numberOfLines" | "onLayout" | "nativeID" | "maxFontSizeMultiplier" | "selectionColor" | "textBreakStrategy" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "hitSlop" | "removeClippedSubviews" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onFocus" | "onBlur" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "blurOnSubmit" | "caretHidden" | "contextMenuHidden" | "editable" | "keyboardType" | "maxLength" | "multiline" | "onChangeText" | "onContentSizeChange" | "onEndEditing" | "onSelectionChange" | "onSubmitEditing" | "onTextInput" | "onScroll" | "onKeyPress" | "placeholder" | "placeholderTextColor" | "returnKeyType" | "secureTextEntry" | "selectTextOnFocus" | "selection" | "inputAccessoryViewID" | "clearButtonMode" | "clearTextOnFocus" | "dataDetectorTypes" | "enablesReturnKeyAutomatically" | "keyboardAppearance" | "passwordRules" | "rejectResponderTermination" | "selectionState" | "spellCheck" | "textContentType" | "scrollEnabled" | "autoCompleteType" | "importantForAutofill" | "disableFullscreenUI" | "inlineImageLeft" | "inlineImagePadding" | "returnKeyLabel" | "underlineColorAndroid" | "showSoftInputOnFocus" | "isRequired" | "isFullWidth" | "InputLeftElement" | "leftElement" | "InputRightElement" | "rightElement" | "wrapperRef" | "_input" | "_stack" | "totalLines" > & React.RefAttributes > >; export default _default; ```

[ankit-tailor]

Hi @srmagura , I tried reproducing the issue, but couldn't find anything. It would be great if you can provide snack / codesandbox link.

[srmagura]

Hi @ankit-tailor, I am also unable to reproduce the compilation error in a snack. If I had to guess, the error was occurring in my project due to some weird interaction between different @types/ packages and the NativeBase types.

If no one else is experiencing this issue, it can be closed.

That said, the way your .d.ts file lists all of the Input props from @types/react-native seems odd / error-prone to me. For example, I don't understand why autoCompleteType is in your .d.ts file even though the string "autoCompleteType" does not appear anywhere within the NativeBase repository.

[rayan1810]

We will try this on our end, the type is coming from @types/react-native and we have RN version 0.63.2. I think updating to a newer version will fix your issue and we have this in our roadmap.

[Looooong]

I get this error in a newly created project using create-react-app. Here is what package.json looks like:

  "dependencies": {
    "@react-native-community/datetimepicker": "^6.2.0",
    "@react-navigation/bottom-tabs": "^6.3.2",
    "@react-navigation/elements": "^1.3.4",
    "@react-navigation/native": "^6.0.11",
    "@react-navigation/stack": "^6.2.2",
    "expo": "^45.0.0",
    "native-base": "^3.4.8",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-hook-form": "^7.33.1",
    "react-native": "0.68.2",
    "react-native-gesture-handler": "~2.2.1",
    "react-native-modal-datetime-picker": "^13.1.2",
    "react-native-safe-area-context": "4.2.4",
    "react-native-screens": "~3.11.1",
    "react-native-svg": "^12.3.0",
    "react-native-web": "0.17.7"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@expo/ngrok": "^4.1.0",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.67.6",
    "typescript": "~4.3.5"
  },

[oscar-b]

@ankit-tailor I'm seeing this issue as well, with v3.4.11. autoCompleteType is present in the file node_modules/native-base/lib/typescript/components/primitives/TextArea/index.d.ts (installed from npm). I assume this is auto-generated by your build step somehow, as autoCompleteType has to be pulled in from somewhere else.

[pelaxa]

Any resolution for this?