Search code examples
javascriptreactjstypescriptreact-nativestyled-components

What is the typing of props.style in styled.TouchableOpacity component?

Using react-native and styled-components with TypeScript,

I want to know what is the typing of props.style in styled.TouchableOpacity component in order to be able to wrap style on it, ex:

const Boutton = styled.TouchableOpacity

const Test = () => <Button />

const WrapTest = styled(Test)({
 // add styled
})

In order to do that, I must have the proper type to satisfy TypeScript:

const Test = (props) => <Button style={props.style} />

I have tried to use style?: StyleProps<ViewStyle>, but it gives me the following error:

No overload matches this call.
  Overload 1 of 2, '(props: Omit<Omit<TouchableOpacityProps & RefAttributes<TouchableOpacity> & { activeOpacity: 0.7; } & ContainerProps, "activeOpacity"> & Partial<...>, "theme"> & { ...; } & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type 'import("/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/@types/react-native/index").StyleProp<import("/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/@types/react-native/index").ViewStyle>' is not assignable to type 'import("/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/@types/styled-components/node_modules/@types/react-native/index").StyleProp<import("/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/@types/styled-components/node_modules/@types/react-native/index...'.
      Type 'ViewStyle' is not assignable to type 'StyleProp<ViewStyle>'.
        Type 'import("/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/@types/react-native/index").ViewStyle' is not assignable to type 'import("/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/@types/styled-components/node_modules/@types/react-native/index").ViewStyle'.
          Types of property 'backgroundColor' are incompatible.
            Type 'import("/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/@types/react-native/index").ColorValue | undefined' is not assignable to type 'import("/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/@types/styled-components/node_modules/@types/react-native/index").ColorValue | undefined'.
              Type 'OpaqueColorValue' is not assignable to type 'ColorValue | undefined'.
                Type 'OpaqueColorValue' is not assignable to type 'unique symbol'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<typeof TouchableOpacity, DefaultTheme, { activeOpacity: 0.7; } & ContainerProps, "activeOpacity", typeof TouchableOpacity>): ReactElement<...>', gave the following error.
    Type 'import("/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/@types/react-native/index").StyleProp<import("/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/@types/react-native/index").ViewStyle>' is not assignable to type 'import("/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/@types/styled-components/node_modules/@types/react-native/index").StyleProp<import("/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/@types/styled-components/node_modules/@types/react-native/index...'.  TS2769

    76 |       inline={inline}
    77 |       inlineHeight={inlineHeight ?? 16}
  > 78 |       style={style}>
       |       ^
    79 |       {isLoading ? (
    80 |         <Logo
    81 |           {...accessibilityAndTestId('button-isloading-icon')}

This is where I want to setup the props: https://github.com/pass-culture/pass-culture-app-native/blob/master/src/ui/components/buttons/AppButton.tsx#L24

What is the Typing of props.style for styled.TouchableOpacity in react-native ?

Solution

  • Assuming react-native version is 0.64.2, the answer should be StyleProp<ViewStyle> | undefined.

    TouchableOpacity extends TouchableOpacityBase, which has the type of TouchableOpacityComponent, which extends React.Component<TouchableOpacityProps>.

    If you look into TouchableOpacityProps, you will see that it extends TouchableWithoutFeedbackProps, which has its style prop typed with : StyleProp<ViewStyle> | undefined.

    (Following the question description's update) Furthermore, you need to use the TouchableOpacity component directly imported from react-native : styled(TouchableOpacity) instead of styled.TouchableOpacity.