react nativeのButtonのスタイルを変更できないという話

概要

Button内の文字のスタイルは変更できないし、marginをつけたりもできず、空白を作るのにも別のコンポーネントで囲う必要がある。
→Touchable Opacity + Textなら割と自由に変更できる。

Buttonコンポーネントはスタイル変更がほとんどできない

react nativeにもとからあるButtonも、emotion/nativeのstyled.Buttonも同じで、あらゆるスタイル変更が効かなくて困った。

const StyledButton = styled.Button`
  margin: 5%;
  color: red;
  background-color: blue
`

こんな風に書いてもうんともすんとも言わない、、、

解決策

Buttonコンポーネントに求められているのはonPress要素の設定なので、それさえできれば他ので問題ない。
それを解決してくれるのが、同じくonPressを設定できるTouchableOpacityコンポーネント

<StyledButton onPress={yourOnPress}>
  <StyledText>hoge</StyledText>
</StyledButton>

const StyledButton = styled.TouchableOpacity`
  margin: 5%;
  background-color: blue
`

const StyledText = styled.Text`
  color: red;
`

Textと組み合わせればあらゆるスタイル変更が自由自在になる。
Buttonよりこっちの方が拡張性高いみたい。

ありがたい