Missing Required Props for TextInput Error

[aronvis]

When I try to compile the code below, I get a missing props error for the TextInput component. Could you please clarify what prop field I am missing? Using the react native equivalent component does seem to work for some odd reason. Having some documentation with the required props for the TextInput component would have really helped.

import { View, TextInput, SxProp } from 'dripsy'
import { StyleSheet } from 'react-native'
import { Dispatch, SetStateAction } from 'react'

interface InputProp {
    textState: [string, Dispatch<SetStateAction<string>>]
    placeholder?: string
    placeholderTextColor?: string
    sx?: SxProp
}

export function Input({
    textState,
    placeholder,
    placeholderTextColor,
    sx,
}: InputProp) {
    const [text, setText] = textState
    const placeholderText = placeholder || 'Text'
    const placeholderColor = placeholderTextColor || 'rgba(255, 255, 255, 0.96)'
    const labelStyle = sx || styles.container

    return (
        <View sx={labelStyle}>
            <TextInput
                value={text}
                onChangeText={setText}
                placeholder={placeholderText}
                placeholderTextColor={placeholderColor}
            />
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'rgba(255, 255, 255, 0.06)',
        borderRadius: 16,
    },
})

[nandorojo]

Without the error, I can't say much. Maybe you have multiple versions of @types/react or @types/react-native?

[adamjuhasz]

We're also seeing this error on TextInput

Type '{ style: { color: string; marginVertical: number; fontSize: number; borderBottomColor: string; borderBottomWidth: number; }; placeholder: string; value: string; onChangeText: Dispatch<SetStateAction<string>>; }' is missing the following properties from type 'Omit<Pick<Omit<{ testID?: string | undefined; textAlign?: "center" | "left" | "right" | undefined; textAlignVertical?: "center" | "bottom" | "top" | "auto" | undefined; pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined; ... 103 more ...; showSoftInputOnFocus?: boolean | undefined; }, keyof Styled...': onPressIn, onPressOut, onPointerEnter, onPointerEnterCapture, and 14 more.ts(2740)

Package.json

  "dependencies": {
    "@expo/config": "^7.0.2",
    "@fartherfinance/frontend": "^3.5.0",
    "@gorhom/bottom-sheet": "^4.4.5",
    "@magic-sdk/react-native": "^11.1.0",
    "@react-native-async-storage/async-storage": "^1.17.11",
    "@react-navigation/bottom-tabs": "^6.5.0",
    "@react-navigation/native": "^6.1.0",
    "@react-navigation/native-stack": "^6.9.5",
    "@react-navigation/stack": "^6.3.8",
    "@storybook/react-native": "next",
    "@tanstack/react-query": "^4.19.1",
    "axios": "^1.2.1",
    "dotenv": "^16.0.3",
    "dripsy": "^3.8.1",
    "expo": "~47.0.8",
    "expo-asset": "~8.6.2",
    "expo-constants": "~14.0.2",
    "expo-dev-client": "~2.0.1",
    "expo-dev-menu": "^2.0.2",
    "expo-font": "~11.0.1",
    "expo-secure-store": "~12.0.0",
    "expo-splash-screen": "~0.17.5",
    "expo-status-bar": "~1.4.2",
    "expo-updates": "~0.15.6",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-native": "0.70.5",
    "react-native-gesture-handler": "~2.8.0",
    "react-native-reanimated": "~2.12.0",
    "react-native-safe-area-context": "4.4.1",
    "react-native-screens": "~3.18.0",
    "react-native-svg": "13.4.0",
    "react-native-web": "~0.18.9",
    "react-native-webview": "11.23.1",
    "react-query": "^3.39.2",
    "victory-native": "^36.6.8",
    "zod": "^3.19.1",
    "zustand": "^4.1.5",
    "sentry-expo": "~6.0.0",
    "expo-application": "~5.0.1",
    "expo-device": "~5.0.0",
    "@sentry/react-native": "4.9.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.5",
    "@babel/eslint-parser": "^7.19.1",
    "@types/react": "~18.0.14",
    "@types/react-native": "~0.70.6",
    "eslint": "8.29.0",
    "eslint-config-universe": "^11.1.1",
    "eslint-plugin-functional": "^4.4.1",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.31.11",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-native": "^4.0.0",
    "prettier": "2.8.1",
    "typescript": "4.9.4"
  },

