【React Native】PropTypesを使ってWrapperコンポーネントを作成する

複数のページで同じ View をコンポーネント化しようとした際に調べたことをまとめ。
PropTypes を使って Wrapper コンポーネントを作成する方法についてです。
なお、こちらは React.js でも利用可能です。

参考にさせていただいた記事はこちらから。

How To Create Wrapper Components in React with Props | DigitalOcean
https://www.digitalocean.com/community/tutorials/how-to-create-wrapper-components-in-react-with-props

こちらは React.js でのやり方についての記事でしたが、React Native でも同じように書くことができました。

サンプルコードは下記のとおりです。
マテリアルデザインのカードレイアウトっぽい見た目のコンポーネントを実装しています。
なお、スタイルは割愛しています。ご了承ください。

import React from 'react';
import PropTypes from 'prop-types';
import { Text, View, TouchableOpacity } from 'react-native';

const Card = props => (
  <TouchableOpacity onPress={props.onPress}>
    <View>
      <Text>{props.title}</Text>
    </View>
    {props.children}
  </TouchableOpacity>
);
Card.propTypes = {
  title: PropTypes.string.isRequired,
  onPress: PropTypes.func.isRequired,
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.element),
    PropTypes.element.isRequired
  ]),
};
export default Card;

ポイントは PropTypes に追加した children です。
これがある事で、このコンポーネントでラップされた要素を表示することができます。

上記のコンポーネントの記述方法は下記のとおりです。

<Card title={'タイトル'} onPress={[コンポーネントタップ時の処理]}>
  {/* コンポーネント内に表示したい要素 */}
</Card>

上記のように記述すれば、Card コンポーネントで囲った要素もきちんと表示されます！
もし、children の指定が失敗している場合は、コンポーネントで囲われた要素は表示されません。
実装については以上です。

コンポーネントで要素を囲む記述方法は今までやったことがなかったのですが、参考サイトが早く見つかったので、実装自体は意外と簡単でした。
これがわかれば、今後の開発もはかどりそうです。

以上、React Native で PropTypes を使って Wrapper コンポーネントを作成する方法でした。
ご参考になれば幸いです。