Typescript / Styled Component / React Native - How to type Styled Components

styled-component-types-rn.ts

type ButtonProps = {
  primary: boolean;
};

const Button = styled.TouchableOpacity<ButtonProps>`
  opacity: ${(props) => (props.primary ? 0.5 : 1)};
`;

// Or HTML version

interface TitleProps {
  readonly isActive: boolean;
};

const Title = styled.h1<TitleProps>`
  color: ${props => props.isActive ? props.theme.colors.main : props.theme.colors.secondary};
`

// or Custom Component version with inline type

const NewHeader = styled(Header)<{ customColor: string }>`
  color: ${props => props.customColor};
`

// or Custom Component version with interface

interface NewHeaderProps {
  readonly customColor: string;
};

const NewHeader = styled(Header)<NewHeaderProps>`
  color: ${props => props.customColor};
`