Example Code

import { Text, TextInput, View } from "dripsy";
import React, { useState } from "react";
// import { TextInput } from "react-native"; // @TODO TextInput from dripsy thinks all props are required

import { ScreenContainer } from "../components/common/ScreenContainer";
import { useLogin } from "../hooks/useLogin";
import { RootStackReactNavigationProps } from "../navigation/RootStackNavigator";

const LoginScreen = (): JSX.Element => {
  const [email, setEmail] = useState("");

  const login = useLogin();

  return (
    <ScreenContainer>
      <Text variant="h3">{texts.loginScreen}</Text>
      <View variant="styles.verticalSpace" />

      <TextInput
        placeholder="email"
        value={email}
        onChangeText={setEmail}
      />
  <ScreenContainer />

};

[RichardLindhout]

We have the same problem

[nandorojo]

hmm okay and i assume it doesn’t happens with the RN input?

does this only happen with dripsy’s input, or other elements too?

[adamjuhasz]

Correct if you switch the import from dripsy to react-native it’s all good. I’m hoping to spend some time looking at the TS definitions. I think it’s just not marking these props as optional

[adamjuhasz]

All the other components work perfectly, thank you for a great library!

[nandorojo]

Does downgrading to Dripsy 3.6.0 fix this? I think it may be related to a recent PR.

[nandorojo]

I reproduced this with ScrollView as well:

const ScrollView: React.ForwardRefExoticComponent<Pick<Omit<{
    testID?: string | undefined;
    pointerEvents?: "none" | "auto" | "box-none" | "box-only" | undefined;
    style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
    horizontal?: boolean | null | undefined;
    hitSlop?: import("react-native").Insets | undefined;
    onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
    removeClippedSubviews?: boolean | undefined;
    nativeID?: string | undefined;
    collapsable?: boolean | undefined;
    needsOffscreenAlphaCompositing?: boolean | undefined;
    ... 95 more ...;
    persistentScrollbar?: boolean | undefined;
}, keyof StyledProps<...>> & StyledProps<...> & {
    ...;
} & React.RefAttributes<...>, "key" | ... 1 more ... | keyof ScrollViewProps> & {
    ...;
} & React.RefAttributes<...>>
import ScrollView
Type '{ children: Element[]; showsVerticalScrollIndicator: false; }' is missing the following properties from type 'Pick<Omit<{ testID?: string | undefined; pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined; style?: StyleProp<ViewStyle>; horizontal?: boolean | null | undefined; ... 101 more ...; persistentScrollbar?: boolean | undefined; }, keyof StyledProps<...>> & StyledProps<...> & { ...; } & RefAttributes<...': stickyHeaderHiddenOnScroll, StickyHeaderComponent, href, hrefAttrs, and 2 more.

I have to see what could be causing this.

[nandorojo]

I'm also wondering if downgrading TypeScript to 4.4.3 could help.

Apologies for this, TypeScript is changing fast which makes things tricky for library authors.

[nandorojo]

I've made some minor progress on this. But typescript + @types/react-native + @types/react make things so difficult for library authors to wrap and add custom type inference, especially as versions change. I may need to do a rewrite of many types to work with future TS versions. For now, I think that these versions work together, but not positive:

• @types/react-native@0.67.6
• dripsy@3.6.0
• typescript@4.4.3

[gunnartorfis]

I've made some minor progress on this. But typescript + @types/react-native + @types/react make things so difficult for library authors to wrap and add custom type inference, especially as versions change. I may need to do a rewrite of many types to work with future TS versions. For now, I think that these versions work together, but not positive:

• @types/react-native@0.67.6
• dripsy@3.6.0
• typescript@4.4.3

Still happening for me with TextInput using the deps versions you suggested @nandorojo

[nandorojo]

Going to move this to #276