I'm using react-native + typescript + styled-component (with all @types/* installed) but props still have no typing inside a "component"
What can be wrong?
I expect props to be props: MainThemeInterface
or props: { mode: string }
.
// button.component.ts
import { FC } from 'react';
import styled from 'styled-components/native';
interface ButtonComponentProps {
title: string;
onPress: (event: GestureResponderEvent) => void;
}
const Button = styled.TouchableOpacity`
border-radius: 5px;
padding: 11px 16px;
background: ${props => props};
align-self: flex-start;
`;
export const ButtonComponent: FC<ButtonComponentProps> = props => (
<Button onPress={props.onPress}>{props.title}</Button>
);
// styled.d.ts file
import 'styled-components/native';
import { MainThemeInterface } from './theme.model';
// and extend them!
declare module 'styled-components' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface DefaultTheme extends MainThemeInterface {}
}
// theme.model.ts file
export MainThemeInterface {
mode: string;
}