Styled Components and TypeScript: No overload matches this call

I'm new to Style Components and I'm trying to build a weather app using React Native. I would normally use CSS modules but it seems that this isn't an option for mobile development.

Here's the code:

import ThemeModel from 'models/ThemeModel'import React, { PureComponent } from 'react'import styled from 'styled-components/native'interface HomeScreenComponentInterface {  theme?: ThemeModel  getWeatherData: () => void;  isLoading: boolean | null;}class HomeScreenComponent extends PureComponent<HomeScreenComponentInterface> {  componentDidMount() {    const { getWeatherData } = this.props    getWeatherData()  }  render() {    const Container = styled.View`    padding: 20px 0;  `    const HeaderText = styled.Text`    color: ${(props: HomeScreenComponentInterface) => props.theme && props.theme.colors.lightBlue};    font-size: ${(props: HomeScreenComponentInterface) => props.theme && props.theme.fontSizes.xLarge};    font-weight: 500;  `    return (<Container><HeaderText>Weather App</HeaderText></Container>    )  }}

And here is a screen shot off the error:

Here's the Theme.tsx

import React, { FC, ReactNode } from 'react'import { ThemeProvider } from 'styled-components'const theme = {  colors: {    powderWhite: '#FFFDF9',    persianGreen: '#06B49A',    lightBlue: '#AFDBD2',    onyx: '#36313D',  },  fonts: ['sans-serif', 'Roboto'],  fontSizes: {    small: '12px',    medium: '16px',    large: '24px',    xLarge: '32px',  },}interface ThemeProps {  children: ReactNode}const Theme: FC<ThemeProps> = ({ children }) => (<ThemeProvider theme={ theme }>{children}</ThemeProvider>)export default Theme

I believe I only need to pass the theme props to this component, but I can't figure out how to do that..

Any help would be must appreciated.