Issue

ReactNative + Typescript下でNativeBaseのTextコンポーネントにglamorous-nativeでpropsを渡してstyle定義しようとする以下のようなケースで怒られました。

import React from 'react';
import { Component } from 'react';
import { Text } from 'native-base';
import glamorous from 'glamorous-native';

const Foo = (props:Props)=>{
	return (
		<StyledSubLabel statuColor="red">ラベル</StyledSubLabel>
	);
}

const StyledSubLabel = glamorous(Text)({
	fontWeight: 'bold'
}, (props)=> ({ color: props.statuColor }));

Error!!

Property 'statuColor' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes, any, any>> & Readonly<{ children?: ReactNode; }> & Readonly<...>'.

対策

glamorous(Component)({...styles}, event)で受け取るprops引数を型定義してあげると収まりました。

type StyledSubLabelProps = {
	statuColor: string
}
const StyledSubLabel = glamorous(Text)({
	fontWeight: 'bold'
}, (props:StyledSubLabelProps)=> ({ color: props.statuColor }));

ちなみに glamorous-nativeでは fontSize={10} というようなstyle属性と同名のpropsを渡すと style={{fontSize: 20}} と同じになるようでらしいのですが、同様にTypescriptだと怒られます。NativeBaseのコンポーネントを渡してるからかなとglamorous-nativeのコンポーネントでやってみましたが結果は同じでした。

上の対策同様に型を fontSize: number と定義してあげると怒らないのですが、propsが渡ってないみたいで変化はありませんでした。

謎い… 🙃