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;