drawer First load blink

[max-end]

drawer content Priority display，cause First load blink
I recorded a video, click on me to check

demo:
my package.json
{ "name": "example", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "start": "react-native start", "test": "jest", "lint": "eslint ." }, "dependencies": { "react": "16.9.0", "react-native": "0.61.3", "react-native-gesture-handler": "^1.5.0", "react-native-reanimated": "^1.3.2", "react-native-screens": "^1.0.0-alpha.23", "react-navigation": "^4.0.10", "react-navigation-drawer": "^2.3.3" }, "devDependencies": { "@babel/core": "^7.6.4", "@babel/runtime": "^7.6.3", "@react-native-community/eslint-config": "^0.0.5", "babel-jest": "^24.9.0", "eslint": "^6.6.0", "jest": "^24.9.0", "metro-react-native-babel-preset": "^0.56.3", "react-test-renderer": "16.9.0" }, "jest": { "preset": "react-native" } }

App.js

`/**

• Sample React Native App
• https://github.com/facebook/react-native
• @Format
• @flow
  */

import React from 'react';
import {Text, View} from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createDrawerNavigator} from 'react-navigation-drawer';

class Hello extends React.Component {
render() {
return (

hello

);
}
}

const App = createAppContainer(
createDrawerNavigator(
{
Hello,
},
{
drawerBackgroundColor: 'blue',
},
),
);
export default App;`

[mrkrand]

Hi,

I have same issue on my app. Did you find out what causes this?

[thiagovpaz]

Same here. how fixed ?

[mrkrand]

Probably closed because of this:
https://github.com/react-navigation/drawer/issues/108

[technoplato]

I fixed it! 🥳

https://youtu.be/6NXMW-pWI_k

1. Create a class property called initialRender and initialize it to true
2. In your drawer's render method, check if initialRender is true.
3. If it's true, set it to false and return null.
4. Set the drawerBackgroundColor to transparent in your createDrawerNavigator call.

Nothing fancy. Just check if you're on the first drawer render. If you are, set the first render flag to false and return null. You also need to set the background color or your drawer in your createDrawerNavigator call to "transparent". You can still set a color, just do it in your custom drawer component. Mine is called Menu and is just a normal React Component that renders the drawer contents.

Here's my relevant code:

Menu Component

// Magic Happens Here!!!
let initialRender = true; // <-- Add this

class Menu extends React.Component {
  render() {
    // Fix initial flash when loading
    if (initialRender) {
      // On the first render (when the drawer will flash, return null so 
      //  null will "flash")
      // Don't forget to set this flag to false or you're always going 
      // to have a ghost drawer
      initialRender = false;
      return null;
    }

    const drawerItemFontSize = Device.isTablet ? 34 : 28;

    const { navigate } = this.props.navigation;

    return (
      <LinearGradient
        colors={["#4DB6AC", "#000"]}
        style={styles.linearGradient}
      >
        <DrawerNavigatorItems
          {...this.props}
          labelStyle={{ color: "#ffffff", fontSize: drawerItemFontSize }}
          onItemPress={route => {
            const name = route.route.routeName;
            if (name === "TCT Kids Live") {
              Player.playLiveStream(navigate, "5395574715001");
            } else if (name === "TCT HD Live") {
              Player.playLiveStream(navigate, "5395571489001");
            } else {
              this.props.navigation.navigate(route.route.routeName);
            }
          }}
        />
      </LinearGradient>
    );
  }
}

export default Menu;

AppNavigation

// Manifest of possible screens
const PrimaryNav = createDrawerNavigator(
  {
    Home: {
      screen: HomeNavigator
    },
    "TCT HD Live": {
      screen: HomeNavigator
    },
    "TCT Kids Live": {
      screen: HomeNavigator
    },
    Shows: {
      screen: ShowNavigator
    },
    "TCT Kids Schedule": {
      screen: KidsScheduleNavigator
    },
    "TCT HD Schedule": {
      screen: HDScheduleNavigator
    },
    Favorites: {
      screen: FavoritesNavigator
    },
    More: {
      screen: MoreNavigator
    }
  },
  {
    headerMode: "none",
    drawerBackgroundColor: "transparent", <-- ADD THIS TOO
    drawerWidth: 330,
    drawerPosition: "left",
    contentComponent: Menu
  }
);

[theristes]

I'm not proud of my solution but what I did was set a state for drawerType as a back, and before calls openDrawer I change that for what I want, well, it works fine. I'm using hooks btw

[amit13091992]

I have added code like this: added drawerType and this issue gets resolved.

const Drawer = createDrawerNavigator(
    {
        Main: MainNavigator
    },
    {
        drawerPosition: 'right',
        drawerWidth: 290,
        contentComponent: DrawerContainer,
        drawerType: 'slide'   //this line I have added
    }
);

App configuration:

    "react": "16.11.0",
    "react-native": "0.62.1"

[Fernando922]

I have added code like this: added drawerType and this issue gets resolved.

const Drawer = createDrawerNavigator(
    {
        Main: MainNavigator
    },
    {
        drawerPosition: 'right',
        drawerWidth: 290,
        contentComponent: DrawerContainer,
        drawerType: 'slide'   //this line I have added
    }
);

App configuration:

    "react": "16.11.0",
    "react-native": "0.62.1"

in my case drawerType='back' solved

[naxir]

<Drawer.Navigator
minSwipeDistance={100}
drawerType={'front'}
drawerStyle={{width: Dimension(250)}}
drawerContent={(props) => <DrawerScreen {...props} />}
drawerPosition="right"
initialRouteName="profile">
<Drawer.Screen name={'profile'} component={Profile} />
<Stack.Screen
options={{gestureEnabled: false}}
name={'PrivacyPolicy'}
component={PrivacyPolicy}
/>
</Drawer.Navigator>

on First load it's blink
"react-native": "0.63.1",
React Navigation V5
When i change from front to back then it's not blink
I want back behaviour with no Blink any work around on this?

[Megha060199]

Any solutions on this ?