[ReactNative]native-baseのButtonが中央に配置されない

Question

閲覧いただきありがとうございます。React初学者の学生です。
UIコンポーネントとしてnative-baseを利用しようと考えインストールしコーディングしましたが、Buttonにstyleが適用されていません。

該当部分

.
.
.
import { Container, Text, Button, Icon } from "native-base";
import styles from "../styles.js";
.
.
.
   return (
      <Container style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Hello World!</Text>
        <Button onPress={() => this.props.navigation.navigate("InvoiceEdit")}>
          <Icon type="FontAwesome5" name="file-invoice-dollar" />
          <Text>Go to InvoiceEdit</Text>
        </Button>
        <Button onPress={() => this.props.navigation.navigate("Summary")}>
          <Icon type="FontAwesome5" name="poll-h" />
          <Text>Go to Summary</Text>
        </Button>
        {invoiceList}
      </Container>
    );

Styles.js

export default StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    modal: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0, 0.8)',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

expo startにて結果

このように、他の部分にはstyleが適用されていますが、Buttonにだけ適用されません。
ちなみに、囲っているButtonを削除すると

      <Container style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Hello World!</Text>
          <Icon type="FontAwesome5" name="file-invoice-dollar" />
          <Text>Go to InvoiceEdit</Text>
        <Button onPress={() => this.props.navigation.navigate("Summary")}>
          <Icon type="FontAwesome5" name="poll-h" />
          <Text>Go to Summary</Text>
        </Button>
        {invoiceList}
      </Container>    
    );

このような結果になりました。バグなのか、native-baseのstyleには何か別途必要なものがあるのか、ご教授いただけますと幸いです。
宜しくお願いいたします。

Answer 1

ButtonそのものにalignSelfを指定してはどうでしょうか？

<Button style={{alignSelf: 'center'}} onPress={() => this.props.navigation.navigate("Summary")}>
  <Icon type="FontAwesome5" name="poll-h" />
  <Text>Go to Summary</Text>
</Button>

Comments

[koseiprogramdev]

解決いたしました！未熟で申し訳ございません。
native-baseのButtonは何か特殊だったりするのでしょうか？
この問題が生じた理由が何かわからず、戸惑っております。ご教授いただけると幸いです。

[nekoniki]

> native-baseのButtonは何か特殊だったりするのでしょうか？
おそらくそうなのかなと思います。

native-baseに限らず各種UIライブラリは、突き詰めていくとreact-nativeのコンポーネントを組み合わせているだけなので、作りによってはreact-nativeのコンポーネントとは異なった使用感になるのだと思います。

[koseiprogramdev]

どこかで有名なUIライブラリだから欠陥がないと認識してしまっていたので、今後は柔軟に対応できるよう努めてまいります。非常に勉強になりました。ありがとうございます！