reactjs - react native typescript Ninguna sobrecarga coincide con esta llamada
Soy nuevo en typescript y estoy usando react native. Añadí un style a un elemento view y estoy recibiendo los errores a continuación.
¿Puede alguien explicar por favor cuál es el problema y qué puedo hacer para solucionarlo?
Aquí está mi componente de estilos
import StyleSheet from 'react-native-media-query';
import { useMediaQuery } from 'react-responsive'
const { ids, styles } = StyleSheet.create({
viewStyle: {
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "center",
'@media (min-width: 1400px)': {
width: "20%"
},
'@media (min-width: 1000px)': {
width: "30%"
},
'@media (max-width: 1000px) and (min-width: 700px)': {
width: "60%"
},
'@media (max-width: 700px)': {
width: "70%"
},
'@media (max-width: 700px)': {
width: "90%"
}
},
inputStyle: {
padding: "10px"
},
emailContainer: {
justifyContent: "center",
AlignItems: "center",
alignSelf: "center",
...Platform.select({
native: {
margin: 40,
},
web: {
maxHeight: "10%",
},
}),
},
});
export { ids, styles };
Y aquí está mi componente usando el estilo
import { Input, Button } from "@rneui/themed";
import { useEffect, useState } from "react";
import { Text, View } from "react-native";
import { ids, styles } from "./styles";
export default function InitialEmailComponent() {
const [email, setEmail] = useState<string>("");
const [emailError, setEmailError] = useState<string>("");
const handleEmailSubmit = async () => {
debugger;
};
return (
<View style={styles.viewStyle} dataSet={{ media: ids.viewStyle }} >
<Input
inputStyle={styles.inputStyle}
id="register-email-input"
placeholder={"Enter your email"}
onChangeText={(email) => setEmail(email)}
errorStyle={{ color: "red" }}
errorMessage={emailError}
/>
<Button
id="register-email-submit"
title="Submit"
onPress={handleEmailSubmit}
/>
</View>
);
}
src/components/auth/initialEmailComponent/index.tsx:15:11 - error TS2769: No overload matches this call.
Overload 1 of 2, '(props: ViewProps | Readonly<ViewProps>): View', gave the following error.
Type '{ position?: "fixed" | TextStyle | ViewStyle | "static" | "relative" | "absolute" | "sticky" | ImageStyle | undefined; backfaceVisibility?: TextStyle | ... 4 more ... | undefined; ... 73 more ...; translateY?: TextStyle | ... 3 more ... | undefined; } | {} | ({ ...; } & {}) | ({ ...; } & {})' is not assignable to type 'StyleProp<ViewStyle>'.
Type '{ position?: "fixed" | TextStyle | ViewStyle | "static" | "relative" | "absolute" | "sticky" | ImageStyle | undefined; backfaceVisibility?: TextStyle | ... 4 more ... | undefined; ... 73 more ...; translateY?: TextStyle | ... 3 more ... | undefined; }' is not assignable to type 'StyleProp<ViewStyle>'.
Type '{ position?: "fixed" | TextStyle | ViewStyle | "static" | "relative" | "absolute" | "sticky" | ImageStyle | undefined; backfaceVisibility?: TextStyle | ... 4 more ... | undefined; ... 73 more ...; translateY?: TextStyle | ... 3 more ... | undefined; }' is not assignable to type 'ViewStyle'.
Types of property 'backfaceVisibility' are incompatible.
Type 'TextStyle | ViewStyle | "visible" | "hidden" | ImageStyle | undefined' is not assignable to type '"visible" | "hidden" | undefined'.
Type 'TextStyle' is not assignable to type '"visible" | "hidden" | undefined'.
Overload 2 of 2, '(props: ViewProps, context: any): View', gave the following error.
Type '{ position?: "fixed" | TextStyle | ViewStyle | "static" | "relative" | "absolute" | "sticky" | ImageStyle | undefined; backfaceVisibility?: TextStyle | ... 4 more ... | undefined; ... 73 more ...; translateY?: TextStyle | ... 3 more ... | undefined; } | {} | ({ ...; } & {}) | ({ ...; } & {})' is not assignable to type 'StyleProp<ViewStyle>'.
15 <View style={styles.viewStyle}
~~~~~
node_modules/react-native/Libraries/Components/View/ViewPropTypes.d.ts:234:3
234 style?: StyleProp<ViewStyle> | undefined;
~~~~~
The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'
node_modules/react-native/Libraries/Components/View/ViewPropTypes.d.ts:234:3
234 style?: StyleProp<ViewStyle> | undefined;
~~~~~
The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'
src/components/auth/initialEmailComponent/index.tsx:19:9 - error TS2322: Type '{ position?: "fixed" | TextStyle | ViewStyle | "static" | "relative" | "absolute" | "sticky" | ImageStyle | undefined; backfaceVisibility?: TextStyle | ... 4 more ... | undefined; ... 73 more ...; translateY?: TextStyle | ... 3 more ... | undefined; } | {} | ({ ...; } & {}) | ({ ...; } & {})' is not assignable to type 'StyleProp<TextStyle>'.
Type '{ position?: "fixed" | TextStyle | ViewStyle | "static" | "relative" | "absolute" | "sticky" | ImageStyle | undefined; backfaceVisibility?: TextStyle | ... 4 more ... | undefined; ... 73 more ...; translateY?: TextStyle | ... 3 more ... | undefined; }' is not assignable to type 'StyleProp<TextStyle>'.
Type '{ position?: "fixed" | TextStyle | ViewStyle | "static" | "relative" | "absolute" | "sticky" | ImageStyle | undefined; backfaceVisibility?: TextStyle | ... 4 more ... | undefined; ... 73 more ...; translateY?: TextStyle | ... 3 more ... | undefined; }' is not assignable to type 'TextStyle'.
Types of property 'position' are incompatible.
Type '"fixed" | TextStyle | ViewStyle | "static" | "relative" | "absolute" | "sticky" | ImageStyle | undefined' is not assignable to type '"fixed" | "static" | "relative" | "absolute" | "sticky" | undefined'.
Type 'TextStyle' is not assignable to type '"fixed" | "static" | "relative" | "absolute" | "sticky" | undefined'.
19 inputStyle={styles.inputStyle}
~~~~~~~~~~
node_modules/@rneui/base/dist/Input/Input.d.ts:15:5
15 inputStyle?: StyleProp<TextStyle>;
~~~~~~~~~~
The expected type comes from property 'inputStyle' which is declared here on type 'IntrinsicAttributes & InputProps & { children?: ReactNode; } & RefAttributes<PropsWithChildren<InputProps>>'
Found 2 errors in the same file, starting at: src/components/auth/initialEmailComponent/index.tsx:15
Respuesta #1
Primero que nada, no creo que puedas aplicar consultas de medios así a un componente View (por ejemplo, '@media..etc'), porque el componente 'View' no tiene esas opciones permitidas en sus atributos 'style'.
En segundo lugar, 'padding' en tus estilos de entrada no está permitido por TextStyle.
Sugiero que revises estos dos enlaces, que contienen todos los posibles atributos de ViewStyle y TextStyle:
https://reactnative.dev/docs/view-style-props
https://reactnative.dev/docs/text-style-props
Las propiedades 'Layout' también están disponibles para los componentes View, por lo que cosas como flex funcionan en tu código:
https://reactnative.dev/docs/layout-props
Respuesta #2
Estás usando propiedades de consulta de medios CSS que no son compatibles con React Native.
'@media (min-width: 1400px)': {
width: "20%"
},
'@media (min-width: 1000px)': {
width: "30%"
},
'@media (max-width: 1000px) and (min-width: 700px)': {
width: "60%"
},
'@media (max-width: 700px)': {
width: "70%"
},
'@media (max-width: 700px)': {
width: "90%"
}
Puedes encontrar todas las propiedades de estilo compatibles aquí - https://github.com/vhpoet/react-native-styling-cheat-sheet
Esto se aplica a esta biblioteca - https://www.npmjs.com/package/react-responsive, que está diseñada para funcionar solo con navegadores.