Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Missing Required Props for TextInput Error

See original GitHub issue

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,
    },
})

Issue Analytics

State:
Created 9 months ago
Comments:9 (5 by maintainers)

Top GitHub Comments

1reaction

adamjuhaszcommented, Dec 13, 2022

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 />
 
};

0reactions

nandorojocommented, Dec 26, 2022

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.