Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

ViewStyle is not assignable to type StyleProp

$
0
0

i am new to react-native and typescript so might be missing or making some silly mistake that's giving this error mentioned below. I'm creating a component which uses some other library where the "InnerComponent" lives and i am just importing it. I need to pass value from OuterComponent prop which is named as "myCustomContainer" to the InnerComponent prop which is named as "containerStyle" so i specified the same type of prop(StyleProp) as it's expecting in the InnerComponent but getting the following error.

Type 'import("c:/myApp/node_modules/@types/react-native/index").StyleProp<import("c:/myApp/node_modules/@types/react-native/index").ViewStyle>'    is not assignable to type 'import("c:/myApp/node_modules/@types/react-native/index").StyleProp<import("c:/myApp/node_modules/@types/react-native/index").ViewStyle>'.  Type 'ViewStyle' is not assignable to type 'StyleProp<ViewStyle>'.    Type 'import("c:/myApp/node_modules/@types/react-native/index").ViewStyle' is not assignable to type 'import("c:/myApp/node_modules/@types/react-native/index").ViewStyle'.      Types of property 'backgroundColor' are incompatible.        Type 'string | typeof import("c:/myApp/node_modules/@types/react-native/index").OpaqueColorValue | undefined' is not assignable to type 'string | typeof import("c:/myApp/node_modules/@types/react-native/index").OpaqueColorValue | undefined'.          Type 'unique symbol' is not assignable to type 'string | unique symbol | undefined'.ts(2322)             InnerComponent.d.ts(12, 5): The expected type comes from property 'containerStyle' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<InnerComponent> & Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "myCustomText" | ... 12 more ... | "someOtherContainerStyle"> & Partial<...> & Partial<...>'

Here is the code for the component i created and typed definition file(d.ts) of the imported component.

My Component

import React from "react";import { View, StyleProp, ViewStyle } from "react-native";import { NavigationInjectedProps, withNavigation } from "react-navigation";import { InnerComponent } from "ComponentsLibrary";import { myStyles as styles } from "../styles";interface IProps {  myText?: string;  myCustomContainer?: StyleProp<ViewStyle>}type Props = IProps & NavigationInjectedProps;export const MyOuterComponent: React.FC<Props> = (props: Props) => {  const {    myText,    myCustomContainerStyle  } = props;  return (<View><InnerComponent          customText={myText}          containerStyle={myCustomContainerStyle}          onChangeText={(e) => console.log(e.target.value)}        />   </View>  );};

InnerComponent.d.ts file for the component i am using

import { Component } from "react";import { StyleProp, ViewStyle } from "react-native";/** * Component Props */declare type Props = {    containerStyle?: StyleProp<ViewStyle>;    someOtherContainerStyle?: StyleProp<ViewStyle>;    customText?: string;    onChangeText: (customText: string) => void;};/** * Component State */declare type State = {    isTextMode: boolean;    customText: string;};export declare class InnerComponent extends Component<Props, State> {    static defaultProps: {        onChange: undefined;    };    constructor(props: Props);    someFunction: () => void;    componentDidUpdate(prevProps: Props): void;    render(): JSX.Element;    private onCancel;}export default InnerComponent;

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>