Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6211

Props in styled-component component have no typing

$
0
0

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;
}

enter image description hereenter image description here


Viewing all articles
Browse latest Browse all 6211

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>