【React Native】起動時にドロワーが一瞬表示されてしまう

はじめに

React Navigation v2→v5 に一新する機会があり、
その際にAndroidでクリティカルなバグが発生したので、解決策を備忘録として残しておきます。

起動時にドロワーが一瞬表示される

呼んでもないのに一瞬ドロワーがひょっこりしてしまいます。

※わかりやすいようにドロワーの色は黒にしています。

解決策

ドロワーのwidth値が影響している模様。
初回renderフラグを用いて、widthを制御することで現れなくなります。

※下記コードは一部になります。

initialRender.js

import { useState } from 'react';

export const initialRender = () => {
  const [isInitialRender, setIsInitialRender] = useState(false);

  if (!isInitialRender) {
    setTimeout(() => setIsInitialRender(true), 1);
    return true;
  }
  return false;
};

navigation.js

import { initialRender } from './initialRender'
const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator
      initialRouteName='Tab'
      drawerStyle={{ width: initialRender() ? 0  : 300 }} // 初回はwidthを0にする。
    >
      <Drawer.Screen name="Tab" component={HomeTabs}/>
    </Drawer.Navigator>
  );
}

おわりに

他に良い解決方法がありましたら、教えていただけると幸甚です。

参考

[BUG] Blink drawer when open the app 揃 Issue #7561 揃 react-navigation/…https://github.com