React NativeでTextを角丸のボタンっぽい見た目にする

React NativeでTextを角丸のボタンっぽくする時に少しハマったのでメモ

まず、borderRadiusで角丸にする方法

<Text
  style={{
    backgroundColor: "lightblue",
    padding: 10,
    borderRadius: 20,
    borderWidth: 1,
    borderColor: "lightblue",
    overflow: "hidden"
 }}
>
  Button
</Text>

overflow: "hidden"をつけるのがポイントです。
こんな感じになります。

このままだと横幅いっぱいになってしまうので、文字長に合わせたWidthにするには、親要素にflexDirection: "row"をつけてあげると大丈夫です。

<View style={{ flexDirection: "row" }}>
  <Text
    style={{
      backgroundColor: "lightblue",
      padding: 10,
      borderRadius: 20,
      borderWidth: 1,
      borderColor: "lightblue",
      overflow: "hidden"
    }}
  >
 　　 Button
　　</Text>
</View>