React Native Paperの使い方

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    env: {
      production: {
        plugins: ["react-native-paper/babel"]
      }
    }
  };
};

import {Provider as PaperProvider} from 'react-native-paper'

export default function App() {
  return (
    <PaperProvider>
      {/* この中でコンポーネントを使うことができる */}
    </PaperProvider>
  );
}

<Headline>見出し</Headline>
<Title>タイトル</Title>
<Subheading>サブ見出し</Subheading>
<Paragraph>段落</Paragraph>
// ver5からはvariantプロパティでの指定に変わった
<Text variant="headlineLarge">見出しサイズ大</Text>
<Text variant="headlineMedium">見出しサイズ中</Text>
<Text variant="headlineSmall">見出しサイズ小</Text>
<Text variant="titleMedium">タイトルサイズ中</Text>
<Text variant="bodyMedium">本文サイズ中</Text>

<Button>普通のボタン</Button>
<Button mode="contained">containedボタン</Button>
<Button mode="outlined">outlinedボタン</Button>

<Card>
  <Card.Cover source={require("../assets/icon.png")} />
  <Card.Title title="ここにタイトルが入ります" subtitle="ここにサブタイトルが入ります" left={()=><Paragraph>アイコン</Paragraph>}/>
  <Card.Content>
    <Paragraph>ここに本文が入ります。</Paragraph>
  </Card.Content>
  <Card.Actions>
    <Button>見ない</Button>
    <Button mode="contained">見る</Button>
  </Card.Actions>
</Card>

 <List.Item title="First Item" description="Item description" />
 <List.Item title="Second Item" description="Item description" />