如何使用带有TypeScript的React-Native中的样式组件键入无状态功能组件？

Question

Since one week we are using styled-component width React-Native and Typescript in my team project.

I'm forming myself on it and try to understand how to correctly use it with Typescript.

My problem

I actually have problem to understand how am I supposed to type a Stateless Functional Component with styled method.

Actual code

Here is what I have following the doc :

const SFCView: SFC<{}> = (props) => {
  return <View style={props.style} />
}

const StyledSFCView = styled(SFCView)`
  width: 100;
  height: 100;
  background-color: green
`;

My Error

Typescript says to me that props style does not exist in my type SFC<{}> . Indeed I defined it nowhere.

What I tried

I tried to tell typescript that my SFC had those props

const SFCView: SFC<{style: ViewStyle}> = (props) => {
  return <View style={props.style} />
}

But when I use SFCView somewhere else in my code typescript tell me that I have to specify all the props of a View.

Does anyone know how to correctly type it ?

Answer 1

After some research I found the standard for web with className .

My better solution for the moment

import { SFC } from 'react';
import { StyleProp, ViewStyle } from 'react-native';

interface IProps {
 style?: StyleProp<ViewStyle>
}

const SFCView: SFC<IProps> = (props) => {
  return <View style={props.style} />
}

const StyledSFCView = styled(SFCView)`
  width: 100;
  height: 100;
  background-color: green
`;

Advantages:

• No more error about style prop in SFCView .
• style prop is optional so I have no error when I use StyledSFCView .

Drawback:

• style is optional and developper can define it when they use StyledSFCView .

Now this is the last point I have to clarify.

Answer 2

You can write style(MyComponent) , but for that to have an effect, you need to pass the prop className , provided by styled-components , to the final DOM element.

In your case, it should look something like this:

const StyledView = styled(View)`
  width: 100;
  height: 100;
  background-color: green;
`;

const View = ({ className, ... otherPropsYouMightHave }) => (
  // Whatever you have in this component
  <div className={className}>
    // Whatever View needs to render
  </div>
)

Edit: As you mentioned, react-native requires the prop style instead of className