Question 108676 in React native Question posted in
The official React Native documentation can be found here.

React native – The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & TextInputProps & RefAttributes<TextInput>

I am trying to create a text form with typescript in React Native framework. I create a TextInput component to use for Email, Password input. Here are my code:

TextInput.tsx

interface TextInputGroup extends ComponentPropsWithoutRef<"input"> {
  errorText: string;
  description: string;
}

export default function TextInput({ errorText, description, ...props } : TextInputGroup) {
  return (
    <View style={styles.container}>
      <Input
        style={styles.input}
        selectionColor={theme.colors.primary}
        underlineColor="transparent"
        mode="outlined"
        {...props}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  input: {
    backgroundColor: theme.colors.surface,
  },
})

SignUp.tsx

export default function RegisterScreen({ navigation } : { navigation : any }) {
  const [name, setName] = useState({ value: '', error: '' })
  const [email, setEmail] = useState({ value: '', error: '' })
  const [password, setPassword] = useState({ value: '', error: '' })

  return (
    <Background>
      <TextInput
        label="Name"
        returnKeyType="next"
        value={name.value}
        onChangeText={(text) => setName({ value: text, error: '' })}
        error={!!name.error}
        errorText={name.error}
      />
    </Background>
  )
}

It shows the error in TextInput.tsx:
enter image description here

and SignUp.tsx:
enter image description here

enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I've found the problem in my code: in SignUp.tsx, some attributes like "label" don't exist in TextInputGroup or input HTML tag (when I extend ComponentPropsWithoutRef<"input">) so I change to ComponentPropsWithoutRef, add some required attributes like description and also delete some non-exist attributes in SignUp.tsx. My fixed code:

    TextInput.tsx

    import { TextInput as Input } from 'react-native-paper'

interface TextInputGroup extends ComponentPropsWithoutRef<typeof Input> {
  errorText: string;
  description: string;
}

export default function TextInput({ errorText, description, ...props } : TextInputGroup) {
  return (
    <View style={styles.container}>
      <Input
        style={styles.input}
        selectionColor={theme.colors.primary}
        underlineColor="transparent"
        mode="outlined"
        {...props}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  input: {
    backgroundColor: theme.colors.surface,
  },
})

    SignUp.tsx

    export default function RegisterScreen({ navigation } : { navigation : any }) {
  const [name, setName] = useState({ value: '', error: '' })
  const [email, setEmail] = useState({ value: '', error: '' })
  const [password, setPassword] = useState({ value: '', error: '' })

  return (
    <Background>
      <TextInput
        label="Name"
        returnKeyType="next"
        value={name.value}
        onChangeText={(text) => setName({ value: text, error: '' })}
        error={!!name.error}
        errorText={name.error}
        description="abc"
      />
    </Background>
  )
}

  2. 0

    Instead of using Input from react-native-paper, use TextInput from react-native.

    
import React, { ComponentPropsWithoutRef } from 'react';
import { View, StyleSheet, TextInput as RNTextInput } from 'react-native';

interface TextInputGroup extends ComponentPropsWithoutRef<typeof RNTextInput> {
  errorText: string;
  description: string;
}

export default function TextInput({ errorText, description, ...props }: TextInputGroup) {
  return (
    <View style={styles.container}>
      <RNTextInput
        style={styles.input}
        selectionColor={theme.colors.primary}
        underlineColorAndroid="transparent"
        {...props}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginVertical: 12,
  },
  input: {
    backgroundColor: theme.colors.surface,
    paddingVertical: 8,
    paddingHorizontal: 16,
    borderRadius: 4,
    borderWidth: 1,
    borderColor: theme.colors.disabled,
  },
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search