react-navigationでheaderStyleにposition:"absolute"とかを入れるとwarningが出るようになったので対処するには的なお話

react-navigationを使ってアプリを作ってるわけだけど。
その中でヘッダーを透明にしたい部分があるんだけど、タイトルのようにwarningが出て使えないよーって言われてしまうようになった。
position:"absolute"でやってしまうとヘッダーの遷移が気持ち悪くなっちゃうとかそういう原因じゃないかね？
昔それ関連のissue自分でも出したことあったし。

ということで今日はreact-navigationのヘッダーを透明にする代わりの方法があるのでその方法をば。

export default class HeaderTransparentScreen extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    // headerStyle:{
    //   position: 'absolute',
    //   top: 0,
    //   left: 0,
    //   right: 0,
    //   backgroundColor: 'transparent',
    //   borderBottomWidth: 0,
    //   shadowOpacity: 0,
    //   shadowOffset: {
    //     height: 0,
    //   },
    //   shadowRadius: 0,
    //   elevation: 0,
    // }
    headerTransparent: true,
  });
}

ちなみに関連しているissueはこちら

headerTransparentっていうプロパティをtrueにしてあげればよい。
そうするとうまくやってくれるみたい。
ちなみにコメントアウトしてる部分が透明にするために今まで当ててたスタイルだけど、これみたいになっているのでよかった的な。

気づいたらreact-navigationはアップデートされてるので、正直能動的に情報を取得していかないと辛いことになるよねみたいな。
githubのリリースをrssで読み込んでてもリリースには詳しく何を更新したとか書いてくれないので、PRとか関連するissueを読んでいくしかないかと。
もしくはCHANGELOG.mdを読むとか。
ってことで闇が深いけどreact-navigationはちゃんと掘っていきましょう的なみたいな。