React NativeでStyleSheet.createしたstyleを渡すとpropの型がnumberになってしまう?

React NativeでCSSを書く場合、以下のように書くことが多いかと思います。

const styles = StyleSheet.create({
  image: {
    flex: 1,
    width: 150,
    height: 150,
    borderRadius: 4,
  },
});

これを使って以下のようにstyle属性を渡すと、number型になってしまうようで、これがだめっぽいです。

import { Thumbnail } from 'native-base';

<Thumbnail
  style={styles.image}
  source={require('../../assets/img/XXX.png')}
/>

http://qiita.com/YutamaKotaro/items/d0cd253c998f9b28dd55

にあるように、オブジェクトのIDが渡されるためです。

型チェックに合うようにここでも紹介されている、 StyleSheet.flatten を使ってみましたが、あくまで文字列として見やすく整形しているだけっぽく、内部のオブジェクトはそのままのため、以下のような書き方でも型チェックで弾かれました。

<Thumbnail
  style={StyleSheet.flatten(styles.image)}
  source={require('../../assets/img/XXX.png')}
/>

この方法でうまくいくケースもあるようです。

native base v2 では純粋にオブジェクトを渡すしか方法がないようです。

http://docs.nativebase.io/docs/Migration.html

なんでやねん！とかStyleSheet.flattenするといいよ、などの情報が飛び交っています。

https://github.com/GeekyAnts/NativeBase/issues/510

https://github.com/GeekyAnts/NativeBase/issues/557

StyleSheet.flatten でも直らなかったーみたいな情報も。

https://github.com/shoutem/ui/issues/51#issuecomment-295576294

またstyleのpropTypeの判定に

https://stackoverflow.com/questions/34626298/how-to-declare-style-in-proptypes

で紹介されていた

react-style-proptype

https://github.com/brigand/react-style-proptype

を使いましたが、今は

View.propTypes.style もしくは Text.propTypes.style を使うといいようです。

https://facebook.github.io/react-native/releases/0.21/docs/style.html#pass-styles-around

どこかしらかのタイミングから style に resizeMode 属性は使えなくなったのですが、 View.propTypes.style ではそこをちゃんと弾いてくれます。

  image: {
    resizeMode: 'contain',
  },

参考

https://facebook.github.io/react-native/docs/stylesheet.html#flatten